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 Storybookarrow-up-right

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:

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.

Last updated

Was this helpful?