> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Retro

Quotation, not costume — decade palettes, halftones, slab serifs

- Category: Styles
- Palette: #f2e3c6 #33261a #d4652f #587e5a
- Type pairing: Alfa Slab One · Karla
- Tags: vintage halftone slab warm nostalgia

## Philosophy

Retro is quotation, not costume. The strongest retro sites pick one decade and study its production constraints: offset-printed posters of the 60s, 70s sci-fi paperbacks, 80s broadcast graphics, 90s shareware UI. Constraints are what make it believable — limited ink palettes, coarse halftones, chunky slabs, pixel grids.

The mood is warm and tactile. Where minimalism removes, retro layers — but every layer references something real.

## Typography

- **70s print**: Alfa Slab One or Abril Fatface for headlines; Karla or Work Sans for body.
- **Mid-century modern**: Righteous or Bungee for signage feel; Quicksand softens the body.
- **90s software**: VT323 or Press Start 2P for accents only (never long text); body in a plain grotesque like Archivo.
- Script faces (Pacifico, Lobster) are dangerous — use for one word maximum, ideally a logo.

## Color

Decade palettes are well documented: 70s = harvest gold, burnt orange, avocado, cream; 80s = teal/magenta neon on deep purple; 90s = primary primaries on gray. Anchor with a warm cream base (`oklch(0.94 0.03 85)`) and let 2–3 saturated inks do the talking. Halftone dots and offset "misprint" shadows sell the print origin.

## Surfaces & backgrounds

- Halftone / dot patterns via `radial-gradient` repeats at low contrast.
- Paper grain plus slightly rotated stacked cards with hard offset borders.
- Sunburst arcs, rounded-corner TV frames, scanline overlays for the CRT register.
- Distress sparingly: one textured element per viewport is enough.

## Layout grammar

Circular badges and starburst stickers, ticket-stub dividers, thick outlined panels, centered poster compositions. Grids can be loose — retro tolerates playfulness that editorial forbids. Rounded corners are period-correct here (unlike brutalism).

## Motion

Bouncy but analog: slight rotations on hover, marquee tickers, wobble easing (`cubic-bezier(.34,1.56,.64,1)`) used once or twice. For the 90s register, instant state changes and dithered GIF-style loops beat smooth CSS animation.

## Reference theme

```css
[data-theme="sunbeam"] {
  color-scheme: light;
  --color-base-100: oklch(0.93 0.035 85);
  --color-base-200: oklch(0.88 0.05 75);
  --color-base-content: oklch(0.25 0.04 60);
  --color-primary: oklch(0.6 0.19 45);
  --color-primary-content: oklch(0.96 0.02 85);
  --color-secondary: oklch(0.55 0.11 130);
  --color-accent: oklch(0.7 0.15 300);
  --color-neutral: oklch(0.35 0.03 60);
  --color-neutral-content: oklch(0.93 0.035 85);
  --radius-box: 0.75rem;
  --radius-field: 0.5rem;
  --radius-selector: 0.5rem;
  --border: 2px;
  --depth: 1;
}
```

Headlines in `"Alfa Slab One"`, body in `"Karla"`.

## Pitfalls

- **Don't** mix decades in one composition — one quote, spoken fluently.
- **Don't** use low-res filters over small text; keep type crisp even when surfaces are distressed.
- **Don't** forget contrast testing: vintage palettes drift toward mud quickly.