Tokens
Layout & breakpoints
Widths and containers, viewport breakpoints, and the other single-value foundations: z-index, border width, opacity and icon sizes.
Widths & containers
container-max-width is the default .b-wrapper width; data-max="sm|md|xl|full" swaps in width-xl, width-2xl, width-4xl or none. paragraph-max-width is the default measure for p and .b-center. Utilities: .u-max-w-*, .u-measure.
| Token | Value |
|---|---|
| width-3xs | 256px |
| width-xxs | 320px |
| width-xs | 384px |
| width-sm | 480px |
| width-md | 560px |
| width-lg | 640px |
| paragraph-max-width | 720px |
| width-xl | 768px |
| width-2xl | 1024px |
| width-3xl | 1280px |
| container-max-width | 1280px |
| width-4xl | 1440px |
| width-5xl | 1600px |
| width-6xl | 1920px |
Breakpoints
Prefer intrinsic layouts (.b-grid, .b-switcher, .b-sidebar) that respond to their own width with no breakpoint. Use breakpoints for page structure only: .b-layout-grid spans and .b-app-shell.
| Name | Min width | Used by |
|---|---|---|
| sm | 480px | data-span-sm |
| md | 768px | data-span, .b-app-shell nav |
| lg | 1024px | data-span-lg, .b-app-shell aside |
| xlg | 1280px | — |
Published as for reference only — custom properties can't drive @media, so the generator writes these values into the composition media queries at build time.
Z-index
Use the named layer, never a raw number: dropdown < sticky < overlay < modal < toast.
| Token | Value |
|---|---|
| z-index.hide | -1 |
| z-index.base | 0 |
| z-index.raised | 1 |
| z-index.dropdown | 1000 |
| z-index.sticky | 1100 |
| z-index.overlay | 1300 |
| z-index.modal | 1400 |
| z-index.toast | 1700 |
Border width
| Token | Sample | Value |
|---|---|---|
| border-width.0 | 0 | |
| border-width.1 | 0.5px | |
| border-width.2 | 1px | |
| border-width.3 | 1.5px | |
| border-width.4 | 1.75px | |
| border-width.5 | 2px |
Opacity
| Token | Sample | Value |
|---|---|---|
| opacity.0 | 0 | |
| opacity.5 | 0.05 | |
| opacity.10 | 0.1 | |
| opacity.20 | 0.2 | |
| opacity.25 | 0.25 | |
| opacity.40 | 0.4 | |
| opacity.50 | 0.5 | |
| opacity.60 | 0.6 | |
| opacity.80 | 0.8 | |
| opacity.100 | 1 |
Icon sizes
| Token | Sample | Value |
|---|---|---|
| icon.size.1 | 16px | |
| icon.size.2 | 20px | |
| icon.size.3 | 24px | |
| icon.size.4 | 28px | |
| icon.size.5 | 32px | |
| icon.size.6 | 48px | |
| icon.size.7 | 64px | |
| icon.size.8 | 96px | |
| icon.size.9 | 128px |
| Token | Value |
|---|---|
| icon.opacity.1 | 0.12 |
| icon.opacity.2 | 0.4 |
| icon.style.line | line |
| icon.style.duocolor | duocolor |
| icon.style.solid | solid |
| icon.style.duotone | duotone |
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81