Tokens

Every value a component may use. Structure tokens (spacing, radius, timing) are stable across brands; skin tokens (colour, elevation, texture) are what a Skin rewrites. A component never writes a hex and never writes a duration.

Colour

--cb-bg

--cb-bg-subtle

--cb-surface

--cb-border

--cb-fg

--cb-fg-muted

--cb-brand-300

--cb-brand-500

--cb-brand-700

--cb-tone-info

--cb-tone-success

--cb-tone-warning

--cb-tone-danger

--cb-decor-violet

--cb-decor-blue

--cb-decor-teal

--cb-decor-green

--cb-decor-amber

--cb-decor-rose

Spacing

--cb-space-1

--cb-space-2

--cb-space-3

--cb-space-4

--cb-space-5

--cb-space-6

--cb-space-7

--cb-space-8

Radius

--cb-radius-sm

--cb-radius-md

--cb-radius-lg

--cb-radius-xl

--cb-radius-full

Motion

Durations and easings are tokens too, so timing stays consistent across components and can be retuned in one place.

--cb-duration-instant

--cb-duration-fast

--cb-duration-base

--cb-duration-slow

--cb-duration-deliberate