Design tokens
Every value the components use comes from a CSS custom property. Brand values live on :root. Theme values change with the class on <html>. The swatches below are read from src/styles/tokens.css when the docs are built, so they never drift from it.
How to use them
Read tokens with var() in your own styles, and prefer the role over the raw value. A surface should use --surface-color, not --white-color, so it turns dark with the theme:
.my-card {
padding: var(--spacing-8);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--surface-color);
color: var(--theme-text-color);
}To change a value for the whole app, redefine it after the stylesheet. Your CSS sits outside the library's cascade layers, so it wins:
:root {
--radius-md: 0.5rem;
}Color roles
Green marks primary actions and selection. Orange is a brand accent for details such as link underlines and featured borders. Errors, warnings and successes each have their own foreground and background, tuned per theme.
| Role | Tokens | Use for |
|---|---|---|
| Canvas | --theme-bg-color | The page background |
| Surface | --surface-color | Panels, cards and fields |
| Raised surface | --surface-raised-color | Featured panels and banners, with --shadow-sm |
| Interaction | --surface-hover-color, --surface-sunken-color | Neutral hover and pressed states |
| Selection | --selected-bg-color, --primary-text-color | Selected filters, page numbers, radio cards |
| Feedback | --error-color, --error-bg-color, --success-color, --success-bg-color, --warning-color, --warning-bg-color | Validation and status messages |
| Boundaries | --control-border-color, --focus-color, --border-color | Control borders, keyboard focus, and subtle dividers |
Glass tokens (--glass-bg, --glass-blur) are for overlays such as the navigation bar. Content surfaces stay opaque, so their contrast holds over images and decorative backgrounds.
Every token
Color
Every color custom property declared in src/styles/tokens.css, read from that file at build time. Each swatch paints its literal value, so alpha tokens show against the checkerboard behind them.
Brand
Theme-independent values defined on :root.
--primary-colorhsl(143 64% 24%)#166434--primary-color-alpha-12hsl(143 64% 24% / 0.12)#1664341F--on-primary-colorhsl(0 0% 100%)#FFFFFF--accent-colorhsl(23 98% 46%)#E85A02--on-accent-colorhsl(0 0% 0%)#000000--dark-colorhsl(214 45% 7%)#0A111A--dark-color-alpha-05hsl(214 45% 7% / 0.05)#0A111A0D--dark-color-alpha-10hsl(214 45% 7% / 0.1)#0A111A1A--dark-color-alpha-20hsl(214 45% 7% / 0.2)#0A111A33--dark-color-lighten-30hsl(214 45% 30%)#2A486F--gray-colorhsl(0 0% 80%)#CCCCCC--dark-gray-colorhsl(0 0% 46%)#757575--white-colorhsl(0 0% 100%)#FFFFFF--white-color-alpha-05hsl(0 0% 100% / 0.05)#FFFFFF0D--white-color-alpha-15hsl(0 0% 100% / 0.15)#FFFFFF26--white-color-alpha-20hsl(0 0% 100% / 0.2)#FFFFFF33--white-color-darken-30hsl(0 0% 70%)#B3B3B3
Theme
Redefined per theme on html.light and html.dark. Components read the token name; the value follows the class on <html>.
--theme-bg-colorLight hsl(0 0% 98%) · #FAFAFADark hsl(0 0% 6%) · #0F0F0F--theme-text-colorLight hsl(0 0% 10%) · #1A1A1ADark hsl(0 0% 96%) · #F5F5F5--text-colorLight hsl(0 0% 10%) · #1A1A1ADark hsl(0 0% 96%) · #F5F5F5--primary-text-colorLight hsl(143 64% 24%) · #166434Dark hsl(143 58% 44%) · #2FB161--text-color-lightLight hsl(0 0% 40%) · #666666Dark hsl(0 0% 60%) · #999999--code-bgLight hsl(0 0% 90%) · #E6E6E6Dark hsl(0 0% 10%) · #1A1A1A--border-colorLight hsl(0 0% 84%) · #D6D6D6Dark hsl(0 0% 25%) · #404040--surface-colorLight hsl(0 0% 100%) · #FFFFFFDark hsl(0 0% 10%) · #1A1A1A--surface-raised-colorLight hsl(0 0% 100%) · #FFFFFFDark hsl(0 0% 14%) · #242424--surface-sunken-colorLight hsl(0 0% 96%) · #F5F5F5Dark hsl(0 0% 8%) · #141414--surface-hover-colorLight hsl(0 0% 94%) · #F0F0F0Dark hsl(0 0% 18%) · #2E2E2E--control-border-colorLight hsl(0 0% 46%) · #757575Dark hsl(0 0% 55%) · #8C8C8C--focus-colorLight hsl(143 64% 24%) · #166434Dark hsl(143 58% 60%) · #5ED48B--primary-hover-colorLight hsl(143 64% 20%) · #12542BDark hsl(143 64% 28%) · #1A753D--primary-pressed-colorLight hsl(143 64% 16%) · #0F4323Dark hsl(143 64% 20%) · #12542B--selected-bg-colorLight hsl(143 35% 94%) · #EAF5EEDark hsl(143 24% 16%) · #1F3327--selected-hover-bg-colorLight hsl(143 35% 90%) · #DDEEE3Dark hsl(143 24% 13%) · #19291F--selected-pressed-bg-colorLight hsl(143 35% 86%) · #CFE8D8Dark hsl(143 24% 10%) · #132018--success-colorLight hsl(143 64% 24%) · #166434Dark hsl(143 58% 65%) · #72DA9A--success-bg-colorLight hsl(143 35% 94%) · #EAF5EEDark hsl(143 24% 13%) · #19291F--error-colorLight hsl(0 65% 38%) · #A02222Dark hsl(0 80% 76%) · #F39191--error-bg-colorLight hsl(0 70% 97%) · #FDF2F2Dark hsl(0 30% 13%) · #2B1717--warning-colorLight hsl(35 90% 28%) · #885207Dark hsl(40 85% 70%) · #F4C871--warning-bg-colorLight hsl(42 90% 94%) · #FDF5E2Dark hsl(35 35% 13%) · #2D2316--glass-bgLight hsl(0 0% 100% / 0.2) · #FFFFFF33Dark hsl(0 0% 0% / 0.2) · #00000033--glass-shadowLight hsl(0 0% 0% / 0.1) · #0000001ADark hsl(0 0% 0% / 0.1) · #0000001A
Spacing
Radius
--radius-sm--radius-md--radius-lg--radius-pill
Control scale
Components declare local custom properties on their root class and redefine them per size modifier, drawing from this shared scale rather than from raw brand values.
--control-height-sm--control-height-md--control-height-lg--control-font-size-sm--control-font-size-md--control-font-size-lg--component-gap-sm--component-gap-md--component-gap-lg
Page column
The one measure the site chrome and every page section share. I9kContainer reads it, and so do I9kNavigation, I9kFooter and I9kPageContainer; the gutter is what each side keeps on a viewport narrower than the column.
--container-width-sm--container-width-md--container-width-lg--container-gutter--container-gutter-sm