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, 11%, 98%
--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	208, 7%, 46%

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	210, 7%, 83%
--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 */
  }
}

All values are in HSL format without the hsl() wrapper, so opacity modifiers work automatically (e.g. hsl(var(--tw-primary) / 0.8)).

See the theming guide for more details.