root
1.4 KiB
1.4 KiB
| 1 | Component | Range_px | Layout | Constraint |
|---|---|---|---|---|
| 2 | Global | 0-767 | 16px minimum gutter; 1 column; 320px reflow gate | No horizontal overflow at 320 CSS px and 400% zoom |
| 3 | Global | 768-1119 | 24-32px gutter; 4/8-column compositions | Drawer navigation remains |
| 4 | Global | 1120+ | 40px max gutter; 12-column composition; 1280px container | Desktop header visible |
| 5 | Header | 0-1119 | Brand + demo CTA where space permits + menu button | Language/theme/login live in drawer |
| 6 | Header | 1120+ | Brand, center nav, locale/theme, login, demo CTA | Header min block 76px |
| 7 | Hero | 0-1119 | Copy then product visual; CTA wraps/stacks as needed | Title <=14ch target, never forced |
| 8 | Hero | 1120+ | 7/5 grid; vertically centered | Visual may not reduce copy below readable measure |
| 9 | Lifecycle | 0-479 | 1 column | Cards auto height |
| 10 | Lifecycle | 480-767 | 2 columns | Odd last card spans only if approved |
| 11 | Lifecycle | 768+ | 4 columns | Equal visual rhythm, not fixed height |
| 12 | Workflow | 0-767 | 1 column ordered list | Connectors omitted |
| 13 | Workflow | 768+ | 4 columns | Connectors direction-aware |
| 14 | Cards | 0-767 | 1 column | No carousel substitution |
| 15 | Cards | 768-1119 | 2 columns | Content-driven |
| 16 | Cards | 1120+ | 2-3 columns by component contract | No text truncation |
| 17 | Dialogs | 0-479 | Viewport-safe margin 8-16px; internal scroll; no hidden submit | Virtual keyboard tested |
| 18 | Dialogs | 480+ | Max inline size 720px | Centered native dialog |
| 19 | Footer | 0-767 | Stacked groups | Logical order |
| 20 | Footer | 768+ | Brand column + grouped links | No fixed widths |