Design System · Index 07 · VINTAGE

Retro Design System

Four eras of visual culture distilled into one system. From 50s Americana to 90s pixel, every decade earns its place.

ERA A

50s / 60s · Americana

ERA C

70s · Groovy

ERA D

80s · Neon Synthwave

ERA E

90s · Pixel Win95

01 · Palette

Colors

ERA D — Neon 80s · Core Palette

--color-bg#0A0A1AMonitor Night

--color-bg-surface#0F0F2EDeep Night

--color-bg-panel#13133AIndigo Panel

--color-grid#1A1A5CGrid Blue

--color-chrome#C0C0D8Chrome

--color-neon-pink#FF2D78Neon Pink

--color-neon-cyan#00F0FFCyan Electric

--color-neon-purple#BF00FFNeon Purple

--color-neon-yellow#FFE600Neon Yellow

--color-neon-green#00FF41Phosphor

--color-sunset-orange#FF6B1ASunset Orange

--color-sunset-pink#FF2A6DSunset Pink

--color-sunset-purple#8B00FFSunset Purple

--color-text-primary#E8E8FFText Primary

--color-text-secondary#9898CCText Secondary

Sunset Gradient

Color Variants — ERA A · ERA C · ERA E

ERA A — Americana 50s/60s

#C8342A

#F5F0DC

#2AB8C4

#1A1A1A

#FFFFFF

ERA C — Groovy 70s

#D4621A

#7A8C2A

#5C3A1E

#C8A820

#F0E8D0

#A0522D

#1A7A7A

ERA E — Pixel 90s

#C0C0C0

#000080

#800000

#008080

#808080

#FFFFFF

#000000

02 · Type

Typography

Type Scale — ERA D

--type-4xl / 96pxOrbitron 900

2084

--type-3xl / 64pxOrbitron 900

HERO DISPLAY

--type-2xl / 48pxOrbitron 700

MAIN HEADLINE

--type-xl / 32pxOrbitron 700

PAGE TITLE

--type-lg / 24pxOrbitron 400

SECTION TITLE

--type-md / 18pxExo 2 500

Subtitle — Interface Label

--type-base / 15pxExo 2 400

Body text for interface components and descriptions.

--type-sm / 12pxShare Tech Mono

SYS_LABEL_v2.4 · DATA · 1984-08-12 · 0xFF

Type by Era

ERA D
Neon 80s

SYNTHWAVE

Orbitron 900 · Geometric Futuristic

ERA A
50s/60s

AMERICANA

Barlow Condensed 900 · Bold Industrial

ERA C
Groovy 70s

Groovy Vibes

Playfair Display 700 · Editorial Serif

ERA E
Pixel 90s

PIXEL SYS

Press Start 2P · 8-bit Bitmap

03 · Actions

Buttons

Primary

Secondary

Ghost Neon

Arcade

Chrome 3D

Pixel / ERA E

04 · Containers

Cards

ERA D

Signal Boost

Interface panel for real-time data monitoring. Hover to intensify.

Arcade

84,720

HIGH SCORE · PLAYER 1

Cassette

Side A — Mix Vol. 3

C-90 · CHROME · 90 MIN

05 · Status

Badges & Stickers

Filled Badges — ERA D

SYNTHWAVE OUTRUN WARNING ARCADE

Outlined Badges — ERA D

LIVE ONLINE

System Badges — ERA E

New Error Read-Only

Stickers

★ RETRO ★ HOT

06 · Feedback

Alerts

System Info

ERA D signal acquired. All systems nominal.

✓

Upload Complete

Data stream synchronized. 100% integrity.

Low Signal

Phosphor decay detected. Recalibrate CRT.

System Error

VHS signal corrupted. Glitch imminent.

07 · Forms

Inputs

Input — ERA D

Input — Terminal

Input — ERA E / Win95

Checkbox & Toggle

Enable scanlines Read Only

Neon Mode

08 · Loading

Loading & Progress

Phosphor Loader — ERA D

Progress Bar — ERA E / Win95

Copying files...

65%

Countdown — Universal

T-MINUS · SYSTEM LAUNCH

Atomic Spinner — ERA A

09 · Navigation

Navigation

Navbar — ERA D · Neon 80s

Menubar — ERA E · Win95

10 · Surfaces

Patterns

outrun-grid

sunset

stars

checker-80s

diag-stripes

scanlines-crt

halftone-60s

wallpaper-90s

grid-70s

neon-gradient

11 · FX

Effects

Text Glow — Pink

NEON SIGN

Text Glow — Cyan

ELECTRIC

Text Glow — Purple

ULTRAVIOLET

Chrome Metallic Text

CHROME

Border Glow — Cyan

INTERFACE PANEL

Border Glow — Pink

ALERT ZONE

Phosphor Terminal

> SYS READY_█

CRT Scanlines Overlay

SCANLINE CRT

12 · Space

Spacing & Radius

Spacing Scale

--space-14px

--space-28px

--space-316px

--space-424px

--space-532px

--space-648px

--space-764px

--space-896px

--space-9128px

Border Radius

none

0px

2px

base

4px

8px

16px

pill

999px

13 · Windows

Win95 Window

Retro Design System

−

□

File

Edit

View

Help

Ready

ERA E · Win95

14 · Tokens

Design Tokens

Token	Value	Usage
--color-bg	#0A0A1A	Primary background
--color-bg-surface	#0F0F2E	Card / panel surface
--color-bg-panel	#13133A	Deeper panel variant
--color-neon-pink	#FF2D78	Primary accent (glow)
--color-neon-cyan	#00F0FF	Secondary accent (glow)
--color-neon-purple	#BF00FF	Tertiary accent (glow)
--color-neon-yellow	#FFE600	Warning / highlight
--color-neon-green	#00FF41	Terminal / success
--color-text-primary	#E8E8FF	Primary text
--color-text-secondary	#9898CC	Muted text
--space-1	4px	Tight spacing
--space-2	8px	Component internal
--space-3	16px	Standard gap
--space-4	24px	Section gap
--space-5	32px	Large gap
--radius-base	2px	Default radius
--radius-none	0px	ERA D / arcade default