Size

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

Content widths

One ladder caps every horizontal width on a page — text column and band alike — and each rung carries exactly one role, stated in its name. A -text- rung caps a text column; a bare rung sizes a band (ADR-041). Apply with max-width on the element that owns the column.

The text rungs interleave numerically with the band rungs (600 < 640 < 720 < 800). Pick a rung by its role, which the name states — never by sorting the ladder.

/* a band */
.content-section {
  max-width: var(--bds-content-width-md);
  margin-inline: auto;
}

/* the text column inside it */
.article-body {
  max-width: var(--bds-content-width-text-sm);
}

A column has one content width and one left edge: the element that owns the column sets the width, and blocks nested inside it never re-cap themselves. See Page Grid → The column rule, which is where the horizontal-axis standard lives — this page is the token catalog.

Screen breakpoints

BDS defines five canonical breakpoints. All five are Figma variables in the ❖ Brik Foundations breakpoint collection, and the CSS custom properties (--breakpoint-*) are generated from them. For CSS @media rules inside BDS, use the --bds-up-* / --bds-down-* custom media below; in TS, import mediaQueries (or breakpoints) from @bds-tokens — CSS custom properties (var()) cannot be used inside @media().

The layout tier also reads three rungs — mobile, tablet and wider — at build time, as the widths where --page-inset and --section-padding-block hit their device values. Moving one of those rungs in Figma moves the tier's endpoint with it.

Using breakpoints in CSS

mediaQueries gives ready-made conditions, so a call site never re-derives one. up.<rung> is mobile-first (min-width); down.<rung> is the exclusive complement, stepped down 0.02px so up and down never both match at the boundary.

import { mediaQueries } from '@bds-tokens';

// In a CSS-in-JS context
const styles = {
  [`@media ${mediaQueries.up.desktop}`]: {
    display: 'grid',
    gridTemplateColumns: '1fr 2fr',
  },
};

/* In BDS component CSS — a breakpoint custom media, resolved to px at build time */
@media (--bds-up-desktop) {
  .sidebar-layout {
    display: grid;
  }
}

The names are --bds-up-<rung> (min-width, all five rungs) and --bds-down-<rung> (max-width, rung minus 0.02px; every rung except mobile). They live in tokens/custom-media.css, and postcss.config.mjs resolves each one to px, so dist/styles.css ships plain @media conditions — @custom-media is not Baseline in browsers. lint-tokens pins each definition to its --breakpoint-* rung and fails any literal px in an @media under components/ (ADR-044). Consumers are unaffected: they get the resolved px from dist.

Using breakpoints in JavaScript

import { mediaQueries } from '@bds-tokens';

const isDesktop = window.matchMedia(mediaQueries.up.desktop).matches;

breakpoints remains exported for the cases where you need the raw width — a sizes attribute, a layout calculation, a chart threshold:

import { breakpoints } from '@bds-tokens';

const px = parseInt(breakpoints.desktop, 10); // 1024

Element sizes

Fixed element dimensions — icons, dots, indicators — use the numeric --size-* scale. Values step in 4px increments above 8px.

The scale runs --size-0 (0) through --size-2200 (100px).

Aspect ratio

--aspect-* feeds the aspect-ratio property, so a media box holds its shape as it scales — no padding-hack. Nine ratio primitives cover the common orientations, and four semantic aliases name the cases you reach for most.

Four aliases point at the primitive above so intent reads at the call site — prefer them where one fits.

.media-frame {
  aspect-ratio: var(--bds-aspect-cinema);
}

Related

• Spacing tokens — the sibling --space-* scale for layout padding and gap (overlaps --size-* on the low/mid steps, diverges above — see the note above)
• Typography → Icon sizes — semantic icon-size tokens
• Page Grid — the horizontal-axis standard these --content-width-* tokens serve: the width-container recipe, the page inset, and the column rule