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

# Design System: Resend — Layout Principles

## Spacing System

- Base unit: 8px
- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px

## Grid & Container

- Centered content with generous max-width
- Full-width black sections with contained inner content
- Single-column hero, expanding to feature grids below
- Code preview panels as full-width or contained showcases

## Whitespace Philosophy

- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.
- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated "islands" of content.
- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.

## Border Radius Scale

| Value | Use |
|-------|-----|
| 4px | Buttons (ghost), inputs, small interactive elements |
| 6px | Menu panels, navigation items |
| 8px | Tabs, content blocks |
| 10px | Accent elements |
| 12px | Clipboard buttons, medium containers |
| 16px | Feature cards, images, main buttons |
| 24px | Large panels, section containers |
| 9999px | Primary CTAs, tags, badges (pill) |
