Vintage
Mission
Evoke the tactile warmth of aged print — as if every page was pulled from a 1920s letterpress shop, worn at the edges and rich with history.
Brand
🎨 Colors
#5C3A21 — Primary (warm brown)
#8B6914 — Secondary (aged gold)
#F5F0E8 — Background (cream paper)
#E8DCC8 — Surface (aged parchment)
#2C1810 — Text (deep ink brown)
#8B4513 — Accent (saddle brown)
🔤 Typography
- Heading font: Playfair Display (Google Fonts, elegant serif)
- Body font: Lora (Google Fonts, readable serif)
- Type scale: xs 0.75rem / sm 0.875rem / base 1.0625rem / lg 1.25rem / xl 1.563rem / 2xl 2.441rem / 3xl 3.052rem
📐 Spacing
- Grid: 6-column (narrower, like vintage publications)
- Section padding: 4rem vertical, 3rem horizontal
- Card gaps: 2.5rem (generous breathing room)
🧩 Components
- Buttons: Letterpress style — slight inner shadow, warm brown fill, cream text. Hover deepens the brown. Subtle 2px border-radius.
- Cards: Cream surface with a darker deckled-edge border effect (CSS box-shadow for depth), optional ornamental corner flourishes.
- Nav: Centered, spaced serif links with a thin gold ornamental divider below. Active state: italic + underline.
- Hero: Large serif headline over a cream background, decorative rule lines above and below, optional vintage illustration or photograph.
- Footer: Three-column with small serif headings, gold divider rule, copyright in italic.
♿ Accessibility
- Warm brown on cream passes 4.5:1 — verify with contrast checker
- Minimum body text size: 1rem (not 0.875rem)
- Focus rings: 2px solid saddle brown, clearly visible on cream
prefers-reduced-motion: remove any subtle hover transitions
✍️ Writing Tone
Warm, refined, unhurried. Full sentences over bullet points. Embrace slightly formal constructions. No slang, no tech jargon unless the subject demands it.
Do / Don't
✅ Do
- Use paper textures (subtle noise, grain, or fiber overlays) on backgrounds
- Add ornamental details: rule lines, fleurons, drop caps, section dividers
- Embrace generous margins — vintage layouts breathe
- Use sepia-toned photography with vignette effects
- Layer depth with subtle box-shadows that mimic letterpress impression
❌ Don't
- Use pure black or pure white — always warm-toned
- Add neon colors, gradients, or modern glow effects
- Use sans-serif fonts for body text
- Fill every inch of space — vintage design values restraint
- Mix in flat-design or material-design conventions
Quality Gates
1---2name: vintage3description: Aged paper, sepia tones, classic serifs, letterpress texture, antique warmth.4---5# Vintage6## Mission7Evoke the tactile warmth of aged print — as if every page was pulled from a 1920s letterpress shop, worn at the edges and rich with history.8## Brand9### 🎨 Colors10- `#5C3A21` — Primary (warm brown)11- `#8B6914` — Secondary (aged gold)12- `#F5F0E8` — Background (cream paper)13- `#E8DCC8` — Surface (aged parchment)14- `#2C1810` — Text (deep ink brown)15- `#8B4513` — Accent (saddle brown)16### 🔤 Typography17- Heading font: Playfair Display (Google Fonts, elegant serif)18- Body font: Lora (Google Fonts, readable serif)19- Type scale: xs 0.75rem / sm 0.875rem / base 1.0625rem / lg 1.25rem / xl 1.563rem / 2xl 2.441rem / 3xl 3.052rem20### 📐 Spacing21- Grid: 6-column (narrower, like vintage publications)22- Section padding: 4rem vertical, 3rem horizontal23- Card gaps: 2.5rem (generous breathing room)24### 🧩 Components25- Buttons: Letterpress style — slight inner shadow, warm brown fill, cream text. Hover deepens the brown. Subtle 2px border-radius.26- Cards: Cream surface with a darker deckled-edge border effect (CSS box-shadow for depth), optional ornamental corner flourishes.27- Nav: Centered, spaced serif links with a thin gold ornamental divider below. Active state: italic + underline.28- Hero: Large serif headline over a cream background, decorative rule lines above and below, optional vintage illustration or photograph.29- Footer: Three-column with small serif headings, gold divider rule, copyright in italic.30### ♿ Accessibility31- Warm brown on cream passes 4.5:1 — verify with contrast checker32- Minimum body text size: 1rem (not 0.875rem)33- Focus rings: 2px solid saddle brown, clearly visible on cream34- `prefers-reduced-motion`: remove any subtle hover transitions35### ✍️ Writing Tone36Warm, refined, unhurried. Full sentences over bullet points. Embrace slightly formal constructions. No slang, no tech jargon unless the subject demands it.37## Do / Don't38### ✅ Do391. Use paper textures (subtle noise, grain, or fiber overlays) on backgrounds402. Add ornamental details: rule lines, fleurons, drop caps, section dividers413. Embrace generous margins — vintage layouts breathe424. Use sepia-toned photography with vignette effects435. Layer depth with subtle box-shadows that mimic letterpress impression44### ❌ Don't451. Use pure black or pure white — always warm-toned462. Add neon colors, gradients, or modern glow effects473. Use sans-serif fonts for body text484. Fill every inch of space — vintage design values restraint495. Mix in flat-design or material-design conventions50## Quality Gates51- [ ] No pure black (#000) or pure white (#FFF) anywhere52- [ ] At least one ornamental element (rule, fleuron, drop cap) present53- [ ] Serif fonts used for all body text54- [ ] Paper texture or grain effect visible on backgrounds55- [ ] Color palette stays within warm brown/gold/cream spectrum56- [ ] Photography (if used) is sepia-toned or warm-filtered