ARCADE CRT DESIGN SYSTEM  •  PHOSPHOR GREEN  •  RGB CHROMATIC ABERRATION  •  SCANLINE OVERLAYS  •  NEON GLOW  •  INSERT COIN  •  PIXEL BLASTER  •  NEON DRIFT  •  CYBER QUEST  •  GRID FIGHTER  •  ARCADE CRT DESIGN SYSTEM  •  HIGH SCORE  •  80S-90S NOSTALGIA  • 
ARCADE CRT
CRT-9000
DocsStyleKit
CREDIT: 00

>> INSERT COIN TO START

ARCADE

CRT

80-90s arcade CRT monitor nostalgia. Scanline overlays, neon phosphor glow, RGB chromatic aberration, monospace pixel fonts, near-black backgrounds.

HI-SCORE

1,280,000

SCORE

999,999

STAGE

08

LIVES

03

INSERT COIN

// Game Select

SHOOT EM UP

PIXEL BLASTER

Twin-stick shooter with neon bullet patterns. Dodge, weave, and blast your way to the top of the leaderboard.

Hi-Score:999,999

Stats

DIFFICULTY88
SPEED95
POWER72

// High Score Board

RNKNAMESCORE
01
ACE
1,280,000
02
ZRO
999,999
03
CYB
750,300
04
NEO
512,400
05
RYU
488,100
06
KAI
401,700
07
NXS
355,200
08
XOR
298,800
Today's Records
Live

// Components

Buttons

active:translate-y-[6px] — physical button press

Terminal Input
Score Cards
PIXEL BLASTER
999,999 pts
NEON DRIFT
512,400 pts
GRID FIGHTER
750,300 pts
System Alerts
[OK]CRT display online — phosphor warm-up complete
[WRN]Coin mechanism check — low credits
[ERR]Player 2 controller disconnected
[INF]Audio subsystem initialized — ready

// CRT Effects

Scanline Overlay

repeating-linear-gradient(0deg) at 4px intervals over every surface

bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(57,255,20,0.05)_2px,rgba(57,255,20,0.05)_4px)]

RGB Aberration

text-shadow offset on headlines: -2px magenta / +2px cyan

textShadow: '-2px 0 #ff00ff, 2px 0 #00ffff'

Neon Glow

box-shadow / text-shadow with spread to simulate phosphor emission

shadow-[0_0_15px_rgba(57,255,20,0.4)]

CRT Vignette

radial-gradient dark edges to replicate CRT screen curvature darkening

bg-[radial-gradient(ellipse_at_center,transparent_60%,rgba(0,0,0,0.7)_100%)]

Phosphor Flicker

neon-flicker keyframe animation — high-frequency opacity oscillation

animation: neon-flicker 3s ease-in-out infinite

Screen Curvature

border-radius with asymmetric % values to simulate CRT barrel distortion

rounded-[30%_30%_30%_30%/10%_10%_10%_10%]

Live CRT Preview

PHOSPHOR

Scanlines + RGB Aberration + Vignette + Curvature

// Color System

Neon Green

#39ff14 — PRIMARY

Usage
color: #39ff14

// Typography & Effects

RGB Chromatic Aberration

HEADING L

Heading M

Heading S

text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff

Neon Glow Text

NEON GREEN

MAGENTA

CYAN

YELLOW

Terminal / Blinking Cursor

> BOOT SEQUENCE INITIATED...

> LOADING ASSETS [====----] 42%

> PLAYER DATA FOUND

> CONNECTING TO ARCADE NET

animation: crtBlink 1.06s step-end infinite

Type Scale — font-mono only

DISPLAY

HEADING

BODY TEXT — MONOSPACE ONLY

Caption / label text

MICRO LABEL — TRACKING 0.2EM

// Design Rules

Must Follow

  • +Scanline overlay on ALL content areas
  • +Neon glow (text-shadow / box-shadow) on key elements
  • +font-mono for every text element — no exceptions
  • +Near-black background (#050505 or #0a0a0a)
  • +RGB chromatic aberration on ALL headings
  • +High-saturation neon colors only
  • +uppercase + tracking-[0.2em] on all labels

Forbidden

  • xLight or white backgrounds — ever
  • xPastel or muted colors — neon only
  • xSerif or sans-serif fonts — font-mono only
  • xRounded corners larger than 4px
  • xSoft standard shadows — neon glow only
  • xNon-neon gradients or muted color schemes
  • xDecorative elements without glow effect

ARCADE CRT

StyleKit Design System

DocumentationAll Styles

CREDITS: 00 // INSERT COIN

CRT-9000 // System Online