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

# Agency Techie — Layout Principles

## Spacing Scale (4px base unit)

| Token | Value | Usage |
|-------|-------|-------|
| space-1 | 4px | Tight gaps, inline icon padding |
| space-2 | 8px | Input padding, compact list gaps |
| space-3 | 12px | Small component padding, label margins |
| space-4 | 16px | Default component padding, card gaps |
| space-5 | 20px | Section gaps within cards |
| space-6 | 24px | Card padding, form group spacing |
| space-8 | 32px | Section spacing |
| space-10 | 40px | Large section spacing |
| space-12 | 48px | Page section dividers |
| space-16 | 64px | Major page sections |

## Grid

- 12-column grid
- Gutter: 16px (mobile), 24px (tablet), 32px (desktop)
- Max container: 1280px, centered

## Breakpoints

| Name | Width | Columns | Gutter |
|------|-------|---------|--------|
| Mobile | 0–639px | 4 | 16px |
| Tablet | 640–1023px | 8 | 24px |
| Desktop | 1024–1279px | 12 | 32px |
| Wide | 1280px+ | 12 | 32px |

## Whitespace Philosophy

Space is structural, not decorative. Use the minimum spacing that maintains clear visual grouping. Dense is good — overwhelming is not. When in doubt, go one step tighter.

## Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| radius-sm | 2px | Badges, small tags |
| radius-md | 4px | Buttons, inputs, default |
| radius-lg | 6px | Cards, containers |
| radius-full | 9999px | Pills, avatars |
