Planchet

Foundations

Spacing and radius

Design 1.0.0, Built 1.0.0. Figma: not linked yet

Spec

Shared names with Figma, on one size scale (--size-*). Use the names in code: --space-md, --radius-lg.

Radius by use

  • Inputs and buttons: md (8px).
  • Alerts and menus: lg (12px).
  • Panels and dialogs: xl (16px). Bottom sheets: xl on the top corners.
  • Pills and chips: full. No button is ever pill-shaped.
  • Runway markers are circles.

Sizes that are not spacing

  • Tap targets at least 44px (WCAG 2.2, comfortable on phones); 24px minimum for small links such as the logo.
  • Content at most about 1280px wide; long text at 65ch; the entry hint at 90ch.
  • Borders 1px, or 2px for the strong edge (focus, pressed danger, the entry row's accent edge).
  • Breakpoints in use: 768, 900 and 1024px (#19 will settle them on 900 and 1024).

Changes

  1. 1.0.0, Sep 30 2026: Space none to 4xl and radius none to full, shared names with Figma.