Retro-Futurism

Also called: Outrun, Synthwave UI, 80s Sci-Fi, Retrowave

The future as the 80s imagined it: chrome lettering, a striped sunset over a neon grid, and glowing outline panels on a midnight sky.

“Chrome sunset”Retro & NostalgiaEra: 1980s sci-fi → 2010s synthwave revivalNostalgicBoldTechyDreamy

Open full screen ↗

retro-futurism / landingEN

retro-futurism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md12pxRadius lg16pxRadius xl24pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

chrome textsunset horizon gridstriped retro sunneon outline glowmidnight indigo skyspace-age wide capssunset gradient buttonssynthwave

Retro-Futurism borrows the optimism of 80s sci-fi posters, arcade cabinets and album covers. A midnight-indigo sky fades into a magenta horizon with a striped sun, and a cyan perspective grid runs to infinity. Headlines are wide space-age caps filled with a chrome gradient (sky above, metal below, a hard horizon line through the middle). Panels are dark with thin neon outlines that glow; buttons are sunset-gradient capsules. It is cinematic and heroic rather than gritty.

Best for

Game launches, esports and arcade events
Music, synthwave and nightlife promos
Hackathons and tech conference microsites
Retro product drops and limited editions

Avoid for

Banking, insurance and healthcare
Long-form reading and documentation
Data-dense enterprise tools
Light-mode or print-first brands

✓ Do

Run the cyan grid only below a horizon line, never behind body text
Use the chrome gradient on display type only — one hero line per view
Keep panels near-opaque (≥ 85%) so neon outlines stay crisp and text readable
Pair one warm sunset gradient (orange → magenta) with one cool neon (cyan)

✕ Don't

Don’t use chamfered corners or glitch effects — that is cyberpunk
Don’t put chrome or glow on small text
Don’t add a light mode; the night sky is the canvas
Don’t use more than two glow colours per component

Not to be confused with

Vaporwave →Vaporwave is pastel, ironic and lo-fi (Windows-95 windows, statues, wide-spaced type); Retro-Futurism is a dark, heroic night sky with chrome lettering and neon outlines.Cyberpunk UI →Cyberpunk is dystopian: acid yellow on black, chamfered clip-path corners and glitch; Retro-Futurism is optimistic, with a sunset gradient, rounded capsules and chrome.HUD / Sci-Fi FUI →HUD/FUI is thin monochrome cyan wireframes and data readouts; Retro-Futurism is warm and colourful with a sun, grid floor and chrome type.

On mobile

Keep the night sky and a low horizon grid behind the screen, but drop glow blur to one layer (≤ 12px) for performance. The floating tab bar becomes a neon capsule; the featured card carries the sunset gradient and the chrome title.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSyncopate · 700

The quick brown fox

Heading · ThaiK2D · 700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinExo 2 · 400/500/600/700

Clear words make shared decisions.

Body · ThaiK2D · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D is a loopless geometric Thai with a techno, squared-round stroke — it sits next to Syncopate’s wide space-age caps and Exo 2’s engineered curves without looking handwritten.

Colour palette

Design tokens

