Design 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

Quasarlane Diner is a fictional space-age diner page, written for this library to show the Retro futuriststyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Retro futurist recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# Retro futurist — style recipe

## 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 — passes AA

## Type
- Headings: Orbitron, weights 700 and 900 — Wide and geometric; uppercase, generous tracking
- Body: Exo 2, weights 400 and 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

Design in the "Retro futurist" style.
The idea: The future as people imagined it decades ago: deep space blues, neon glows, wide geometric type and scan lines.
It suits: Games, events and night-life.
It suits: Music and entertainment launches.
It suits: Playful tech products with a sense of nostalgia.
Do not choose it when: The brand must feel calm or traditional.
Do not choose it when: Readability of long text is the top priority.
Follow this rule: A deep space-blue background.
Follow this rule: Wide geometric display type, often uppercase.
Follow this rule: Neon pink and cyan glows on edges and text.
Follow this rule: Horizon grids, stars and scan-line textures.
Follow this rule: Chrome-like gradients only on small details.
Follow this rule: Rounded rectangles like old screens.
Use #0b0b2b (Deep space) as the background colour.
Use #16164a (Night console) as the surface colour.
Use #e8f0ff (Starlight) as the text colour.
Use #a9b4d6 (Moon dust) as the muted colour.
Use #ff4fd8 (Neon pink) as the accent colour.
Use #33e1ff (Laser cyan) as the accent-2 colour.
Use #2d2d7a (Grid line) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 16.72:1.
Use Orbitron in weights 700 and 900 for headings: Wide and geometric; uppercase, generous tracking.
Use Exo 2 in weights 400 and 600 for body text: Techy but readable.
Use only these type sizes: 14px, 16px, 20px, 28px, 44px, 72px.
Type: A wide display face with a readable techno sans.
Space things on a 8px base with the steps 8px, 16px, 24px, 48px, 80px.
Spacing: Panels like screens, spaced evenly.
Use corner radii of 8px, 16px.
Borders: 1–2 px neon lines with a soft glow.
Shadows: Coloured glows instead of dark shadows.
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.
Do: Use the perspective horizon grid once.
Do: Keep body text plain for reading.
Avoid: warm earthy colours.
Avoid: thin serif type.
Avoid: glow on every element.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #0b0b2b;
  --color-surface: #16164a;
  --color-text: #e8f0ff;
  --color-muted: #a9b4d6;
  --color-accent: #ff4fd8;
  --color-accent-2: #33e1ff;
  --color-border: #2d2d7a;
  --font-heading: "Orbitron", sans-serif;
  --font-body: "Exo 2", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 80px;
  --radius-1: 8px;
  --radius-2: 16px;
}

Download brief (.md)Download tokens (.css)

The recipe

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 — passes AA

Type

Headings: Orbitron, weights 700 and 900 — Wide and geometric; uppercase, generous tracking
Body: Exo 2, weights 400 and 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

Similar styles

Styles that share the most of Retro futurist's mood, density, era and warmth.

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 · 700, 900

The quick brown fox jumps over the lazy dog

Wide and geometric; uppercase, generous tracking

Body · Exo 2 · 400, 600

The quick brown fox jumps over the lazy dog

Techy but readable

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

A wide display face with a readable techno sans.

Spacing and shape

Spacing on a 8px base

8px
16px
24px
48px
80px

Panels like screens, spaced evenly.

Corners, borders and shadows

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

Compare with…

See Retro futurist side by side with another style, and what differs.

Retro futurist

See it live

Late-night burgers in low orbit

The menu

Burgers

Shakes

Sides

Launch nights

Find us at Dock 9

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Similar styles

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't

Compare with…