Design tokens

Every design decision lives as a CSS custom property under your prefix, generated in abstracts/. Change a token, the whole system follows.

Colours

--my-colour-{palette}-{variant} plus split channels (-h, -s, -l), so you can derive opacity and lightness at runtime:

background: hsl(var(--my-colour-primary-h) var(--my-colour-primary-s) var(--my-colour-primary-l) / 0.15);

--my-colour-on-solid is your white, frozen across themes, for text on solid brand surfaces. Semantic status colours ship as --my-colour-success / warning / danger.

Fluid type & space (Utopia)

--my-step--2 … --my-step-8 and --my-space-3xs … --my-space-3xl are clamp() expressions that interpolate between your mobile and desktop values - no breakpoint jumps. Custom one-up pairs like --my-space-s-l span two steps for larger gaps.

Radius, shadows, motion, layers

• --my-radius-s/m/l/button/full - from your roundness choice.
• --my-shadow-s/m/l - neutral-tinted elevations that soften in dark mode.
• --my-duration-fast/base/slow + --my-ease - every transition reads these.
• --my-z-tooltip/dropdown/header/overlay/toast - one layering scale, no magic numbers.

Fonts & rhythm

--my-font-heading/body/mono, --my-line-height-*, --my-letter-spacing-*, --my-heading-weight and --my-heading-transform carry your typography personality.