One system, four working modes
Desktop, tablet, mobile and 320px stress compositions change hierarchy without changing component meaning.
Responsive stress lab
Switch the working mode, force long copy and expose safe-area padding. The frame must remain readable without horizontal page overflow.
Layout primitives lab
Container, gutter, stack, wrap, grid, safe-area, landscape and 200% zoom behavior share one responsive contract.
Floating UI Collision Lab
Toggle real layer families together. Persistent controls stay reachable, the tray clears content, modal owns focus and Toast remains visually highest.
Working-mode contract
| Mode | Index | Layout | Persistent UI |
|---|---|---|---|
| Desktop ≥1180 | Sticky left rail | Open multi-column composition | Topbar + side index |
| Tablet 721–1179 | Compact rail / adaptive grid | Reduced columns | Topbar remains compact |
| Mobile 321–720 | Bottom dock + expandable tray | Single reading column | Safe-area aware |
| Narrow 320 | Bottom dock + local scrolling | No clipped copy or controls | 44px minimum targets |
Mobile rules
Content, tables and code samples scroll locally or reflow at 320px.
The system index lives near the thumb and does not collapse into a top bar.
The dock clears page content and stays below modal and toast layers.
Bottom and inline gutters include device safe-area insets.