Radius	`sm 6px · md 12px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 0 0 1px rgba(45,226,230,0.3), 0 0 22px rgba(45,226,230,0.22), 0 14px 40px rgba(5,0,20,0.6)`
Display	`clamp(2.1rem, 5vw, 4.1rem)`
Motion	`220ms cubic-bezier(.2,.9,.25,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Retro-Futurism (retro-futurism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=Exo+2:wght@400;500;600;700&family=Share+Tech+Mono:wght@400&family=K2D:wght@400;500;600;700;800&display=swap
 */
:root {
  --radius: 16px;
  --background: #0B0626;
  --foreground: #F4F0FF;
  --card: rgba(24,13,64,0.9);
  --card-foreground: #F4F0FF;
  --popover: rgba(24,13,64,0.9);
  --popover-foreground: #F4F0FF;
  --primary: #FF6A3D;
  --primary-foreground: #14062B;
  --secondary: #2DE2E6;
  --secondary-foreground: #0B0626;
  --muted: #140A3A;
  --muted-foreground: #B8ACE6;
  --accent: #140A3A;
  --accent-foreground: #F4F0FF;
  --destructive: #FF3D7F;
  --border: rgba(45,226,230,0.55);
  --input: rgba(45,226,230,0.55);
  --ring: #FF6A3D;
  --chart-1: #2DE2E6;
  --chart-2: #FF2E88;
  --chart-3: #FFD319;
  --chart-4: #A66CFF;
  --chart-5: #FF6A3D;
  --sidebar: rgba(24,13,64,0.9);
  --sidebar-foreground: #F4F0FF;
  --sidebar-primary: #FF6A3D;
  --sidebar-primary-foreground: #14062B;
  --sidebar-accent: #140A3A;
  --sidebar-accent-foreground: #F4F0FF;
  --sidebar-border: rgba(45,226,230,0.55);
  --sidebar-ring: #FF6A3D;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Retro-Futurism (retro-futurism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=Exo+2:wght@400;500;600;700&family=Share+Tech+Mono:wght@400&family=K2D:wght@400;500;600;700;800&display=swap
 */
@theme {
  --color-bg: #0B0626;
  --color-surface: rgba(24,13,64,0.9);
  --color-surface-2: #140A3A;
  --color-text: #F4F0FF;
  --color-text-muted: #B8ACE6;
  --color-primary: #FF6A3D;
  --color-on-primary: #14062B;
  --color-secondary: #2DE2E6;
  --color-on-secondary: #0B0626;
  --color-accent: #FFD319;
  --color-border: rgba(45,226,230,0.55);
  --color-success: #3DF5A6;
  --color-warning: #FFD319;
  --color-danger: #FF3D7F;
  --color-chart-1: #2DE2E6;
  --color-chart-2: #FF2E88;
  --color-chart-3: #FFD319;
  --color-chart-4: #A66CFF;
  --color-chart-5: #FF6A3D;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 0 1px rgba(45,226,230,0.25), 0 0 12px rgba(45,226,230,0.18);
  --shadow-md: 0 0 0 1px rgba(45,226,230,0.3), 0 0 22px rgba(45,226,230,0.22), 0 14px 40px rgba(5,0,20,0.6);
  --shadow-lg: 0 0 0 1px rgba(255,46,136,0.4), 0 0 40px rgba(255,46,136,0.3), 0 24px 70px rgba(5,0,20,0.7);
  --font-heading: "Syncopate", "K2D", system-ui, sans-serif;
  --font-body: "Exo 2", "K2D", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Retro-Futurism (retro-futurism). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=Exo+2:wght@400;500;600;700&family=Share+Tech+Mono:wght@400&family=K2D:wght@400;500;600;700;800&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0235,
            0.149
          ],
          "hex": "#0b0626"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.051,
            0.251
          ],
          "hex": "#180d40",
          "alpha": 0.9
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0392,
            0.2275
          ],
          "hex": "#140a3a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9412,
            1
          ],
          "hex": "#f4f0ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.6745,
            0.902
          ],
          "hex": "#b8ace6"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2392
          ],
          "hex": "#ff6a3d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0235,
            0.1686
          ],
          "hex": "#14062b"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.8863,
            0.902
          ],
          "hex": "#2de2e6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0235,
            0.149
          ],
          "hex": "#0b0626"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8275,
            0.098
          ],
          "hex": "#ffd319"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.8863,
            0.902
          ],
          "hex": "#2de2e6",
          "alpha": 0.55
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.9608,
            0.651
          ],
          "hex": "#3df5a6"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8275,
            0.098
          ],
          "hex": "#ffd319"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.2392,
            0.498
          ],
          "hex": "#ff3d7f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.8863,
            0.902
          ],
          "hex": "#2de2e6"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1804,
            0.5333
          ],
          "hex": "#ff2e88"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8275,
            0.098
          ],
          "hex": "#ffd319"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.4235,
            1
          ],
          "hex": "#a66cff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.2392
          ],
          "hex": "#ff6a3d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1765,
              0.8863,
              0.902
            ],
            "hex": "#2de2e6",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1765,
              0.8863,
              0.902
            ],
            "hex": "#2de2e6",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 12,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1765,
              0.8863,
              0.902
            ],
            "hex": "#2de2e6",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1765,
              0.8863,
              0.902
            ],
            "hex": "#2de2e6",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 22,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0196,
              0,
              0.0784
            ],
            "hex": "#050014",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.1804,
              0.5333
            ],
            "hex": "#ff2e88",
            "alpha": 0.4
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.1804,
              0.5333
            ],
            "hex": "#ff2e88",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0196,
              0,
              0.0784
            ],
            "hex": "#050014",
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Syncopate",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Exo 2",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Share Tech Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "K2D",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.9,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!