Retrofuturism (Atompunk / Googie)

---
name: retrofuturism-googie
description: Apply the Retrofuturism (Atompunk / Googie) visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Retrofuturism (Atompunk / Googie), mentions atompunk, googie, raygun gothic, or describes atomic starburst motifs, boomerang and kidney shapes, orbit-ring line art — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Retrofuturism (Atompunk / Googie) Design System

The optimistic mid-century vision of tomorrow: atomic starbursts, boomerang curves, orbit rings, and rocket motifs in cream, atomic red, teal, and mustard. It's the aesthetic of 1950s diner signage and space-program brochures — the future as imagined before anyone had seen it.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Retrofuturism (Atompunk / Googie).
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (atompunk, googie, raygun gothic, space-age modern, populuxe), or describes its traits: atomic starburst motifs; boomerang and kidney shapes; orbit-ring line art; cream with atomic red, teal, and mustard; rounded geometric type; upswept angular panels.

## Design tokens

### Color palette

- Warm cream page background: `#f0e9d6` (--color-bg)
- Card and panel surfaces, lighter cream: `#faf6ea` (--color-surface)
- Charcoal primary text: `#2e2b26` (--color-text)
- Secondary warm gray text: `#5a544a` (--color-text-muted)
- Atomic red — hero shapes, starbursts, CTAs: `#d63c2f` (--color-accent)
- Teal for secondary shapes and links (darken for small text): `#2a9d8f` (--color-accent-teal)
- Mustard for highlights and badges: `#e9b949` (--color-accent-mustard)
- Charcoal fills for contrast panels and footer: `#33302a` (--color-charcoal)

### Typography

- Display / headings: Righteous (fallback: Futura, Century Gothic, sans-serif) (ideal: Futura Display, premium — use Righteous as the free substitute)
- Body: Poppins (fallback: Futura, Century Gothic, sans-serif) (ideal: Futura, premium — use Poppins as the free substitute)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.3, letter-spacing 0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Open and confident — motifs need clear air around them; sections alternate cream and charcoal like exhibition panels.
- Border radius: sm 8px, lg 24px, pill 999px, kidney 60% 40% 55% 45% / 50% 60% 40% 50% — Pills and asymmetric organic radii (kidney/boomerang blobs) carry the style; pure rectangles are rare.
- Border treatment: 2px solid #2e2b26 — Confident 2px charcoal outlines on illustrative elements; cards may go borderless with soft shadow instead.

### Shadows

- soft: `0 4px 12px rgba(46,43,38,0.14)` — Cards and raised panels
- soft-lg: `0 10px 28px rgba(46,43,38,0.18)` — Modals and hero imagery
- offset-print: `3px 3px 0 rgba(214,60,47,0.9)` — Occasional misregistered-print accent on headings or badges

### Layout

- Max content width: 1200px
- Asymmetric compositions — headline offset left, starburst counterweight right
- Angled section dividers suggesting upswept Googie rooflines
- Orbit-ring ellipses looping around photos or stats
- Alternate cream and charcoal sections for rhythm

### Effects

- Atomic starburst SVG ornaments
- Boomerang and kidney-shaped color blobs behind content
- Dotted orbit paths with small satellite circles
- Slight paper-grain texture at 2–3% opacity

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 150ms / 280ms / 500ms
- Satellites animate slowly along orbit paths (disable under prefers-reduced-motion)
- Starbursts scale-pop gently on scroll entry
- Hovers are soft lifts — this is optimism, not aggression

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f0e9d6;
  --color-surface: #faf6ea;
  --color-text: #2e2b26;
  --color-text-muted: #5a544a;
  --color-accent: #d63c2f;
  --color-accent-teal: #2a9d8f;
  --color-accent-mustard: #e9b949;
  --color-charcoal: #33302a;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-kidney: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --shadow-soft: 0 4px 12px rgba(46,43,38,0.14);
  --shadow-soft-lg: 0 10px 28px rgba(46,43,38,0.18);
  --shadow-offset-print: 3px 3px 0 rgba(214,60,47,0.9);
  --border-default: 2px solid #2e2b26;
  --font-display: Righteous, Futura, "Century Gothic", sans-serif;
  --font-body: Poppins, Futura, "Century Gothic", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Righteous:wght@400&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, logo with a small starburst mark, pill-shaped links; active pill fills teal with cream text
- **Hero:** Rounded-geometric headline offset to one side, atomic red starburst cluster, boomerang blob behind product art, pill CTA in atomic red with cream text
- **Card:** Cream surface, 24px radius or kidney blob variant, soft shadow, mustard badge chip in the corner
- **Button (primary):** Atomic red pill, cream text, soft shadow; deepens red and lifts on hover
- **Button (secondary):** 2px charcoal outline pill, charcoal text, transparent fill; fills mustard on hover
- **Form fields:** Surface fill, 2px charcoal border, 8px radius; focus swaps border to teal with a soft teal halo

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

An atomic starburst — a cluster of radiating lines tipped with small circles — punctuating the hero next to a rounded-geometric headline, with an orbit-ring ellipse looping around one key element. Spend boldness here; keep everything else quiet.

## Do

- Use starbursts, boomerangs, and orbit rings as functional punctuation, not random decoration
- Keep the palette to cream, red, teal, mustard, charcoal — period-faithful and finite
- Set headlines in rounded geometric faces with generous 1.3 line-height
- Angle a few section edges to echo upswept Googie architecture

## Don't

- No neon glows or dark synth gradients — this future is daylit and hopeful
- Don't mix in pixel art or glitch; the era predates the microchip
- Avoid photographic realism; illustration and flat shape lead
- Don't over-cluster motifs — one starburst per viewport is plenty

## Accessibility notes

- Atomic red on cream is about 3.8:1 and teal on cream about 3:1 — both fail 4.5:1 for body text; use them for large display type, shapes, and fills with cream/charcoal text, and keep links and small text in charcoal
- Orbit animations must pause under prefers-reduced-motion
- Mustard (#e9b949) must never carry white text — pair it with charcoal

## Reference sites

- Googie architecture: https://en.wikipedia.org/wiki/Googie_architecture
- Fallout series (atompunk UI): https://fallout.bethesda.net
- Raygun Gothic: https://en.wikipedia.org/wiki/Raygun_Gothic

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip retrofuturism-googie.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/retrofuturism-googie.json

Settings → Capabilities → Skills → Upload skill → retrofuturism-googie.zip