Retro-Futurism
复古未来主义
Aliases:复古未来主义复古未来风太空时代风原子时代设计七八十年代科幻风落日灰壳那种怀旧科技AtompunkRaygun Gothic
What is it
The future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
Design spec
Typography
Mono chrome caps display
Color
Deep purple gradient to #7A1F63 with pink #FF71CE
Border
1px neon pink outlines
Shadow
Neon glow
Spacing
Horizon-grid composition
Motion
200–300ms neon warm-up and scanline drift; honour prefers-reduced-motion
States
Hover brightens the chrome and pink glow; focus shows a visible pink ring; active lowers brightness; disabled loses glow and saturation; error uses magenta neon
Style in action
See the full page, then try the interactive sceneFull-page preview
DRIVE INTO
THE SUNSET
Return to the future imagined in 1984.
Synths · Grid horizons · Chrome type
Play the radio →Pink, purple and orange
An endless road ahead
Reflective metallic headlines
Interactive scene
Loading demo…
✓ When to use
- Games, music and nostalgia-tech brand storytelling
- Futures that feel warm and optimistic instead of cold-cyber
- Concept pages where "yesterday's tomorrow" is the story
✕ When not to use
- Modern productivity tools — vintage casing metaphors hurt perceived efficiency
- Minimal premium brands where retro garnish dilutes the signal
- Accessibility-critical contexts — warm palettes often run low contrast
Variants
Atompunk
原子时代
50s–60s space race — orbit lines and rockets
Cassette Futurism
卡带未来
70s–80s CRTs on beige dashboard casings
Synth Sunset
合成器落日
Sunset stripes over grid horizons — adjacent to Y2K
Implementation
background: linear-gradient(#F5E6C8, #E8B87A)border-radius: 24pxbox-shadow: insetrepeating-linear-gradientfont-family: monospaceLock the palette to warm tones: cream #F2E4C2, apricot #E8965A, terracotta #8A4B2E with a dash of lake blue #3D7A99. Casing comes from big radii (20px+) plus a double inset shadow (lit top, dark bottom) faking plastic thickness; orbit lines are thin ellipse borders; grid horizons use repeating-linear-gradient. Mix wide geometric sans with mono screen type. Dark mode goes CRT — warm black with phosphor amber or cyan type.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a retro-futurist casing card and button section in the current project. Inspect the existing design tokens first; scope the warm retro palette independently. Requirements: - Locked cream-orange-brown warm palette, no cold greys - Big radii + double inset shadow for plastic casing; buttons with tangible press feel - Orbit lines and grid horizons capped at two or three accents - Dark mode as CRT warm black with phosphor amber screen type - Respect prefers-reduced-motion for any motion - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilar"High tech, low life" as a visual language: neon cyan and magenta edges cut through a near-black ground, monospace type and terminal glyphs run throughout, and scanlines plus glitch offsets suggest overloaded systems. Light is sliced out of darkness — the screen feels hijacked.
StylesSimilarAn atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
StylesSimilarA visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects