StartFoundationsComponentsContent
Overview Color Typography Spacing Radius Elevation Focus Motion Icons Aspect ratio

Foundations

The tokens every component is built from: color, type, space, shape, depth, focus, motion and icons. Reach for a token by its role, never for a raw value.

  • Color

    Roles, intents and themes built in OKLCH, with tables of approved pairs.

  • Aa

    Typography

    Roles on the system font of each OS, from Display to Caption.

  • Spacing

    A 4px based scale named in pixels, for gaps, padding and layout.

  • Radius

    Corner steps named in pixels; controls take 8, panels 12 and 16.

  • Elevation

    Soft two layer shadows in three steps, plus the stacking layers.

  • Continue

    Focus

    One visible ring for keyboard focus, offset from the control.

  • Motion

    Durations and easing curves for the few things that move.

  • Icons

    A stroke icon font on a 16px grid, placed with tk-icon.

  • Aspect ratio

    Named proportions for media boxes, so a layout holds its shape.