Size
Dimensional constraints for containers, breakpoints, and elements.
Size tokens define dimensional constraints — how big things can be, where the layout breaks, and how wide content columns sit within a viewport.
Size scale
--size-00px--size-251px--size-502px--size-1004px--size-1506px--size-2008px--size-30012px--size-40016px--size-50020px--size-60024px--size-70028px--size-80032px--size-90036px--size-100040px--size-110044px--size-120048px--size-130048px--size-140052px--size-150056px--size-160060px--size-170064px--size-180072px--size-190080px--size-200084px--size-210088px--size-220096pxContent widths
Max-width values for content containers. Apply to wrapper elements with max-width to prevent lines from growing too wide at large viewport sizes.
| Token | CSS Variable | Value | Use for |
|---|---|---|---|
| Narrow | --content-width-narrow | 640px | Prose, reading columns, focused forms |
| Default | --content-width-default | 800px | Standard body sections |
| Wide | --content-width-wide | 1024px | Feature sections, content grids |
| XL | --content-width-xl | 1280px | Hero bands, wide layouts |
| Full | --content-width-full | 100% | Full-bleed (use sparingly) |
.content-section {
max-width: var(--content-width-default);
margin-inline: auto;
}Screen breakpoints
BDS defines five canonical breakpoints. The CSS custom properties (--breakpoint-*) are provided for Figma/documentation reference. For CSS @media rules, import the breakpoints constant from @bds-tokens — CSS custom properties cannot be used inside @media().
| Name | CSS Variable | Value |
|---|---|---|
| Mobile | --breakpoint-mobile | 320px |
| Tablet | --breakpoint-tablet | 768px |
| Desktop | --breakpoint-desktop | 1024px |
| Wide | --breakpoint-wide | 1280px |
| Wider | --breakpoint-wider | 1440px |
--breakpoint-web (1200px) is a legacy Figma-sourced value kept for backward compatibility. Prefer the canonical names above in new work.
Using breakpoints in CSS
import { breakpoints } from '@bds-tokens';
// In a CSS-in-JS context
const styles = {
[`@media (min-width: ${breakpoints.desktop})`]: {
display: 'grid',
gridTemplateColumns: '1fr 2fr',
},
};/* In plain CSS — hardcode the value, comment the token name */
@media (min-width: 1024px) { /* --breakpoint-desktop */
.sidebar-layout {
display: grid;
}
}Using breakpoints in JavaScript
import { breakpoints } from '@bds-tokens';
const isDesktop = window.matchMedia(
`(min-width: ${breakpoints.desktop})`
).matches;Element sizes
Fixed element dimensions — icons, dots, indicators — use the numeric --size-* scale (the same primitive scale spacing draws from). Values step in 4px increments above 8px.
| Token | Value |
|---|---|
--size-50 | 2px |
--size-100 | 4px |
--size-200 | 8px |
--size-400 | 16px |
--size-600 | 24px |
--size-800 | 32px |
--size-1000 | 40px |
The scale runs --size-0 (0) through --size-2200 (100px).
Related
- Spacing tokens — same numeric primitives used for padding and gap
- Typography → Icon sizes — semantic icon-size tokens