Website Design Explorer

Style

Retro futurist

The future as people imagined it decades ago: deep space blues, neon glows, wide geometric type and scan lines.

  • bold
  • technical
  • playful
  • balanced
  • retro
  • cool

See it live

Example: space-age diner page for Quasarlane Diner, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

Retro futurist — style recipe: the same text the brief copies.

The idea

  • The future as people imagined it decades ago: deep space blues, neon glows, wide geometric type and scan lines.

Use it when

  • Games, events and night-life
  • Music and entertainment launches
  • Playful tech products with a sense of nostalgia

Avoid it when

  • The brand must feel calm or traditional
  • Readability of long text is the top priority

Principles

  • A deep space-blue background
  • Wide geometric display type, often uppercase
  • Neon pink and cyan glows on edges and text
  • Horizon grids, stars and scan-line textures
  • Chrome-like gradients only on small details
  • Rounded rectangles like old screens

Colour

  • Deep space (background): #0b0b2b
  • Night console (surface): #16164a
  • Starlight (text): #e8f0ff
  • Moon dust (muted): #a9b4d6
  • Neon pink (accent): #ff4fd8
  • Laser cyan (accent-2): #33e1ff
  • Grid line (border): #2d2d7a
  • Text on background contrast: 16.72:1

Type

  • Headings: Orbitron, weights 700, 900 — Wide and geometric; uppercase, generous tracking
  • Body: Exo 2, weights 400, 600 — Techy but readable
  • Scale: 14px, 16px, 20px, 28px, 44px, 72px
  • A wide display face with a readable techno sans.

Spacing and shape

  • Base unit: 8px
  • Spacing steps: 8px, 16px, 24px, 48px, 80px
  • Panels like screens, spaced evenly.
  • Corner radii: 8px, 16px
  • Borders: 1–2 px neon lines with a soft glow
  • Shadows: Coloured glows instead of dark shadows

Imagery and motion

  • Imagery: Perspective grids, planets, stars and simple geometric spacecraft drawn in CSS or SVG.
  • Motion: Flickers, slow glows and gentle drifting stars.

Do

  • Glow the important edges
  • Use the perspective horizon grid once
  • Keep body text plain for reading

Don't

  • No warm earthy colours
  • No thin serif type
  • No glow on every element

Palette

  • Deep spacebackground#0b0b2b
  • Night consolesurface#16164a
  • Starlighttext#e8f0ff
  • Moon dustmuted#a9b4d6
  • Neon pinkaccent#ff4fd8
  • Laser cyanaccent-2#33e1ff
  • Grid lineborder#2d2d7a

Text on background: 16.72:1 — passes AA

Type

Headings Orbitron, weights 700, 900

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Wide and geometric; uppercase, generous tracking

Body Exo 2, weights 400, 600

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Techy but readable

Scale A wide display face with a readable techno sans.
  • 72pxThe quick brown fox jumps over the lazy dog
  • 44pxThe quick brown fox jumps over the lazy dog
  • 28pxThe quick brown fox jumps over the lazy dog
  • 20pxThe quick brown fox jumps over the lazy dog
  • 16pxThe quick brown fox jumps over the lazy dog
  • 14pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 8px
  • 16px
  • 24px
  • 48px
  • 80px

Panels like screens, spaced evenly.

Corner radii
  • 8px
  • 16px
Borders
1–2 px neon lines with a soft glow
Shadows
Coloured glows instead of dark shadows

Do and don't

Do

  • Glow the important edges
  • Use the perspective horizon grid once
  • Keep body text plain for reading

Don't

  • No warm earthy colours
  • No thin serif type
  • No glow on every element

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.