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

# Design System: Claude — Layout Principles

## Spacing System

- Base unit: 8px
- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
- Card internal padding: approximately 24–32px
- Section vertical spacing: generous (estimated 80–120px between major sections)

## Grid & Container

- Max container width: approximately 1200px, centered
- Hero: centered with editorial layout
- Feature sections: single-column or 2–3 column card grids
- Model comparison: clean 3-column grid
- Full-width dark sections breaking the container for emphasis

## Whitespace Philosophy

- **Editorial pacing**: Generous top/bottom margins create natural reading pauses between sections
- **Serif-driven rhythm**: Serif headings demand more whitespace than sans-serif designs
- **Content island approach**: Sections alternate light/dark environments, creating distinct visual rooms

## Border Radius Scale

| Name | Value | Usage |
|------|-------|-------|
| Sharp | 4px | Minimal inline elements |
| Subtly rounded | 6–7.5px | Small buttons, secondary interactive elements |
| Comfortably rounded | 8–8.5px | Standard buttons, cards, containers |
| Generously rounded | 12px | Primary buttons, input fields, nav elements |
| Very rounded | 16px | Featured containers, video players, tab lists |
| Highly rounded | 24px | Tag-like elements, highlighted containers |
| Maximum rounded | 32px | Hero containers, embedded media, large cards |

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |
| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |
| Large Mobile | 640–767px | Slightly wider content area |
| Tablet | 768–991px | 2-column grids begin, condensed nav |
| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |

### Touch Targets

- Buttons: 8–16px vertical padding minimum (44×44px overall minimum)
- Navigation links: spaced for thumb navigation
- Card surfaces: large touch targets

### Collapsing Strategy

- **Navigation**: Full horizontal nav collapses to hamburger on mobile
- **Feature sections**: Multi-column → stacked single column
- **Hero text**: 64px → 36px → ~25px progressive scaling
- **Model cards**: 3-column → stacked vertical
- **Section padding**: Reduces proportionally but maintains editorial rhythm
- **Illustrations**: Scale proportionally, maintain aspect ratios

### Image Behavior

- Product screenshots scale proportionally within rounded containers
- Illustrations maintain quality at all sizes
- Video embeds maintain 16:9 aspect ratio with rounded corners
- No art direction changes between breakpoints
