Grid System & Layout
Grid Foundation
DYFIA uses an 8px base grid system for consistent spacing and alignment across all digital interfaces.
Spacing Scale
| Name | Value | Usage |
|---|---|---|
| XXS | 4px | Tight spacing, icon padding |
| XS | 8px | Minimal spacing, inline elements |
| S | 16px | Standard spacing, form fields |
| M | 24px | Section spacing, card padding |
| L | 32px | Large spacing, component separation |
| XL | 48px | Major section breaks |
| XXL | 64px | Page-level spacing |
Spacing Examples
4px (XXS) - Tight spacing
8px (XS) - Minimal spacing
16px (S) - Standard spacing
24px (M) - Section spacing
32px (L) - Large spacing
Column Grid
Desktop (1200px+): 12-column grid with 24px gutters
Tablet (768px - 1199px): 8-column grid with 16px gutters
Mobile (< 768px): 4-column grid with 16px gutters
Container Widths
| Breakpoint | Container Width | Margins |
|---|---|---|
| Mobile (< 768px) | 100% | 16px |
| Tablet (768px - 1199px) | 720px | 24px |
| Desktop (1200px+) | 1140px | 32px |
| Large Desktop (1400px+) | 1320px | 40px |
Layout Principles
- Consistency: Use the 8px grid for all spacing decisions
- Alignment: Align elements to the grid for visual harmony
- Hierarchy: Use spacing to create clear visual hierarchy
- Breathing Room: Don't overcrowd - white space is valuable
- Responsive: Adjust spacing proportionally across breakpoints