Space, shape, motion
A 4px space scale, three radii, hairline borders, one restrained shadow, and motion that confirms rather than decorates.
#Space
A 4px scale. Gaps inside a component use 1 to 3. Gaps between components use 4 to 6. Between page sections use 8 and up. Do not write pixel spacing in component CSS.
| Token | Value | Scale |
|---|---|---|
--space-1 | 0.25rem | |
--space-2 | 0.5rem | |
--space-3 | 0.75rem | |
--space-4 | 1rem | |
--space-5 | 1.25rem | |
--space-6 | 1.5rem | |
--space-8 | 2rem | |
--space-10 | 2.5rem | |
--space-12 | 3rem |
#Shape
--radius-sm6px--radius10px--radius-lg14px--radius-pill999px| Radius | For |
|---|---|
--radius-sm 6px | Buttons, inputs, insets, nav items |
--radius 10px | Cards, tiles, panels |
--radius-lg 14px | Modals, the sign-in card |
--radius-pill | Pills and sparkline-sized chips |
#Elevation
The interface is flat. Cards get a hairline border and --shadow-1. Only modals, the sign-in card, and a hovered card use --shadow-2. Do not stack shadows, and do not add glow.
--shadow-1--shadow-2#Motion
120 to 200ms with --ease. Motion confirms an interaction, such as a hover or a chevron turning. It never decorates, and there is no entrance animation. prefers-reduced-motion is honored globally.
| Token | Value | Use |
|---|---|---|
--dur-fast | 120ms | Hover and press on buttons, nav items, cards |
--dur | 200ms | Expanding a nav group, rotating a chevron |
--ease | cubic-bezier(0.2, 0, 0, 1) | Every transition. Fast out, settled in |
Code
<a class="tl-card" href="#motion"><div class="tl-head"><span class="tl-week">Sep 14–20</span></div><div class="tl-headline">Border and shadow ease in over 120ms.</div></a>#Focus
Every interactive element shows a 2px ring in --color-focus with a 2px offset on keyboard focus. The ring follows the theme. Never use outline: none without a visible replacement.
Code
<div class="btn-row"><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><a class="btn-link" href="#focus">Link</a></div>#Breakpoints
| Width | What changes |
|---|---|
≤ 960px | The sidebar collapses to a top bar with a Menu button. Report and settings grids drop to one column. The sign-in brand panel stacks above the form. |
≤ 520px | Page header stacks, its end slot aligns left. Two-up form rows stack. Modal padding tightens. Billing rows stack. |
Design phone first in your head, at 390px. Content width is capped at --content-max (68rem), and narrow pages at 46rem. Every specimen in Page templates has a phone button that resizes it for real.