Space and shape

Dimension lives apart from the theme. A mis-set theme should change colour, never layout.

Spacing

Named on the Atlassian convention, where 100 is 8px rather than 100px. The naming survives a change of base unit, which a pixel-named scale does not. Three steps sit under the base — 2, 4 and 6 — for the gaps inside a control, where a whole step is too much: the space between an icon and its label, a badge’s padding, the rail beside a list.

Above 64, for sections and page margins: 900 = 72px · 1000 = 80px · 1100 = 96px · 1200 = 128px · 1300 = 160px · 1400 = 192px · 1500 = 240px · 1600 = 320px.

Choosing a step

Group with space before lines. Things that belong together sit one small step apart and groups sit at least twice that apart — 8px inside a group, 16px or more between groups — or the grouping reads as noise. One step per level of subordination, with 16px as the default, so a form’s fields are 16 apart and its sections 32. A hairline is the last resort, for where space alone cannot carry the structure: a table’s rows, a dialog’s bands.

Between targets, 12px is the floor for bordered or filled controls beside each other, and 24px around a borderless one — a ghost button, an icon button — whose edge nothing draws. Controls stay inside the layout’s margins and the safe area; a full-width button on a phone is inset by 16px, never against the edge. Breakpoints come from content, not devices: this site breaks at 370 where a Calendar stops fitting a bordered specimen, at 760 where the sidebar stops fitting beside the prose, and at 1440 where the section list can join the prose without squeezing a Table below its width.

Size

Three control heights — 32, 40 and 48px — shared by Button, Input, Select and the date field, so a button and a field in one row sit on one line. A 20px icon slot inside them, at every size. Checkbox, Radio and Switch have one size, because a field’s size changes its box and never its text, and those controls are their box.

A target is at least 24px square, the AA floor, and aims for 40px on a desktop and 44px under a thumb. A control smaller than that borrows the rest from what it is wrapped in — a checkbox’s label, a row’s width — and two targets never overlap. The small button is 32px: above the floor, and for a screen that is touched, use the large one.

Radius

Buttons are capsules — radius/full, not radius/md. It is the most recognisable thing about the system’s shape language, so it is worth stating rather than leaving each component to decide. Fields are xl, and deliberately not the capsule, so what you press and what you type into never look alike. Cards and dialogs are 2xl; wells and small chips sm.

Nested corners are concentric

When one rounded box sits inside another, the outer radius is the inner radius plus the padding between them, so the two curves share a centre. The home page’s cards are the rule applied: 2xl outside, sm inside, and 12px between — 16 = 4 + 12. The dropdown menu is a step short of it: xl outside and lg rows at 8px, where concentric would want 16 outside. Those are the drawn numbers, and they are recorded here rather than corrected.

Stroke width

Three widths by function. The hairline divides and outlines; the control width edges a field, a checkbox, a radio; the ring is the focus indicator, drawn outside the control at a 2px offset. A control’s border never changes width between states — only its colour changes, and the ring is added outside it — because a 1 to 1.5px step would shift the outer box and reflow the form on focus. Focus adds geometry, never recolours a border, so colour is never the only channel carrying it.

Shadow ink

The shadow steps, their geometry and what they measure against the ground are on Elevation and states. What belongs here is the ink, because it was a choice with a number. In light it is stone/950 at 10% and 12%, which lands ΔE76 1.88 and 2.27 from the drawn navy. Pure black at the nearest steps of the alpha ramp was tried first and measured 2.20 and 5.70 — the second is well past the ~2.3 just-noticeable difference, so the shadow needed its own ink. night/950 lands closer, 1.32 and 1.59, and was rejected: the ink is shared by both surface ladders, so it stays neutral rather than following one of them. The shadow is the one token besides the theme that varies by mode, and it is not a fourth Figma collection, because effects are styles there rather than variables.

Accessibility

Dimension is where reflow lives. The page holds its structure to 320px and 200% zoom without a sideways scroll, text containers take a minimum height rather than a fixed one, and a translated label that grows finds room to wrap rather than a box sized to one language. Targets meet the floor above, keep their spacing, and never overlap; a decorative layer over a control takes pointer-events: none so a glow never swallows a click.