curiositech 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:
- Era cue "Alien terminals" → Cassette Futurism
- Dashboard = data-heavy → Grid layout essential
- Mobile users need scan lines disabled → Performance rules
- 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:
- "iMac aesthetic" → Y2K Futurism
- E-commerce = conversion focus → Bubble buttons essential
- Brand colors clash with pure chrome → Adaptation needed
- 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-motionmedia 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