Spacing & radii
A 4px scale, fixed structural dimensions, and a radius scale with no intermediates.
Spacing scale
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;Maps onto the default Tailwind 4px scale — --s-1 → gap-1, --s-3 → gap-3.
The mockup mixes the scale (gap-3, p-4) with bespoke pixel values (px-[22px], py-[18px],
gap-[11px]) for optical precision. Prefer the scale; reserve bespoke pixels for fine
adjustments you can justify.
Radii
Strict Apple scale — do not invent intermediate values.
--r-xsbadges, kbd, QR--r-smlist rows, small buttons--rPearl Button — the default--r-lgstandard card / panel--r-xllarge card--r-pillpills, segmented, toggles--r-xs: 5px; /* small badges, kbd, QR */
--r-sm: 8px; /* list rows, small buttons */
--r: 11px; /* "Pearl Button" — the default */
--r-md: 11px; /* alias of --r */
--r-lg: 18px; /* standard card / panel */
--r-xl: 22px; /* large card */
--r-pill: 9999px; /* pills, segmented controls, toggles */| Element | Radius |
|---|---|
| Card / panel | 18px (--r-lg) |
| Large card | 22px (--r-xl) |
| Standard button | 11px (--r) |
| Topbar button | 12px |
| Pill / segmented / toggle | 9999px |
| kbd / badge / QR | 5px (--r-xs) |
| Context menu | 11px |
A radius that is not on this list is a bug. Apple's scale works because the steps are far enough apart to read as categories — 11 vs 18 vs 22 says "control / card / large card". Adding a 14 collapses that distinction into a gradient nobody can decode.
Container widths
| Page | Max-width | Padding | Gap |
|---|---|---|---|
| Trade | full, h-[calc(100vh-64px)], overflow-hidden | p-3 | gap-3 |
| Portfolio | 1280px | px-6 pt-[30px] pb-24 | — |
| TLP | 1180px | p-6 | gap-5 |
Structural fixed dimensions
| Element | Value |
|---|---|
| Topbar | h-[52px], sticky, translucent + backdrop-blur(28px) |
| Topbar control height | 34px |
| Pair strip (trade) | h-[60px] |
| Trade workspace grid | grid-cols-[1fr_300px_300px] |
| Portfolio overview grid | grid-cols-[minmax(0,1fr)_372px] → 1fr below 1020px |
| Wallet popover | w-[340px] |
| Settings popover | w-[320px] |
| Deposit modal | w-[520px] |
| Shortcuts modal | w-[720px] max-w-[90vw] |
| Pair selector modal | w-[440px] max-w-[92vw] |
--header-h is read by both the topbar and the toast viewport offset. Changing it in one
place moves both — which is the point. A hardcoded 52 in the toast code is how toasts end up
overlapping the nav after a header redesign.
Breakpoints
max-[1100px], max-[1020px], max-[720px] — almost entirely for collapsing multi-column grids
to a single column. This is a mobile-collapse approach rather than mobile-first, which suits a
terminal whose primary target is a wide desktop viewport.