Global Settings

Viewport range and root font size used for all fluid calculations. Choose your preferred input unit — all token outputs are always normalised to rem.

Changing the input unit converts existing numeric token values automatically. Output CSS is always in rem.

Text Scale

Fluid font sizes via clamp(). Min and max values use the global input unit. Leading (line-height) is unitless.

Scale Tokens

Name
Min (rem)
Max (rem)
Clamp output
Leading

Line Heights

Standalone line-height tokens for reuse across components. Values are unitless multipliers.

Leading Tokens

Name
Value (unitless)

Font Families

Font stack tokens for body, heading, monospace, and display roles. Enter a full CSS font stack including fallbacks.

Family Tokens

Name
Font Stack

Font Weights

Named weight tokens mapped to numeric values (100–900).

Weight Tokens

Name
Value (100–900)

Letter Spacing

Tracking tokens for headings, labels, and body copy. Values in em — negative tightens, positive opens up text.

Tracking Tokens

Name
Value (em)

Colour Palette

Base colour tokens — accepts any valid CSS colour: #hex, rgb(), hsl(), or named colours.

Palette

Name
Value

Spacing Scale

Static sizes for padding, margin, and gap — plus fluid clamp() sizes for layout-level spacing. All numeric values use the global input unit and output as rem.

Static Spacing

Name
Value (rem)
Note

Fluid Spacing

Name
Min (rem)
Max (rem)
Clamp output

Border Radius

Corner radius tokens. Numeric values use the global input unit and output as rem. Explicit units (e.g. 4px, 50%) are passed through as-is.

Radius Tokens

Name
Value (rem)
Note

Box Shadows

Elevation and depth tokens. Enter any valid box-shadow value. These are passed through verbatim.

Shadow Tokens

Name
Value

Border Widths

Consistent border width tokens. Values use the global input unit and output as rem. Tip: border widths are typically small — enter values like 0.0625 rem (= 1px) or switch to px mode.

Border Width Tokens

Name
Value (rem)
Note

Z-Index Scale

Layering tokens for consistent stacking context. Values are unitless integers.

Z-Index Tokens

Name
Value

Opacity Levels

Transparency tokens for disabled states, overlays, and subtle UI. Values are decimals between 0 and 1.

Opacity Tokens

Name
Value (0–1)

Transitions

Duration and easing tokens for consistent motion. Enter any valid transition shorthand: 150ms ease, 300ms cubic-bezier(…).

Transition Tokens

Name
Value

Breakpoints

Viewport width reference tokens. Note: CSS custom properties cannot be used directly in @media queries — these serve as documentation and for JS access via getComputedStyle.

Breakpoint Tokens

Name
Value

Container Sizes

Max-width tokens for layout containers. Accepts any valid CSS length: 1280px, 65ch, 100%.

Container Tokens

Name
Max Width

Type Roles

Maps HTML elements (h1–h6, p, code…) to scale tokens. Reference any --fs- token using var(--fs-name).

Element Mappings

Element / Role
Points to

Colour Roles

Maps UI contexts to palette tokens. Reference any --color- token using var(--color-name), or enter a raw value.

UI Colour Roles

Role
Points to / Value

Elevation Roles

Maps UI elevation contexts (card, modal, toast…) to shadow tokens. Reference any --shadow- token using var(--shadow-name).

Elevation Roles

Role
Points to

Spacing Roles

Maps layout roles to spacing tokens. Reference any --space- token using var(--space-name), or enter a raw value.

Layout Roles

Role
Points to / Value