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

# Agency Feminine — 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 | Content gaps within cards |
| space-6 | 32px | Card padding, form group spacing |
| space-8 | 48px | Section gaps |
| space-10 | 64px | Inter-section spacing |
| space-12 | 80px | Major section breaks |
| space-16 | 120px | Hero section padding |

## Grid

- 12-column grid
- Gutter: 16px (mobile), 24px (tablet), 32px (desktop)
- Max container: 1200px — narrower than typical for a more intimate, editorial feel
- Centre-weighted layouts preferred — content clusters toward the middle

## Breakpoints

| Name | Width | Columns | Gutter |
|------|-------|---------|--------|
| Mobile | 0–767px | 4 | 16px |
| Tablet | 768–1023px | 8 | 24px |
| Desktop | 1024–1199px | 12 | 32px |
| Wide | 1200px+ | 12 | 32px |

## Whitespace Philosophy

Space is elegance. Generous margins, ample padding, and open sections give content room to be appreciated. The design should feel like a beautifully typeset magazine — content is curated, not crammed. When in doubt, add more space.

## Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| radius-sm | 8px | Small badges, tags, inputs |
| radius-md | 12px | Buttons (non-pill), inputs, tooltips |
| radius-lg | 16px | Cards, containers |
| radius-xl | 24px | Feature sections, image frames |
| radius-pill | 999px | CTA buttons, search bars |
