# Retro-Futurism

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

- Nickname: Chrome sunset
- Also called: Outrun, Synthwave UI, 80s Sci-Fi, Retrowave
- Category: Retro & Nostalgia
- Moods: Nostalgic, Bold, Techy, Dreamy
- Industries: Gaming, Media & Entertainment, Creative & Portfolio, Startup & Tech, Web3 & Crypto
- Style page: https://uilingo.dev/styles/retro-futurism/

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

## Audit
Passed after 1 round · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Retro-Futurism" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark

## The style in one line
The future as the 80s imagined it: chrome lettering, a striped sunset over a neon grid, and glowing outline panels on a midnight sky.
Design keywords: chrome text, sunset horizon grid, striped retro sun, neon outline glow, midnight indigo sky, space-age wide caps, sunset gradient buttons, synthwave.

## Visual language
An 80s sci-fi poster turned into UI: a midnight-indigo sky with pin-prick stars fades through violet into a hot-magenta horizon, where a yellow-to-pink sun sliced by horizontal slats sits on a cyan wireframe grid running to infinity. Headlines are wide, space-age capitals filled with a chrome gradient that has a hard horizon line through the middle. Content sits on near-opaque dark panels outlined in thin cyan neon that softly glows, and actions are sunset-gradient capsules. The mood is optimistic and cinematic, not dystopian.

## Signature details (must be visible)
- Page sky: linear-gradient(180deg, #05021A, #120842 45%, #2E0C62 68%, #E0457F 87.6%, #FFB35C 88%, #1B0838 88.2%, #0B0626) with two layers of 1px star dots (radial-gradient tiled at 97×89px and 151×127px)
- Striped sun: circle filled linear-gradient(#FFF07A, #FFC23D 32%, #FF7A3D 58%, #FF2E88) with a mask-image of 4–5 transparent horizontal slats that get thicker toward the bottom, sitting exactly on the horizon
- Grid floor: 2px rgba(45,226,230,.75) lines on a 64px square tile, transform: perspective(240px) rotateX(62deg) from the top edge, masked to fade out near the horizon; optional 1.6s background-position scroll under prefers-reduced-motion: no-preference
- Chrome display type: background linear-gradient(180deg, #FFF, #CDEFFF 20%, #7DB6FF 44%, #4A3FB5 53.5%, #1D0C45 54%, #6B2FA8 60%, #E46AC0 78%, #FFE3F4) sized 100% × 1lh and clipped to text, plus drop-shadow(0 0 14px rgba(255,46,136,.45))
- Neon panels: rgba(24,13,64,.9) fill, 1px rgba(45,226,230,.55) border, box-shadow 0 0 22px rgba(45,226,230,.22) plus a deep 0 14px 40px drop
- Sunset capsule buttons: radius 999px, linear-gradient(180deg, #FFE45E, #FF9A3D 45%, #FF4F6E 75%, #FF2E88), dark #14062B uppercase label, outer glow 0 0 22px rgba(255,46,136,.55)
- Neon rule: 2px linear-gradient(90deg, #FF2E88, #A66CFF, #2DE2E6) under the nav, above the footer and at the top of alternate sections
- Type: Syncopate 700 uppercase for display/h1/h2, Exo 2 for body, Share Tech Mono for eyebrows, badges, table headers and KPI numbers; Thai in K2D

## Design tokens — use these exact values
Colours (dark mode):
  - background #0B0626
  - surface rgba(24,13,64,0.9)
  - surface-2 #140A3A
  - text #F4F0FF
  - text-muted #B8ACE6
  - primary #FF6A3D (text on it #14062B)
  - secondary #2DE2E6 (text on it #0B0626)
  - accent #FFD319
  - border rgba(45,226,230,0.55)
  - success #3DF5A6 · warning #FFD319 · danger #FF3D7F
  - chart series #2DE2E6, #FF2E88, #FFD319, #A66CFF, #FF6A3D
Radius: sm 6px, md 12px, lg 16px, xl 24px, pill 999px
Border width: 1px
Shadows: sm `0 0 0 1px rgba(45,226,230,0.25), 0 0 12px rgba(45,226,230,0.18)`, 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)`, 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)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1.05 density
Motion: 220ms cubic-bezier(.2,.9,.25,1)

## Typography (Latin + Thai)
- Headings: Syncopate 700 with Thai fallback K2D 700/800
- Body: Exo 2 400/500/600/700 with Thai fallback K2D 400/500/600
- Mono: Share Tech Mono
- Google Fonts URL: 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
- CSS stacks: heading `"Syncopate", "K2D", system-ui, sans-serif`; body `"Exo 2", "K2D", system-ui, sans-serif`; mono `"Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to K2D — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.1rem, 5vw, 4.1rem), heading weight 700, heading tracking 0.02em (Latin only), uppercase small labels (Latin only).
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: 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.

## Components
- Primary button: sunset gradient capsule with inset 0 1px 0 rgba(255,255,255,.7) top highlight; hover brightness(1.08) and glow grows to 34px; never flat-coloured
- Secondary button: transparent dark fill, 1px cyan #2DE2E6 border and cyan text, inner + outer cyan glow; hover fills rgba(45,226,230,.14)
- Cards: dark neon panel, 16px radius; hover lifts 4px and the border turns magenta with a pink glow; icon tiles are round, dark, with a cyan (or magenta / yellow, rotating) neon ring
- Inputs: rgba(9,4,32,.85) fill, 1px violet rgba(166,108,255,.55) border, 12px radius; focus switches the border to cyan with 0 0 18px cyan glow
- Eyebrow / badge: pill with 1px cyan border, Share Tech Mono uppercase, 0.22em tracking, cyan text-shadow glow
- Nav: translucent midnight bar with blur and the magenta→violet→cyan neon rule along the bottom; logo is a small glowing sun disc
- Charts: lines glow with drop-shadow in their own colour; bars use the sunset gradient (yellow → orange → magenta); heatmap ramps from navy to hot pink; table headers in cyan mono
- Switch / checkbox: off = dark with violet outline; on = magenta→orange gradient track or cyan fill with glow
- Mobile tab bar: floating dark capsule with cyan neon outline; the active icon is cyan with a drop-shadow glow

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: split style. Sections in order: hero → logos → features → showcase → stats → testimonials → pricing → cta. Feature section as grid.
Open with an immersive, centred hero that is a full outrun scene: chrome headline in the upper sky, lead and buttons above the sun, and the striped sun + perspective grid filling the bottom ~40% of the hero. Further sections sit on the starry night sky with a low, dimmed horizon fixed at the bottom of the viewport; alternate sections get a darker band topped with the neon rule. Features are a grid of neon-outlined panels, the CTA and art blocks repeat a miniature sun-and-grid scene. Long text (article, form) lives inside a large dark panel so nothing is read over the grid. Dashboards use a slim icon rail with a sunset-gradient active pill, mono KPI numbers with cyan glow and glowing chart lines.

## Content
Use realistic product copy (fictional brand) suited to: Game launches, esports and arcade events. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## 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
- Chamfered clip-path corners, glitch offsets or acid yellow on pure black — that reads as Cyberpunk
- Pastel skies, Windows-95 bevel windows or classical statues — that is Vaporwave
- Chrome gradients or glow on body text, labels or anything under ~20px
- Running the grid or sun behind paragraphs; text always sits on sky or on a panel
- Light mode, flat solid buttons or more than two glow colours on one component
- Thin monochrome wireframes with tick marks and data readouts — that is HUD / FUI

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Retro-Futurism" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```