Tokens
Spacing & density
One spacing scale, five semantic roles on top of it, and three density modes. Every value here changes with density — switch it in the header and the samples re-flow; the table shows all three modes. Kit default: Comfortable.
Use the semantic roles (stack, inline, inset, gutter, region) in layout code. They say what the space is for, and they’re what the compositions read. Use the raw spacing-* scale only when no role fits.
Spacing scale
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| spacing-none | 0 | 0 | 0 | |
| spacing-xxs | 1px | 2px | 4px | |
| spacing-xs | 2px | 4px | 6px | |
| spacing-sm | 4px | 6px | 8px | |
| spacing-md | 6px | 8px | 12px | |
| spacing-lg | 8px | 12px | 16px | |
| spacing-xl | 12px | 16px | 20px | |
| spacing-2xl | 16px | 20px | 24px | |
| spacing-3xl | 20px | 24px | 32px | |
| spacing-4xl | 24px | 32px | 40px | |
| spacing-5xl | 32px | 40px | 48px | |
| spacing-6xl | 40px | 48px | 64px | |
| spacing-7xl | 48px | 64px | 80px | |
| spacing-8xl | 64px | 80px | 96px | |
| spacing-9xl | 80px | 96px | 128px | |
| spacing-10xl | 96px | 128px | 160px | |
| spacing-11xl | 128px | 160px | 192px |
Stack
Vertical space between siblings. .b-flow / .b-stack use stack-md by default; data-space="xs|sm|lg|xl|2xl" picks another step.
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| stack-xs | 2px spacing-xs | 4px spacing-xs | 6px spacing-xs | |
| stack-sm | 6px spacing-md | 8px spacing-md | 12px spacing-md | |
| stack-md | 12px spacing-xl | 16px spacing-xl | 20px spacing-xl | |
| stack-lg | 20px spacing-3xl | 24px spacing-3xl | 32px spacing-3xl | |
| stack-xl | 24px spacing-4xl | 32px spacing-4xl | 40px spacing-4xl | |
| stack-2xl | 40px spacing-6xl | 48px spacing-6xl | 64px spacing-6xl |
Inline
Horizontal space between inline items — icon to label, tags in a row. .b-cluster uses inline-md by default; data-gap picks another.
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| inline-xs | 1px spacing-xxs | 2px spacing-xxs | 4px spacing-xxs | |
| inline-sm | 2px spacing-xs | 4px spacing-xs | 6px spacing-xs | |
| inline-md | 6px spacing-md | 8px spacing-md | 12px spacing-md | |
| inline-lg | 12px spacing-xl | 16px spacing-xl | 20px spacing-xl |
Inset
Padding inside a component: cards, panels, buttons, table cells.
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| inset-none | 0 spacing-none | 0 spacing-none | 0 spacing-none | |
| inset-xs | 2px spacing-xs | 4px spacing-xs | 6px spacing-xs | |
| inset-sm | 6px spacing-md | 8px spacing-md | 12px spacing-md | |
| inset-md | 12px spacing-xl | 16px spacing-xl | 20px spacing-xl | |
| inset-lg | 20px spacing-3xl | 24px spacing-3xl | 32px spacing-3xl | |
| inset-xl | 24px spacing-4xl | 32px spacing-4xl | 40px spacing-4xl |
Gutter
Gaps between columns and cards. .b-grid, .b-layout-grid, .b-sidebar and .b-switcher use gutter-md by default.
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| gutter-sm | 20px spacing-3xl | 24px spacing-3xl | 32px spacing-3xl | |
| gutter-md | 24px spacing-4xl | 32px spacing-4xl | 40px spacing-4xl | |
| gutter-lg | 40px spacing-6xl | 48px spacing-6xl | 64px spacing-6xl |
Region
Vertical padding for page sections. .b-region uses region-md; data-space picks another.
| Token | Sample | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| region-xs | 24px spacing-4xl | 32px spacing-4xl | 40px spacing-4xl | |
| region-sm | 40px spacing-6xl | 48px spacing-6xl | 64px spacing-6xl | |
| region-md | 48px spacing-7xl | 64px spacing-7xl | 80px spacing-7xl | |
| region-lg | 64px spacing-8xl | 80px spacing-8xl | 96px spacing-8xl | |
| region-xl | 80px spacing-9xl | 96px spacing-9xl | 128px spacing-9xl |
Container padding & switch threshold
container-padding is the side padding of .b-wrapper. threshold is the width at which .b-switcher children go from stacked to side by side.
| Token | Compact | Comfortable | Spacious |
|---|---|---|---|
| container-padding | 12px | 24px | 40px |
| threshold | 480px width-sm | 768px width-xl | 1024px width-2xl |
Modular type scale
scale-base and scale-ratio generate the ms-* steps that type sizes alias (see Typography). Density changes the base and ratio, so type scales with density too. Don’t use ms-* directly for spacing.
| Token | Compact | Comfortable | Spacious |
|---|---|---|---|
| scale-base | 14 | 16 | 18 |
| scale-ratio | 1.2 | 1.25 | 1.333 |
| ms--3 | 8px | 8px | 8px |
| ms--2 | 10px | 10px | 10px |
| ms--1 | 12px | 13px | 14px |
| ms-0 | 14px | 16px | 18px |
| ms-1 | 17px | 20px | 24px |
| ms-2 | 20px | 25px | 32px |
| ms-3 | 24px | 31px | 43px |
| ms-4 | 29px | 39px | 57px |
| ms-5 | 35px | 49px | 76px |
| ms-6 | 42px | 61px | 101px |
| ms-7 | 50px | 76px | 135px |
| ms-8 | 60px | 95px | 180px |
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81