curiositech/retrofuturism-web-design

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 Detection: Body text contrast <4.5:1, scan lines interfere with reading Fix: Increase font size, make overlays subtle, add high-contrast mode toggle

Era Confusion

Symptom: Mixing Y2K bubbles with Fallout steel panels randomly Detection: Visual elements from 3+ different decades in same section Fix: Define transition zones or stick to single sub-genre per page

Worked Examples

Example 1: Cassette Futurism Dashboard

Brief: "Make our DevOps dashboard look like the Alien computer terminals"

Decision Process:

1. Era cue "Alien terminals" → Cassette Futurism
2. Dashboard = data-heavy → Grid layout essential
3. Mobile users need scan lines disabled → Performance rules
4. Amber on black → Contrast check required

Layout Strategy:

• Mobile: Single column stack, 16px gaps
• Desktop: 3-column grid (sidebar, main, alerts)
• Terminal cards: 20px padding, CRT border radius
• Scan lines: CSS pseudo-element, pointer-events: none

Trade-offs Made:

• Sacrificed authentic 80s boxy proportions for mobile usability
• Used amber (#FFB000) instead of pure green for better contrast
• Limited boot animation to page load only, not every card update

Quality Gates Hit:

• ✅ WCAG AA contrast (amber on dark gray = 7.2:1)
• ✅ Focus indicators: 2px amber outline
• ✅ Responsive grid maintains terminal aesthetic
• ✅ Performance: <100ms frame times with scan lines

Example 2: Y2K E-commerce Landing

Brief: "Early 2000s iMac aesthetic for our bubble tea brand"

Decision Process:

1. "iMac aesthetic" → Y2K Futurism
2. E-commerce = conversion focus → Bubble buttons essential
3. Brand colors clash with pure chrome → Adaptation needed
4. Accessibility vs. glossy chrome → Compromise required

Implementation:

• Hero: Iridescent gradient background, toned to 60% opacity
• Product cards: Chrome effect on borders only, white backgrounds
• CTAs: Bubble buttons with brand pink, maintained chrome highlight
• Typography: Quicksand for readability over pure Y2K Impact

Novice vs Expert Catches:

• Novice missed: Chrome gradients everywhere slow mobile performance
• Expert caught: Limited chrome to accents, flat colors for backgrounds
• Novice missed: Pure iridescent text unreadable
• Expert caught: Used iridescent as background, dark text overlay

Quality Gates

• [ ] Single sub-genre chosen with clear era rationale documented
• [ ] Color palette tested for WCAG AA contrast (4.5:1 minimum on body text)
• [ ] Typography matches period (no Comic Sans on Raygun Gothic)
• [ ] Layout patterns reflect era constraints (boxy for CRT, organic for Solarpunk)
• [ ] Interactive elements have clear focus states with period-appropriate styling
• [ ] Animations respect prefers-reduced-motion media query
• [ ] Mobile performance acceptable (<100ms frame times with effects enabled)
• [ ] CSS custom properties defined for complete color system
• [ ] Decorative overlays (scan lines) use pointer-events: none
• [ ] Load performance under 3s on 3G (gradient-heavy styles optimized)

Not For

Route to other skills:

• Vaporwave/glassmorphism with blur effects → vaporwave-glassomorphic-ui-designer
• Windows 95/3.1 retro computing → windows-95-web-designer
• Modern clean sci-fi (no nostalgia) → dark-mode-design-expert
• Trust-critical interfaces (banking, healthcare) → web-design-expert
• General 80s/90s nostalgia without sci-fi → retro-web-designer

Context boundaries:

• Entertainment, portfolios, creative tools: ✅ Use this skill
• Government, finance, medical: ❌ Too playful, undermines trust
• E-commerce: ✅ Only if brand personality matches chosen era
• SaaS dashboards: ✅ Cassette Futurism works, others too distracting