---
version: alpha
name: Neon Arcade
description: Pure black, five saturated hues at once, hard offset shadows in colour. The only theme here that is allowed to be loud in more than one direction.
meta:
  id: "theme-neon-arcade"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Five colours, all of them shouting, on the blackest possible page
  bestFor: Games, music, streaming, community and creator platforms, hackathon and event sites
  avoidFor: Finance, healthcare, enterprise admin, anything read for more than ten minutes
  defaultMode: dark
  surfaceStyle: hard-shadow
  accentUse: fill
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: punch
  motion:
    intensity: 5
    duration: 150ms
    ease: "cubic-bezier(0.2, 1.6, 0.5, 1)"
    signature: "Elements snap into place and their coloured shadow snaps with them."
  displayFont: Syne
  displayKind: sans
  bodyFont: Space Grotesk
  monoFont: Space Mono
colors:
  background: "#F4E7F6"
  foreground: "#29202B"
  card: "#E7E0E8"
  card-foreground: "#29202B"
  popover: "#E7E0E8"
  popover-foreground: "#29202B"
  primary: "#AC0084"
  primary-foreground: "#FEF8FF"
  secondary: "#DFD5E0"
  secondary-foreground: "#29202B"
  muted: "#DFD5E0"
  muted-foreground: "#675869"
  accent: "#007F8A"
  accent-foreground: "#FEF8FF"
  destructive: "#B02B27"
  destructive-foreground: "#FEF8FF"
  border: "#CDC4CE"
  input: "#CDC4CE"
  ring: "#AC0084"
  chart-1: "#AB2986"
  chart-2: "#B64800"
  chart-3: "#606600"
  chart-4: "#008A81"
  chart-5: "#3448C1"
colorsDark:
  background: "#0A050D"
  foreground: "#D5CCD8"
  card: "#140E17"
  card-foreground: "#D5CCD8"
  popover: "#140E17"
  popover-foreground: "#D5CCD8"
  primary: "#EF42BD"
  primary-foreground: "#120916"
  secondary: "#211826"
  secondary-foreground: "#D5CCD8"
  muted: "#211826"
  muted-foreground: "#8B818E"
  accent: "#00DDEF"
  accent-foreground: "#120916"
  destructive: "#EB6459"
  destructive-foreground: "#120916"
  border: "#2F2734"
  input: "#2F2734"
  ring: "#EF42BD"
  chart-1: "#E562BB"
  chart-2: "#EB5F03"
  chart-3: "#A3AD00"
  chart-4: "#009D94"
  chart-5: "#89A4FF"
typography:
  display-lg:
    fontFamily: Syne
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Syne
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Syne
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Space Grotesk
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Space Grotesk
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Space Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Space Mono
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 10px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 50px
  gutter: 18px
  margin: 26px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 13px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 13px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Neon Arcade

## Overview

Neon Arcade is the only theme in this library that uses five saturated hues at
the same time and means it. The ground is as close to pure black as the palette
allows, every raised element carries a hard offset shadow in a *colour* rather
than in the border tone, and headings are uppercase Syne set at poster scale.

It is deliberately exhausting to read for long, which is the correct trade for
what it is for: a page you arrive at, react to, and act on. Where a table is
unavoidable, keep it short and let it be the calmest thing on the screen.

Personality: loud, young, physical. It should look like a flyer stapled to a
pole, not like a dashboard.

## Colors

Black plus a full polychrome set.

- **Ground (#0A050D):** Near-pure black with a magenta bias.
- **Primary (#EF42BD):** Hot magenta. The main action and the current item.
- **Accent (#00DDEF):** Arcade cyan. The second action and the "live" state.
- **chart-1 to chart-5** are five genuinely separate hues, all at high chroma.
  Unlike every other theme here, using all five on one screen is correct.
- **Hard shadows** are drawn in the element's own accent colour at full
  strength, 5px/5px, zero blur. That coloured offset is the single fastest way
  to recognise this theme.

Light mode exists and is not a joke: the same five hues on a bright lilac-white,
with the offsets drawn in the ink colour instead.

## Typography

Syne for display, Space Grotesk for body, Space Mono for scores and times.

- **Display:** Syne at 72px, weight 700, uppercase, tracking pulled to -0.04em
  so the letters interlock.
- **Headings:** uppercase. Labels are not — the inverse of most themes here.
- **Body:** Space Grotesk at 15px. Keep paragraphs to three lines.
- **Numerals:** Space Mono, large, often the biggest thing on a card. Scores,
  counts and timers are content, not metadata.

## Layout

A 12-column grid at 1280px with 18px gutters, used loosely: cards are allowed to
overlap the grid by a few pixels and to sit at a slight rotation. The rule is
that overlap must be intentional and consistent — one rotated element per
region, never three.

Vertical rhythm is 4px. Sections are separated by 50px and a 2px rule in a
different hue each time.

## Elevation & Depth

Every raised element has a hard offset shadow: 5px right, 5px down, zero blur,
drawn in a saturated hue. On hover the element translates 2px toward the shadow
and the offset shrinks to 3px, so it reads as being pressed.

There are no soft shadows anywhere. A blurred shadow in this theme looks broken.

## Shapes

Small radii — 6px on cards, 4px on buttons — with a 2px border in a saturated
colour. The contrast between the tight radius and the loud colour is what keeps
it from reading as a toy.

Images get a punchy grade with raised saturation and are often masked into a
hexagon or a rotated square. Rotation is capped at 3 degrees.

## Components

- **Buttons:** 2px border, flat fill, 4px radius, 13px padding, hard offset in a
  contrasting hue. Active state translates into the shadow.
- **Cards:** 2px border, 6px radius, coloured offset, 20px padding. Each card in
  a grid may take a different hue for its border and offset.
- **Score tiles:** the number in Space Mono at 52px, the label uppercase above.
- **Badges:** solid fill of a chart hue, black text, 2px radius.
- **Inputs:** 2px border, black fill, cyan focus ring, no radius change.

## Do's and Don'ts

- Do use all five hues in one view — that is what they are for.
- Do draw shadows hard, coloured and unblurred.
- Do set headings uppercase at poster size.
- Don't use a soft or grey shadow anywhere.
- Don't put long-form reading in this theme.
- Don't rotate more than one element per region, or past 3 degrees.
- Don't dilute the ground; it has to be nearly black for the hues to work.