Design Tokens

All component styling is driven by CSS custom properties. Override any token by injecting a stylesheet via your Limio settings to customise the look of every component.

View live token swatches in Storybook

Colour Tokens

Primary

Token	Purpose	Default
--tw-primary	Buttons, links, active states	210 7% 33%
--tw-primary-foreground	Text on primary backgrounds	0 0% 100%

Surfaces

Token	Purpose	Default
--tw-surface-main	Page/section backgrounds	210 7% 95%
--tw-surface	Secondary surfaces	0 0% 100%
--tw-background	Base layer, inputs	0 0% 100%

Cards

Token	Purpose	Default
--tw-card	Card background	0 0% 100%
--tw-card-foreground	Card text	210 8% 19%
--tw-card-secondary	Alternate card background	0 11% 98%

Text

Token	Purpose	Default
--tw-text-primary	Primary text colour	210 8% 19%
--tw-text-secondary	Secondary text	210 7% 33%
--tw-text-tertiary	De-emphasised text	208 7% 46%
--tw-text-muted	Muted/disabled text. Deprecated alias of --tw-text-disabled; use that in new code	206 6% 56%

Form States

Token	Purpose	Default
--tw-form-focus	Focus ring colour	210 79% 46%
--tw-form-disabled	Disabled background	0 0% 95%
--tw-form-destructive	Validation errors	0 65% 51%
--tw-form-accent	Checkboxes, toggles	210 79% 42%

Semantic

Token	Purpose	Default
--tw-secondary	Secondary actions	210 40% 96.1%
--tw-destructive	Destructive actions	0 100% 50%
--tw-border	Borders	202 6% 75%
--tw-popover	Popover backgrounds	0 0% 100%

Layout Tokens

Token	Purpose	Default
--tw-radius	Border radius (cards, inputs)	0.5rem

Typography

The Text component provides these variants:

Variant	Typical use
h1	Page titles
h2	Section headings
h3	Sub-section headings
body	General text (default)
paragraph	Long-form content
label	Form labels
legend	Fieldset legends

Sizes: small, medium, large. Weights: default, emphasised.

Overriding tokens

Inject a stylesheet with your custom values:

@layer base {
  :root {
    --tw-primary: 350 80% 45%;
    --tw-primary-foreground: 0 0% 100%;
    --tw-radius: 0.75rem;
    /* override only what you need -- everything else inherits from default */
  }
}

Colour values are space-separated HSL triplets without the hsl() wrapper, so opacity modifiers work automatically (e.g. hsl(var(--tw-primary) / 0.8)). Use 350 80% 45%, never 350, 80%, 45%: a comma-separated value produces invalid CSS and silently breaks every opacity utility.

See the theming guide for more details.