Spacing & Layout
A ten-step spacing scale, five radii, three elevations, and a 12-column grid. Rhythm comes from the scale — never from arbitrary pixel values.
Spacing scale
Steps 1–4 are fine rhythm inside components; 5–7 separate blocks; 8–9 separate page regions.
<div style={{ gap: "var(--ch-space-4)" }} />
/* or the Tailwind scale that maps onto it: gap-4, p-6, mt-8 … */--ch-space-0--ch-space-1--ch-space-2--ch-space-3--ch-space-4--ch-space-5--ch-space-6--ch-space-7--ch-space-8--ch-space-9
Radius
sm for chips and inputs, md for controls, lg for cards, xl for sheets, pill for badges and beacons.
<div className="rounded-lg" /> /* cards */
<span className="rounded-pill" /> /* badges, beacons */--ch-radius-none--ch-radius-sm--ch-radius-md--ch-radius-lg--ch-radius-xl--ch-radius-pill
Elevation
Two structural elevations plus the Harbor beacon. Elevation is shadow + surface step together — a floated element also moves to a raised surface token.
0 1px 2px rgba(2, 6, 12, 0.5), 0 8px 24px rgba(2, 6, 12, 0.35)
Resting cards and controls
0 2px 8px rgba(2, 6, 12, 0.5), 0 24px 64px rgba(2, 6, 12, 0.45)
Overlays — popovers, dialogs, dragged items
inset 0 0 0 1px var(--ch-border-strong)
Harbor Mode glow — Aurum ring + halo
<div className="bg-surface-raised shadow-raise" />
<div className="bg-surface-raised shadow-float" />
<div className="shadow-beacon" /> /* Harbor Mode only */--ch-shadow-raise--ch-shadow-float--ch-shadow-beacon--ch-shadow-focus-ring
12-column grid
Content lives on a 12-column grid inside a capped container (max-w-6xl here). Columns merge, they never fractionally resize.
<div className="grid grid-cols-12 gap-2">
<section className="col-span-8" />
<aside className="col-span-4" />
</div>--ch-space-2
Breakpoints
Mobile-first Tailwind defaults, adopted as-is. Layouts change at md and lg; everything below sm is the reference wallet viewport.
| Prefix | Min width | Typical shift |
|---|---|---|
| sm: | 40rem · 640px | Large phones, landscape |
| md: | 48rem · 768px | Tablets; sidebar becomes persistent |
| lg: | 64rem · 1024px | Laptops; full grid engages |
| xl: | 80rem · 1280px | Desktops |
| 2xl: | 96rem · 1536px | Wide desktops; content stays capped |