Flex & grid

The 12-column .ax-dash-grid plus .ax-cluster / .ax-stack flex helpers — the only layout primitives you need.

BordersHelpers
.ax-dash-grid · .ax-col--N

12-column spans

Every span that adds to 12. Auto-stacks to halves at 992px and full-width at 576px.

gutter · --ax-space-6
ax-col--12
ax-col--6
ax-col--6
ax-col--8
ax-col--4
ax-col--4
ax-col--4
ax-col--4
ax-col--3
ax-col--3
ax-col--3
ax-col--3
ax-col--5
ax-col--7
ax-col--2
ax-col--2
ax-col--2
ax-col--2
ax-col--2
ax-col--2
Resize the window to watch each row collapse responsively — no per-row media queries needed.
.ax-cluster

Inline cluster

Horizontal, wrapping, vertically-centered flow with a token gap. The workhorse of toolbars & meta rows.

DesignEngineeringProductMarketingFinanceOperations
.ax-cluster--between + .ax-spacer
Q2 report
.ax-stack

Vertical stack

Column flow with a consistent gap — perfect for form fields and list bodies.

Two-factor authOn
Email digestWeekly
Session timeout30 min
justify-content

Distribution

Common flex justifications, composed inline with role tokens.

justify-content: flex-start
justify-content: center
justify-content: flex-end
justify-content: space-between
justify-content: space-around
justify-content: space-evenly
auto-fit · minmax

Card auto-grid

Tiles reflow by available width with no breakpoints.

Revenue$748K
Orders1,248
AOV$59.95
Refunds3.1%
Sessions54.2K
Bounce38%