Retro & nostalgia · 1950s – 1970s (origin); revival 2010s – present
Retro Futurism
A future imagined before it arrived: streamlined rockets, atomic-age graphics, space-age optimism, and a limited palette of chrome, cream, and bright orange.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(96% 0.022 82) - --fg
oklch(18% 0.03 240) - --muted
oklch(46% 0.04 220) - --surface
oklch(98.5% 0.014 86) - --surface-2
oklch(92% 0.03 82) - --border
oklch(80% 0.04 78) - --accent
oklch(64% 0.18 192) - --accent-fg
oklch(99% 0 0) - --focus
oklch(64% 0.18 192)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'Righteous', 'DM Sans', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 48px |
| --radius-sm | 24px |
| --shadow | 0 2px 8px oklch(18% 0.03 240 / 0.12), 0 1px 0 oklch(100% 0 0 / 0.65) inset |
| --shadow-lg | 0 16px 48px oklch(18% 0.03 240 / 0.18) |
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=DM+Sans:wght@400;500;600&display=swap');
:root {
--bg: oklch(96% 0.022 82);
--fg: oklch(18% 0.03 240);
--muted: oklch(46% 0.04 220);
--surface: oklch(98.5% 0.014 86);
--surface-2: oklch(92% 0.03 82);
--border: oklch(80% 0.04 78);
--accent: oklch(64% 0.18 192);
--accent-fg: oklch(99% 0 0);
--focus: oklch(64% 0.18 192);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'Righteous', 'DM Sans', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 48px;
--radius-sm: 24px;
--shadow: 0 2px 8px oklch(18% 0.03 240 / 0.12), 0 1px 0 oklch(100% 0 0 / 0.65) inset;
--shadow-lg: 0 16px 48px oklch(18% 0.03 240 / 0.18);
}Where it came from
Origin: Mid-century American industrial design and science-fiction illustration
Mid-century designers and illustrators imagined a gleaming future of flying cars and space colonies, rendered in clean vector-illustration style with bold geometric shapes and a warm limited palette. World’s fair posters, NASA mission patches, and TWA airline graphics defined this aesthetic. Contemporary designers revisit it for its craft quality and nostalgic optimism — imagining a future that still felt hopeful.
How to spot it
- Streamlined, geometric forms with rounded silhouettes
- Limited palette of cream, chrome, orange, and sky blue
- Space-age iconography — rockets, atoms, orbital arcs
- Bold geometric sans or display serif typography
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Warm and optimistic without being ironic | Period-specific palette can feel constraining |
| Strong handcrafted quality when executed well | Risk of looking like a theme-park exhibit if overdone |
| Pairs naturally with science and technology topics | Detailed illustration is resource-intensive |
In the wild
- NASA Apollo program mission patches
- 1964–65 New York World’s Fair pavilion graphics
- TWA Airlines mid-century branding
Use it when
Science, space, or technology products that want warmth and optimism rather than cold minimalism.