Foundations

Spacing

4px base scale with denser steps at small sizes and sparser steps past 32px. Containers bracket the layout from comfortable reading to wide desktop. Source of truth lives in packages/ui/tokens.css.

Scale

Bars are rendered at their actual pixel size, so the eye learns what each token feels like.

  • --space-000px
  • --space-10.25rem4px
  • --space-20.5rem8px
  • --space-30.75rem12px
  • --space-41rem16px
  • --space-51.25rem20px
  • --space-61.5rem24px
  • --space-82rem32px
  • --space-102.5rem40px
  • --space-123rem48px
  • --space-164rem64px
  • --space-205rem80px
  • --space-246rem96px
  • --space-328rem128px

Radii

A fixed corner scale. Small controls (a checkbox-sized box, ≤20px) take --radius-xs; everything else small (buttons, inputs, chips, avatars) takes --radius-sm. Values above that are for surfaces, not controls. Swatches render at their actual radius.

  • --radius-xs4px

    Small controls — checkbox, tooltip arrow (≤20px box).

  • --radius-sm8px

    Default — buttons, inputs, chips, avatars, menu items.

  • --radius-md14px

    Cards, panels, integration tiles.

  • --radius-lg20px

    Large surfaces — dialogs, showcase cards.

  • --radius-xl24px

    Hero and feature blocks.

  • --radius-pill999px

    Fully rounded — status pills, toggles.

Container widths

Max-widths for centred layouts. Bars are scaled to --container-xl (1280px = 100%). A fifth value, --container-prose (65ch), exists for long-form reading and adapts to the typeface in use rather than to a fixed pixel width.

  • --container-sm40rem · 640px

    Narrow column — quick reads, forms, modal bodies.

  • --container-md48rem · 768px

    Default content column — most marketing sections live here.

  • --container-lg64rem · 1024px

    Standard product layout — dashboard width.

  • --container-xl80rem · 1280px

    Wide desktop — full marketing hero, full dashboard.

  • --container-prose65ch

    Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is. This paragraph is rendered inside a 65ch column — the comfortable reading width that --container-prose targets.

    Width adapts to the body font. Use for articles, long-form policies, and documentation.