Spacing & layout

A clean spacing scale is the silent backbone of a system that feels intentional. The editor's spacing panel gives you six stops by default; you can rename, reorder, or extend.

The default scale

| Token | Value | Use | |-------|-------|-----| | 1 | 4 px | Tight inline gaps | | 2 | 8 px | Default inline rhythm | | 3 | 12 px | Form fields | | 4 | 16 px | Card padding | | 6 | 24 px | Section padding | | 8 | 32 px | Section margins |

Steps deliberately skip — no 5 or 7 in the default — because that forces decisions to land on canonical values rather than creep into half-steps. Add a 5 only if you have a specific need.

Why not just use gap-4?

Tailwind's default scale is fine but it's tied to its own ramp (4 → 16px, 6 → 24px). When you export to a non-Tailwind stack (vanilla CSS, plain styled-components, native iOS / Android), you lose that abstraction. Defining the spacing scale explicitly in DESIGN.md keeps the names stable across exports.

Layout breakpoints

The Layout sub-panel exposes breakpoints. Defaults match the spacing scale's "step ratios":

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

These match Tailwind's defaults so a one-tap export to a Tailwind preset doesn't change layout behavior. If your design uses a different breakpoint set (e.g. mobile-first 360 / 480 / 720), edit them here and the export tracks the change.