| license | Apache-2.0 |
| name | retrofuturism-web-design |
| description | Web design inspired by retrofuturism — the future as imagined by the past. Covers Atomic Age/Googie, Raygun Gothic, Cassette Futurism (Alien terminals), Y2K chrome/iridescent, Solarpunk eco-optimism, and Fallout/BioShock Art Deco. Each sub-genre with palettes, fonts, CSS, and layout patterns. Activate on 'retrofuturism', 'retro-futuristic', 'cassette futurism', 'Y2K aesthetic', 'Googie', 'Raygun Gothic', 'solarpunk', 'Pip-Boy', 'FUI', 'fantasy UI', 'sci-fi terminal', 'atompunk', 'space age', 'retro sci-fi'. NOT for vaporwave/glassmorphism (use vaporwave-glassomorphic-ui-designer), Windows retro (use windows-95-web-designer), general retro web (use web-design-expert). |
| allowed-tools | Read,Write,Edit,Glob,Grep,WebSearch,WebFetch |
| metadata | {"category":"Design & UX","tags":["retrofuturism","cassette-futurism","Y2K","googie","raygun-gothic","solarpunk","atompunk","FUI","retro-sci-fi","web-design"],"pairs-with":[{"skill":"web-design-expert","reason":"Broader design strategy to anchor a retrofuturist aesthetic within"},{"skill":"windows-95-web-designer","reason":"Shared retro computing vocabulary, can blend cassette futurism with Win95"},{"skill":"typography-expert","reason":"Each sub-genre demands very specific typeface choices"},{"skill":"vibe-matcher","reason":"Route ambiguous \"retro\" requests to the correct sub-genre"}]} |
| category | Design & Creative |
| tags | ["retrofuturism","web-design","retro","futuristic","aesthetic"] |
Retrofuturism Web Design
Creates web experiences channeling the future as imagined by the past — nostalgia for futures that never were. Translates six distinct retrofuturist sub-genres into production CSS, layouts, and interaction patterns.
Decision Points
1. Sub-Genre Selection by Era Cues
Brief mentions → Route to
├─ "1950s space age" → Atomic Age/Googie
├─ "Art Deco rockets" → Raygun Gothic
├─ "terminal screens" → Cassette Futurism
├─ "chrome bubble" → Y2K Futurism
├─ "green tech optimism" → Solarpunk
└─ "Pip-Boy/Fallout" → Fallout Deco
2. Layout Strategy by Sub-Genre
If Cassette Futurism:
├─ Mobile: Stack terminals vertically, 16px spacing
├─ Tablet: 2-column grid, left=nav, right=content
└─ Desktop: 3-column grid with sidebar terminals
If Y2K/Atomic Age:
├─ Mobile: Bubble cards, centered stack
├─ Tablet: Masonry grid with asymmetric shapes
└─ Desktop: Flexbox with boomerang/bubble overlays
If Raygun Gothic/Solarpunk:
├─ Mobile: Full-width panels, vertical rhythm
├─ Tablet/Desktop: CSS Grid, 12-column with golden ratio
└─ Emphasis on vertical lines and organic curves
3. Breakpoint Rules by Visual Density
If scan lines/CRT effects:
├─ Mobile: Disable scan lines (performance)
├─ Tablet: Light scan lines (2px spacing)
└─ Desktop: Full CRT effect (1px spacing)
If chrome/metallic gradients:
├─ Mobile: Flat colors only
├─ Tablet: Simple 2-stop gradients
└─ Desktop: Complex multi-stop chrome effects
4. Animation Intensity Ladder
User Experience Level:
├─ First visit: Full boot sequence (3s max)
├─ Return visit: Skip to steady state
├─ `prefers-reduced-motion`: Static only
└─ Mobile/slow connection: Reduce all animations 50%
Failure Modes
Saturation Overload
Symptom: Every element glows, blinks, or shimmers simultaneously
Detection: More than 3 animated elements visible at once
Fix: Tone down intensity 20%, limit animations to hero + 1 accent element
Serif-Sans Clash
Symptom: Art Deco serif (Raygun Gothic) mixed with tech mono (Cassette)
Detection: Two different sub-genre fonts in same viewport
Fix: Pick ONE sub-genre or create explicit transition boundaries
Chrome Excess
Symptom: Gradients everywhere cause visual fatigue and performance lag
Detection: >5 complex gradients on single page, FPS drops below 30
Fix: Limit chrome to accent elements only, use flat colors for backgrounds
Accessibility Abandonment
Symptom: Amber CRT text at 12px, no focus indicators
Body text contrast <4.5:1, scan lines interfere with reading
Increase font size, make overlays subtle, add high-contrast mode toggle
