Shape and space

Radius

Radius grows with the size of the thing: md for tooltips and notes, lg for inputs, xl for cards, dialogs and menus, 3xl for the hero. Marketing buttons and chips are pills.

Why

The ramp is scaled by --radius-scale, which each density re-declares: 1.4 for marketing, 1.25 for the app.

xs

sm

md

lg

xl

2xl

3xl

full

Spacing

Components space themselves with these steps only. Marketing runs on a 4px grid, the app on 2px.

Why

The names stay the same across densities; only the step changes, so a component keeps its proportions when the whole surface densifies.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

--space-20

--space-24

--space-32

--space-36

Control heights

Three heights for every button, input and select. On a touch screen, app controls rise back to 44px.

--control-h-sm

--control-h

--control-h-lg

Layout

Widths and rhythm for pages, sidebars and rows.

Token	Used for	Here
--container	The widest content column.
--container-rails	The railed marketing column.
--container-prose	Long-form reading measure.
--container-narrow	Forms, sign-in and empty states.
--sidebar-w	Sidebars, in the app and here.
--nav-h	The site nav.
--gutter	Page side margin on small screens.
--gutter-lg	Page side margin on large screens.
--section-y	Space above and below a section.
--section-y-major	Space around a major section.
--row-h	A table or list row.
--icon-box	The box an icon sits in.
--icon-glyph	A glyph drawn smaller than its box.
--status-dot	A status dot.