accessibility · responsive
Breakpoints
design/tokens.json's breakpoint block); published here so consumers reach for the same values designers do. TUX prefers container queries over viewport media queries for component-level responsiveness (see ADR-0007). The scale below is reserved for cases where the *layout* shifts based on viewport (sidebar collapse, mobile nav drawer, page- level grid).
the scale
Six anchors
| Name | Min-width | Rem | Tailwind / TUX usage |
|---|---|---|---|
xs | 0 | 0 | Mobile portrait. No min-width media query — the default surface. |
sm | 640 px | 40 rem | Mobile landscape, small tablets. |
md | 768 px | 48 rem | Tablets. Sidebar layout's #aside slot starts showing here. |
lg | 1,024 px | 64 rem | Laptops. Sidebar collapses to icon-only at this width (resizable). |
xl | 1,280 px | 80 rem | Desktop. Sidebar at full width with labels. |
2xl | 1,536 px | 96 rem | Wide desktop. Editorial measure caps at ~72ch — pages don't grow past this. |
container queries
Component-level responsiveness
Most TUX components key responsive behavior off their own width via @container queries — so a header in a 320px sidebar tile and the same header in a 1200px main column behave the same shape, just stacked vs. side-by- side. Why this matters for accessibility: layouts adapt regardless of where the component is composed, so screen-reader + zoomed-in users (text scaled to 200%) get the same correct adaptation as desktop users.
/* Container-query pattern — see TuxPageHeader, TuxFactoid,\n TuxRichDataGrid expanded rows, etc. */\n.tux-component {\n container-type: inline-size;\n}\n\n@container (max-width: 32rem) {\n .tux-component__layout {\n flex-direction: column;\n gap: 0.5rem;\n }\n}text scaling
200% zoom + reflow
WCAG 1.4.10 (Reflow · Level AA) requires content to render at 320 CSS pixels wide without horizontal scrolling (except for data tables, code blocks, and other 2D content). TUX components meet this by using container queries — when zoom forces a component into a narrow effective container, it adapts the same way it would in a small viewport.
Tested at: 100%, 200%, 400% zoom across light / dark / HC themes via the contrast-audit run.