Purpose
To standardize grids, spacing, and breakpoints so wireframes stay consistent, developer-ready, and scalable across devices (web, mobile, dashboard).
Grid System
| Screen Type | Grid Columns | Gutter Width | Container Width | Notes |
| Desktop (≥1440px) | 12 | 24px | 1140px | Leave outer 150px margins for whitespace |
| Tablet (≥768px) | 8 | 20px | 720px | Maintain 16–20px padding on edges |
| Mobile (≤375px) | 4 | 16px | Fluid (100%) | Avoid >2 columns; stack content |
Spacing Rules
| Element Type | Spacing Standard | Notes |
| Page Margin | 80px top/bottom | For desktop; reduce to 40px mobile |
| Section Gap | 64px between sections | Align with vertical rhythm |
| Component Gap | 24px between components | Use multiples of 8px grid |
| Inside Cards/Blocks | 16px padding | Mobile: min 12px |
| Button Padding | 12px vertical, 24px horizontal | Maintain accessible tap sizes |
| Form Field Spacing | 16px between fields | Inline errors reduce to 8px |
Breakpoint & Responsiveness
- Breakpoints: Desktop ≥1440px, Laptop ≥1024px, Tablet ≥768px, Mobile ≤375px.
- Always design desktop + mobile first wireframes, then adjust tablet.
- Content must reflow, not shrink → e.g., 3 cards (desktop) → 2 (tablet) → 1 (mobile).
Alignment Principles
- Align to grid columns, not arbitrary pixels.
- Use 8px base unit for all spacing increments.
- Center-align CTA zones when possible; left-align text blocks for readability.
- Never mix different alignment patterns in same screen.
Usage Notes
- Apply this framework in all wireframe drafts (Doc 3.1).
- Designers should annotate deviations (if any).
- Devs must implement CSS grids consistent with this model.
- QA team validates with Spacing & Layout QA Checklist (EPIC 6).