← All UI styles
Arcade Cabinet
Cabinet-side colors on black: saturated primaries, hard edges, shouted labels.
PixelretroGamesLeaderboardsEvent products
Construction · Pixel
Everything snaps to the grid: hard rings instead of borders, block offsets instead of shadows, and no soft edge anywhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Arcade Cabinet style. Saturated cabinet-art color on black, with hard edges, heavy outlines and every label shouted. Built for a dark room and a queue of players. Build every surface the
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- cabinet art color on black
- heavy outlines
- shouted labels
- built for a dark room
What this style refuses
- light backgrounds
- muted color
- thin hairlines
- lowercase labels
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#0c0a12#070510Surface
#151020#100c1aBorder
#39304f#2f2745Text
#f6f0ff#f6f0ffMuted text
#ab9fc4#a89bc2Accent
#ffcc00#ffcc00On accent
#0c0a12#070510Shape and type
Radius0 / 2 / 6 px
Border2px solid
Shadowglow
DisplayImpact
Bodyui-monospace
Monoui-monospace
Type scale11 · 12 · 14 · 17 · 24 · 36 px
Weights500 / 800 / 900
Line height1.4
Tracking0.04em
Spacing4px grid · regular
Surfaceflat
Accentblock
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 17.63:1 light, 18.13:1 dark; secondary text 7.95:1 and 7.83:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Arcade Cabinet
*
* Cabinet-side colors on black: saturated primaries, hard edges, shouted labels.
*
* One complete product screen, rendered from the token object below —