Retro Design

Retro Design

"A warm, analog feeling. Nostalgia through muted tones, grain, and classic typography."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Warm, Analog Color Palettes: Colors look faded by the sun or printed on aged paper.
2. Texture and Noise: A slight grain overlay to simulate film or old print media.
3. Classic Typography Pairings: Heavy, groovy display fonts paired with typewriter or classic serif body copy.

Visual DNA

• Colors: Monochromatic Brown or warm, faded palettes (mustard yellow, burnt orange, sage green, off-white).
• Typography: Display fonts like Cooper Black, Garamond, or Courier.
• Styling: Badges, stamps, wavy borders, and halftone patterns.

Web Implementation

• Use CSS filters and background noise images to create texture.
• CSS Example:

body {
  background-color: #F4E8D1; /* Aged paper */
  color: #3E2723; /* Deep brown ink */
  font-family: 'Georgia', serif;
  
  /* Apply a subtle noise overlay using a pseudo-element or background image */
  background-image: url('noise-texture.png');
  background-blend-mode: multiply;
}

.retro-header {
  font-family: 'Cooper Black', serif;
  font-size: 4rem;
  color: #D35400; /* Burnt orange */
  text-shadow: 2px 2px 0px #F1C40F; /* Mustard yellow drop shadow */
  letter-spacing: -1px;
}