Complete AI TrainingYourJobSkills for your job

Skills / design-it

retro-futurism

Web and App implementation guide for Retro Futurism. Trigger when user wants vintage future concepts, 1950s space age aesthetics, or atompunk vibes.

Design & UX

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

  1. Aerodynamic Shapes: Lots of sweeping curves, teardrop shapes, and swooping lines. Nothing is a perfect square.
  2. Space-Age Motifs: Stars, atoms, orbits, and fins (like a 1950s Cadillac).
  3. 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-rad

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

Sourceself
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-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.