Breakpoints

Six responsive tiers drive every layout shift. Resize the window — the live indicator tracks the active tier in real time.

PositioningColor tokens
Live

Active tier

Drag your window edge to watch it change.

xl
Desktops
Viewport1200 px
xs
sm
md
lg
xl
2xl
--ax-bp-*

Reference table

The token, its min-width and what changes at each step. The current row is highlighted.

TokenMinRangeTypical target
--ax-bp-xs0px0–575Phones
--ax-bp-sm576px576–767Large phones
--ax-bp-md768px768–991Tablets · sidebar overlays
--ax-bp-lg992px992–1199Small laptops
--ax-bp-xl1200px1200–1399Desktops
--ax-bp-2xl1400px1400px +Wide · boxed max
Sidebar collapses to an overlay below --ax-bp-md; the boxed-max container engages at --ax-bp-2xl.
In practice

How the grid collapses

The same four-up KPI row and 8+4 hero re-flow across the tiers — resize to feel it.

4 × .ax-col--3 → halves (≤992) → full (≤576)
Revenue
Orders
Customers
AOV
.ax-col--8 + .ax-col--4 → stacked full-width (≤992)
ax-col--8 · hero
ax-col--4 · rail