Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt

Use this file to discover all available pages before exploring further.

This is an advanced technique. Though we try to keep the class names and markup stable, they can change between SDK versions. Always review your overrides after updating the SDK.
Custom CSS is the final layer of the styling system. You should always start with Theming for broad changes, and then use CSS for small, specific tweaks that the theme system cannot handle. Good use cases for custom CSS include:
  • Changing the font weight of a specific card’s title.
  • Adding a unique border to an element.
  • Adjusting the margin on a particular button.

​
How to Find CSS Classes

The most reliable way to find the correct class name for a C1 element is to use your browser’s developer tools.
  1. In your browser, right-click the element you want to style.
  2. Select “Inspect” from the context menu.
  3. The developer tools panel will open, highlighting the element’s HTML. The class attribute will contain the class names you can use as CSS selectors.

​
Applying Your Custom CSS

Let’s say we want to make the title of all C1-generated cards uppercase. You can add your override rules in a CSS file. 
/* styles/custom.css */

/* Target the C1 card title class to make it uppercase */
.crayon-header {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

​
Best Practices

  • Be Specific, But Not Too Specific: Avoid overly complex selectors like div > span > p.c1-title. These are very likely to break with SDK updates. Prefer targeting a single, stable-looking class like .c1-card-title.