Space and size
A 4px scale, the same in every app. Pick the nearest step rather than adding a value.
Spacing
--ds-space-3xs2px--ds-space-2xs4px--ds-space-xs8px--ds-space-sm12px--ds-space-md16px--ds-space-lg24px--ds-space-xl32px--ds-space-2xl48px--ds-space-3xl64px--ds-space-4xl96px--ds-space-5xl128pxFluid spacing
For vertical rhythm between sections. The phone size is already generous, and wider screens get a bit more.
| Token | Value |
|---|---|
--ds-space-fluid-s | clamp(16px, 4vw, 22px) |
--ds-space-fluid-m | clamp(22px, 5.5vw, 32px) |
--ds-space-fluid-l | clamp(36px, 8vw, 56px) |
--ds-space-fluid-xl | clamp(56px, 11vw, 88px) |
Layout
| Token | Value |
|---|---|
--ds-gutter | clamp(20px, 5vw, 64px) |
--ds-measure | 68ch |
--ds-container | 1140px |
Controls
Heights and padding are multiplied by the theme's --ds-density. A dashboard might set 0.9. Tap targets stay at least 44px whatever the density.
| Token | Value | |
|---|---|---|
--ds-control-height-sm | calc(32px * var(--ds-density)) | |
--ds-control-height-md | calc(40px * var(--ds-density)) | |
--ds-control-height-lg | calc(48px * var(--ds-density)) | |
--ds-control-tap-min | 44px | |
--ds-control-pad-x-sm | calc(10px * var(--ds-density)) | |
--ds-control-pad-x-md | calc(14px * var(--ds-density)) | |
--ds-control-pad-x-lg | calc(20px * var(--ds-density)) |
Borders and focus
| Token | Value |
|---|---|
--ds-border-hairline | 1px |
--ds-border-thick | 1.5px |
--ds-border-heavy | 2px |
--ds-focus-width | 2px |
--ds-focus-offset | 3px |
--ds-focus-style | solid |
One focus ring everywhere. It takes the theme's accent, so it's the same ring on parchment as on near-black. Tab through this page to see it.