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

Control heights

The height a form control is drawn at: sm 2rem (32px), md 2.5rem (40px), lg 3rem (48px). Each is max() of a preferred step (--cb-control-height-base-*) and the active pointer floor, so a density scale can retune the ladder but never take a control under its floor.

On a coarse pointer — a touch screen — --cb-control-floor becomes --cb-control-floor-coarse (2.75rem, 44px), so sm and md both reach 44px and lg keeps its 48px, with no per-control CSS. A pointer that hovers keeps --cb-control-floor-fine (2rem, 32px).

The 2026 SaaS convention is a tighter ladder — xs 24 / sm 28 / md 36 / lg 44 / xl 52. Ceebee starts higher (its sm 32 is already above that convention's sm 28) and its md is 40 because the library is drawn at a roomier base than a dense admin table. The top is lg 48; there is no xl control. A consumer that wants the convention's tighter steps retunes --cb-control-height-base-*, and the floor still holds.

--cb-control-height-sm

--cb-control-height-md

--cb-control-height-lg

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