DESIGN.md@.agents/tools/design/library/styles/editorial-clean git:20260404.2e83279A

Immutable. This exact content is served forever at /api/v1/blob/82251e47871b9fec.

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

# Design System: Editorial Clean

A reading-first editorial design system. Warm off-white backgrounds, near-black ink, serif/sans-serif pairing, 680px content column. Calm, focused, literary.

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Mood, palette overview, key characteristics |
| 2 | [02-colour-palette.md](02-colour-palette.md) | Core, text, accent, semantic colour tables |
| 3 | [03-typography.md](03-typography.md) | Font families, hierarchy table, principles |
| 4 | [04-components.md](04-components.md) | Buttons, inputs, links, cards, nav, pull quotes, code blocks |
| 5 | [05-layout.md](05-layout.md) | Spacing scale, content widths, grid, whitespace, border-radius |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Shadow levels, elevation principles |
| 7 | [07-dos-and-donts.md](07-dos-and-donts.md) | 8 do's and 8 don'ts |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, mobile rules |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | CSS variable reference, 3 ready-to-use prompts |

## Quick Reference

**Colours:** Background `#FAF8F5` · Body text `#2d2d2d` · Headings `#1a1a1a` · Link `#4a6fa5` · Border `#E8E4DF`

**Typography:** Headings → Playfair Display (serif) · Body → Source Sans 3 (sans-serif) · Code → JetBrains Mono

**Layout:** Content column 680px · Body 18px/1.7 · Paragraph spacing 1.5em

<!--
Style archetype by AI DevOps (https://aidevops.sh)
DESIGN.md format: https://stitch.withgoogle.com/docs/design-md/overview
Not based on any specific brand. Use as a starting point for your project.
-->