<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Agency Creative — Layout Principles

## Spacing Scale (8px base unit)

| Token | Value | Usage |
|-------|-------|-------|
| space-1 | 4px | Micro adjustments |
| space-2 | 8px | Inline gaps, icon spacing |
| space-3 | 12px | Tight component padding |
| space-4 | 16px | Default component gaps |
| space-5 | 24px | Card content padding |
| space-6 | 32px | Card padding, form spacing |
| space-8 | 48px | Section gaps |
| space-10 | 64px | Inter-section spacing |
| space-12 | 80px | Major section breaks |
| space-16 | 120px | Page section divisions, hero padding |
| space-20 | 160px | Hero vertical padding |

## Grid

- 12-column fluid grid
- Gutter: 16px (mobile), 24px (tablet), 40px (desktop)
- Max container: 1440px (content), full-bleed for hero sections
- Asymmetric layouts encouraged — 5/7, 4/8, or offset columns for visual interest

## Breakpoints

See `08-responsive.md` for breakpoint definitions and layout behaviour per viewport.

## Whitespace Philosophy

Whitespace is a design element. Use generous space around large type and hero content for drama. Contrast dense information areas with open breathing room to create page rhythm.

## Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| radius-none | 0px | Editorial image crops, geometric accents |
| radius-sm | 8px | Small badges, tags |
| radius-md | 12px | Inputs, small cards |
| radius-lg | 16px | Cards, containers, sections |
| radius-xl | 24px | Feature cards, testimonial blocks |
| radius-pill | 999px | Buttons, search bars, nav pills |
