Spacing & Layout

"White space is not empty. It's the silence between notes that makes music."

Spacing System — 8px Grid

Every margin, padding, and gap must use a value from this scale. No arbitrary numbers.

Token	Value	Common Usage
--space-1	4px	Badge inner padding, tight icon gaps
--space-2	8px	Inline gaps, small element spacing
--space-3	12px	Between related items (label + input)
--space-4	16px	Card inner padding (compact), grid gaps
--space-6	24px	Card inner padding (standard), section inner padding
--space-8	32px	Between components within a section
--space-12	48px	Section vertical padding
--space-16	64px	Major section breaks, hero padding
--space-24	96px	Page-level separation (hero → first section)

Rules

1. No arbitrary spacing. If you need 23px, use 24px (--space-6). If you need 40px, use either 32px or 48px.
2. Vertical rhythm matters more than horizontal. Consistent vertical spacing creates calm. Inconsistent spacing creates anxiety.
3. More space, not less. When in doubt, add space. The Japanese garden has more empty ground than planted ground.
4. Section padding on homepage: --space-12 (48px) — tighter than other pages to keep scroll length reasonable.
5. Section padding on tool/reading pages: --space-16 (64px) — more breathing room for focused content.

---

Layout Widths

Token	Value	Usage
--max-reading	720px	Blog posts, study guides — optimal line length (~65-75 characters)
--max-content	1080px	General content areas, tool interfaces
--max-page	1320px	Outer page container
--sidebar-width	250px	Left navigation sidebar (reading pages)

Page Layout Patterns

Pattern 1: Full Width (Homepage, Free Tools Directory)

┌──────────────────────────────────────────────────────────┐
│  Nav (full width, --bg-surface, bottom border)           │
├──────────────────────────────────────────────────────────┤
│                                                          │
│   ┌──────────────── max-page: 1200px ────────────────┐   │
│   │  Hero                                            │   │
│   │  Section 1                                       │   │
│   │  Section 2                                       │   │
│   │  ...                                             │   │
│   └──────────────────────────────────────────────────┘   │
│                                                          │
├──────────────────────────────────────────────────────────┤
│  Footer                                                  │
└──────────────────────────────────────────────────────────┘

Pattern 2: Sidebar + Content (Blog, Study Guides)

┌──────────────────────────────────────────────────────────┐
│  Nav                                                     │
├────────────┬─────────────────────────────────────────────┤
│            │                                             │
│  Sidebar   │   Content (max-reading: 720px)              │
│  250px     │   Centered in remaining space               │
│  sticky    │                                             │
│  --bg-     │   h1, paragraphs, code blocks,              │
│  elevated  │   images — all within 720px                 │
│            │                                             │
├────────────┴─────────────────────────────────────────────┤
│  Footer                                                  │
└──────────────────────────────────────────────────────────┘

Pattern 3: Tool Page (All Tools — Identical Layout)

┌──────────────────────────────────────────────────────────┐
│  Nav                                                     │
├──────────────────────────────────────────────────────────┤
│                                                          │
│   ┌──────────────── max-content: 1080px ─────────────┐   │
│   │  Tool Title (h1) + Description                   │   │
│   │  ─────────────────────────────────                │   │
│   │  [Tab 1] [Tab 2] [Tab 3]  (if applicable)        │   │
│   │                                                   │   │
│   │  Tool Interface                                   │   │
│   │  (the actual functional content)                  │   │
│   │                                                   │   │
│   │  FAQ (if applicable)                              │   │
│   └──────────────────────────────────────────────────┘   │
│                                                          │
├──────────────────────────────────────────────────────────┤
│  Footer                                                  │
└──────────────────────────────────────────────────────────┘

---

Border Radius

Token	Value	Usage
--radius-sm	6px	Buttons, badges, tags, inputs
--radius-md	10px	Cards, dropdowns, panels
--radius-lg	16px	Modals, dialogs, large containers
--radius-full	9999px	Pills, toggles, avatars

Rules

1. No arbitrary radii. No 12px, no 14px, no 18px, no 20px. Pick from the scale.
2. Smaller elements get smaller radii. Buttons → --radius-sm. Cards → --radius-md.
3. Consistency within context. All cards on a page use the same radius. No mixing.

---

CSS Implementation

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout widths */
  --max-reading: 720px;
  --max-content: 1080px;
  --max-page: 1320px;
  --sidebar-width: 250px;

  /* Border radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}