# DESIGN TASTE — MODERN RETRO

> Vibe: The warmth of the '70s with the discipline of now. Sun-faded, not neon.
> Best for: hospitality, lifestyle, food, wellness, community brands — anything that should feel human first.

## How to install

Save this file at the root of your project as `DESIGN-TASTE.md`, then tell your agent:

> Read DESIGN-TASTE.md. Every visual decision in this project — fonts, colours, spacing, motion — follows it. If my request conflicts with the file, follow the file and tell me about the conflict.

---

## Core principle

Nostalgia with restraint. Every retro signal — the cream, the arches, the chunky serif — is paired with modern spacing and hierarchy. Warm, never kitsch. If it reads as a costume, remove one element.

## Typography

- **Display:** Fraunces, 700–900 (use the SOFT/WONK axes if available — the slight wobble IS the personality). Chunky, warm, characterful serif.
- **Body:** Karla or Work Sans, 400–600, 16–18px, line-height 1.6. Friendly grotesque, invisible next to the display.
- Sentence case for display — retro is conversational. ALL-CAPS shouting belongs to brutalism, not here.
- Big size jumps: display at 2.5–3x body. Tight leading on display (1.0–1.1), relaxed on body.
- Two families maximum. Script lettering only as a graphic element inside a badge or sticker — never as a working font.

## Colour

- Base cream `#FAF3E7`. Ink espresso `#3B2A1E` (browns are structural — borders, text — not accents).
- Sun-faded primaries: burnt orange `#C75B39`, mustard `#E3A72F`, olive `#7A8450`, deep teal `#2F6D62`.
- Muted saturation throughout — imagine everything printed in 1974 and left in the sun. No neon, no pure #fff/#000.
- One warm accent per section. Cream + espresso carry the structure.
- WCAG AA: espresso on cream passes easily; mustard is for shapes and large text only.

## Shape & surface

- Arches (top-rounded rectangles), pill shapes, and one consistent corner radius (16px) — pick one softness and commit. Never mix sharp and soft randomly.
- 2–3px solid espresso borders on cards and buttons. Sticker badges rotated 2–4°, sparingly.
- Stripes, checkerboard, or grain as background texture at ≤10% opacity, one per section max.
- Shadows: soft and warm if used at all (espresso at 10–15% opacity) — never hard black offsets.

## Layout & spacing

- 8px grid, content max-width 1200px, section padding 80–96px desktop. Modern spacing is what keeps the retro honest.
- Generous margins around display type. Let the cream breathe.
- Left-align body; centred is fine for short display moments and badges — retro earns a little centre-stage.

## Motion

- Slow and warm: 0.4–0.6s, ease-out curves. Gentle float or tilt on badges.
- Scroll reveals fade + rise softly. Nothing snaps, nothing machines.
- Respect prefers-reduced-motion.

## Never

- Neon or saturated digital colour. Pure white or pure black.
- Glassmorphism. Hard brutalist shadows. Sharp 0-radius corners next to soft ones.
- All-caps display type. More than one texture per section.
- Cold blues and grays as primaries — this palette is warm or nothing.