Spacing and radius
Space comes from a 4px base unit in eight steps. Corners come from a short scale where each radius has a job.
Spacing
Section titled “Spacing”Major bands of a page sit --space-section apart, always the same distance; a page never tightens it. Inside cards the padding depends on the card: 32px for feature and comparison cards, 24px for content windows, 20px for grid tiles. Grids drop columns rather than shrinking cards.
| Token | Value | Description |
|---|---|---|
--space-xxsspace.xxs | 4px | |
--space-xsspace.xs | 8px | |
--space-smspace.sm | 12px | |
--space-mdspace.md | 16px | |
--space-lgspace.lg | 24px | |
--space-xlspace.xl | 32px | |
--space-xxlspace.xxl | 48px | |
--space-sectionspace.section | 96px | Between major bands, uniformly. |
Page widths and breakpoints
Section titled “Page widths and breakpoints”Content caps at --container-max. A content page with both side rails uses --container-wide instead, which keeps the main column at the reading measure, --container-reading, with a rail either side. Body text never runs wider than the reading measure.
The system has two breakpoints and no others: at --break-rails the right rail drops, and at --break-stack everything stacks, with the main column first.
| Token | Value | Description |
|---|---|---|
--container-maxcontainer.max | 1200px | Content width. |
--container-readingcontainer.reading | 680px | Single-column reading measure: article body, about page. |
--container-widecontainer.wide | 1360px | Three-column content pages: two rails and gutters around a full reading column. |
--nav-heightnav-height | 64px | Top navigation bar height. |
--control-heightcontrol-height | 40px | Inputs and buttons. |
--icon-button-sizeicon-button-size | 36px | Icon-only buttons. |
--rail-leftrail.left | 200px | |
--rail-rightrail.right | 280px | |
--break-railsbreak.rails | 1080px | Below this the right rail drops. |
--break-stackbreak.stack | 768px | Below this everything stacks, main column first. |
--tap-mintap-min | 44px | Minimum touch target below 768px. Elements opt in with data-ds-tap. |
Radius
Section titled “Radius”Radii say what something is: 8px for buttons and inputs, 12px for content cards, 16px for a large artifact such as a hero image, a pill for badges and full for avatars and icon buttons. 4px and 6px are kept for badge accents and menu items.
| Token | Value | Description |
|---|---|---|
--radius-xsradius.xs | 4px | |
--radius-smradius.sm | 6px | |
--radius-mdradius.md | 8px | |
--radius-lgradius.lg | 12px | |
--radius-xlradius.xl | 16px | |
--radius-pillradius.pill | 9999px | |
--radius-fullradius.full | 9999px |