Player One Arcade Color Palette and Glow Utilities

Player One’s visual identity is built on a strict neon-on-black palette inspired by classic arcade cabinet displays. Six custom Tailwind color tokens define every surface, accent, and interaction state across the portfolio — from the near-black backgrounds to the phosphor-bright foreground colors. Layered on top are glow utilities, CRT simulation effects, and a glitch animation that push the aesthetic into authentic retro territory.

Color Tokens

All six colors are registered as custom Tailwind tokens in the arcade-* namespace, making them available as background, text, border, ring, and any other Tailwind color variant out of the box.

Token	Hex	RGB	Usage Role
`arcade-black`	`#0a0a0a`	`rgb(10, 10, 10)`	Page background
`arcade-dark`	`#111111`	`rgb(17, 17, 17)`	Surface / card background
`arcade-lime`	`#a3ff12`	`rgb(163, 255, 18)`	Primary accent, default text color
`arcade-cyan`	`#00ffff`	`rgb(0, 255, 255)`	Secondary accent
`arcade-magenta`	`#ff00aa`	`rgb(255, 0, 170)`	Highlight / active state
`arcade-orange`	`#ff6600`	`rgb(255, 102, 0)`	Warning / credits display

These colors are defined as custom Tailwind tokens, so they are available across every utility namespace — text-arcade-lime, bg-arcade-dark, border-arcade-cyan, ring-arcade-magenta, and so on — without any additional configuration.

Text Glow Utilities

Four .text-glow-* utility classes apply a layered text-shadow that simulates the phosphor bloom of a real CRT screen. Each class fires three shadow layers at 5 px, 10 px, and 20 px radii to build a soft-to-intense gradient bloom.

Class	Color
`.text-glow-lime`	`#a3ff12`
`.text-glow-magenta`	`#ff00aa`
`.text-glow-cyan`	`#00ffff`
`.text-glow-orange`	`#ff6600`

.text-glow-lime {
  text-shadow:
    0 0 5px  #a3ff12,
    0 0 10px #a3ff12,
    0 0 20px #a3ff12;
}

.text-glow-magenta {
  text-shadow:
    0 0 5px  #ff00aa,
    0 0 10px #ff00aa,
    0 0 20px #ff00aa;
}

.text-glow-cyan {
  text-shadow:
    0 0 5px  #00ffff,
    0 0 10px #00ffff,
    0 0 20px #00ffff;
}

.text-glow-orange {
  text-shadow:
    0 0 5px  #ff6600,
    0 0 10px #ff6600,
    0 0 20px #ff6600;
}

Combine a text glow with a color token and the font-pixel heading class for the classic arcade marquee look:

<h1 className="font-pixel text-arcade-lime text-glow-lime">
  HIGH SCORE
</h1>

<span className="font-pixel text-arcade-magenta text-glow-magenta">
  GAME OVER
</span>

Box Glow Utilities

Box glow classes apply both an outer box-shadow and an inset box-shadow to create a panel that appears backlit — useful for active nav items, selected cards, and interactive borders.

.box-glow-lime {
  box-shadow: 0 0 10px #a3ff12, inset 0 0 10px #a3ff12;
}

.box-glow-magenta {
  box-shadow: 0 0 10px #ff00aa, inset 0 0 10px #ff00aa;
}

Hover variants follow the Tailwind hover: prefix convention and are applied with group-hover or direct hover: utilities:

/* Lights up lime on mouse-over */
<div className="border border-arcade-lime hover:box-glow-lime transition-shadow duration-150">
  STAGE SELECT
</div>

/* Pulses magenta when active */
<button className="border border-arcade-magenta hover:box-glow-magenta transition-shadow duration-150">
  INSERT COIN
</button>

/* Cyan variant for secondary panels */
<div className="border border-arcade-cyan hover:box-glow-cyan transition-shadow duration-150">
  LEADERBOARD
</div>

CRT Effects

Two fixed-position overlay classes layer authentic cathode-ray-tube imperfections over the entire viewport. They are non-interactive (pointer-events: none) and sit above all page content.

`.crt-overlay`

Renders two visual layers plus a continuous flicker animation:

Scanlines — a repeating 4 px horizontal gradient that alternates transparent and a 25 % black strip, mimicking the physical gap between phosphor rows.
Color fringing — a repeating 6 px vertical gradient with faint red, green, and blue tints that simulate chromatic aberration from a shadow-mask display.
Flicker — a 0.15 s opacity keyframe loop that drops the whole overlay to 85 % opacity briefly, replicating the 60 Hz refresh flutter of older tubes.

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image:
    /* scanlines */
    linear-gradient(#12101000 50%, #00000040 50%),
    /* color fringing */
    linear-gradient(90deg, #ff00000f, #00ff0005, #0000ff0f);
  background-size:
    100% 4px,
    6px 100%;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0%   { opacity: 0.95; }
  5%   { opacity: 0.85; }
  10%  { opacity: 0.95; }
  15%  { opacity: 1.00; }
  100% { opacity: 1.00; }
}

`.crt-vignette`

A second fixed overlay that darkens the screen edges with a radial gradient, simulating the natural light falloff toward the corners of a curved CRT glass.

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, transparent 60%, #000c);
}

Glitch Effect

The .glitch class produces a digital corruption animation using CSS ::before and ::after pseudo-elements. Both pseudo-elements clone the element’s text from the data-text attribute and are absolutely positioned over the original, then shifted horizontally while a clip rectangle sweeps down the element on independent timings.

Pseudo-element	Shadow color	Animation	Duration
`::before`	`#ff00aa` (magenta)	`glitch-anim-2`	3 s infinite
`::after`	`#00ffff` (cyan)	`glitch-anim`	2.5 s infinite

<h1
  className="glitch font-pixel text-arcade-lime"
  data-text="PLAYER ONE"
>
  PLAYER ONE
</h1>

The data-text value must exactly match the visible text content. The CSS reads it via content: attr(data-text) on the pseudo-elements. Mismatches will cause the ghost layers to display different text than the original, breaking the illusion.

Scrollbar and Text Selection

Player One replaces the browser’s default scrollbar and text-selection colors to maintain the arcade palette throughout the UI.

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
  border-left: 1px solid #333;
}

::-webkit-scrollbar-thumb {
  background: #ff00aa;
  border: 2px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3ff12;
}

/* Text selection */
::selection {
  background-color: #ff00aa;
  color: #ffffff;
}

The scrollbar thumb starts as arcade-magenta and transitions to arcade-lime on hover — a small interaction that reinforces the overall color language. The 2 px arcade-black border around the thumb creates a floating pill appearance against the dark track.

Theming

Player One Arcade Color Palette and Glow Utilities

Color Tokens

Text Glow Utilities

Box Glow Utilities

CRT Effects

`.crt-overlay`

`.crt-vignette`

Glitch Effect

Scrollbar and Text Selection

Build docs developers (and LLMs) love

Theming

Documentation Index

​Color Tokens

​Text Glow Utilities

​Box Glow Utilities

​CRT Effects

​.crt-overlay

​.crt-vignette

​Glitch Effect

​Scrollbar and Text Selection

Build docs developers (and LLMs) love

Color Tokens

Text Glow Utilities

Box Glow Utilities

CRT Effects

`.crt-overlay`

`.crt-vignette`

Glitch Effect

Scrollbar and Text Selection