retro-futurism
Web and App implementation guide for Retro Futurism. Trigger when user wants vintage future concepts, 1950s space age aesthetics, or atompunk vibes.
Retro Futurism
"The future as imagined in the 1950s and 60s. Rockets, atoms, and sleek, aerodynamic chrome."
When to Use
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.
Core Principles
- Aerodynamic Shapes: Lots of sweeping curves, teardrop shapes, and swooping lines. Nothing is a perfect square.
- Space-Age Motifs: Stars, atoms, orbits, and fins (like a 1950s Cadillac).
- Mid-Century Colors mixed with Chrome: Classic 50s pastels paired with shiny, reflective metals.
Visual DNA
- Colors: Turquoise (
#40E0D0), Atomic Tangerine (#FF9966), Mint Green (#98FF98), paired with Silver/Chrome and deep Space Black. - Typography: Googie architecture fonts, bold cursive scripts, or clean mid-century geometric sans-serifs (like
Futura). - Styling: Sleek bezels, dramatic drop shadows, and offset overlapping shapes.
Web Implementation
- CSS Example:
body {
background-color: #FDF5E6; /* Old paper / cream */
color: #2F4F4F;
font-family: 'Futura', 'Trebuchet MS', sans-serif;
overflow-x: hidden;
}
/* Googie-style sweeping background element */
.retro-future-swoop {
position: absolute;
top: 0; right: -10%;
width: 120%; height: 300px;
background-color: #40E0D0; /* Turquoise */
border-radSubscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | self |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-06-17 |
Related skills
3d-ui
Web and App implementation guide for 3D UI. Trigger when user wants actual 3D objects, perspective effects, and spatial depth.
ai-native-ui
Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics.
aurora-ui
Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.
bento-ui
Web and App implementation guide for Bento UI. Trigger when user wants modular grid cards, Apple-like dashboard style, or sections arranged like a bento box.
brutalism
Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished look, and rejection of standard design conventions.
brutalist-typography
Web and App implementation guide for Brutalist Typography. Trigger when user wants huge fonts, raw presentation, and aggressive layout decisions.
