Breakpoints

The widths where layouts reflow, and how components adapt across them.

v1.0.0·Updated Jul 10, 2026 · 23:00

Fluid first, breakpoints second

Most of the layout never waits for a breakpoint — type and spacing scale continuously with clamp(), so a design that fits at 1280px still breathes at 1440px. Breakpoints are for the moments a layout must genuinely reflow: a rail that has to fold, a grid that has to drop tracks.

The widths

sm≤ 480pxPhones — one column; the nav folds into a drawer.

md≤ 768pxTablets — the grid drops toward 6 tracks; side rails collapse.

lg≤ 1024pxLaptops — the docs rail appears; two-column layouts unlock.

xl≥ 1280pxDesktops — content stops widening at the container; gutters grow.

Tokens

Token	Value	Trigger
--bp-sm	480px	Single column, drawer nav
--bp-md	768px	Grid toward 6 tracks, rails fold
--bp-lg	1024px	Docs rail, two-column layouts
--bp-xl	1280px	Container cap reached

Rules

Design mobile-up

Start at the smallest width and add columns as space allows. It's far easier than removing them later.

Reach for clamp first

If a value can scale smoothly, use clamp(). Save hard breakpoints for structural reflows.

Four is enough

sm, md, lg, xl cover every layout in the system. More breakpoints mean more states to test and keep honest.

Related Components

IntroductionWhat Optimistic is, why it exists, and what's inside.● documented How to UseWhere to start, how the system fits together, and the rules that keep it coherent.● documented Color SystemA monochrome field with one warm accent. Roles, scales and contrast guarantees.● documented