Retro

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

[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.