Generate retro-styled UI components and design systems

Retro Design is a design-style child skill ('a warm, analog feeling - nostalgia through muted tones, grain, and classic typography'), part of the design-it family and not meant to be triggered directly. Three core principles: Warm Analog Color Palettes (colors that look faded by the sun or printed on aged paper), Texture and Noise (a slight grain overlay simulating film or old print media), and Classic Typography Pairings (heavy, groovy display fonts paired with typewriter or classic serif body copy).

Use it when the user's request matches this warm, nostalgic, analog-media aesthetic - vintage-branded products, throwback marketing campaigns, or anything wanting to evoke old print or film media rather than crisp digital cleanliness. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA uses Monochromatic Brown or warm faded tones - mustard yellow, burnt orange, sage green, off-white - paired with display fonts like Cooper Black, Garamond, or Courier, and styling accents like badges, stamps, wavy borders, and halftone patterns. The web implementation layers a noise-texture background image with background-blend-mode: multiply over an aged-paper base color to fake film grain, sets bold display headlines with a solid, non-blurred colored text-shadow offset (mustard yellow behind burnt orange text, mimicking a slightly misregistered vintage print), gives cards a chunky vintage offset shadow in a brown tone rather than a soft blur, and renders a circular "badge" element rotated a few degrees off-axis to look like a hand-applied sticker or stamp.

.retro-header {
  color: #D35400;
  text-shadow: 2px 2px 0px #F1C40F;
}
.retro-badge {
  border-radius: 50%;
  transform: rotate(-10deg);
}

SwiftUI reproduces the same paper-and-ink color pairing, layers an optional film-grain image with .blendMode(.multiply) at reduced opacity over the background, and applies the identical solid offset shadow technique to display text (.shadow(color:, radius: 0, x: 2, y: 2) with zero blur radius, matching the web's hard-edged vintage print-shadow look) using the Cooper Black display font and Georgia serif body copy - the small imperfections (grain, hard-edged misregistered shadow, tilted sticker) are what sell the analog illusion, more than any single big color decision.

Designers and developers building vintage-branded products, throwback marketing campaigns, or nostalgic content pages that want to evoke old print or film media through warm, faded color and analog texture rather than crisp modern digital polish.