Arcade

Arcade is the look of a darkened room lit by a glowing cabinet. It pairs blocky pixel typography, dead-square corners, and saturated neon against a midnight backdrop, then makes every button feel like a physical thing you slam with your palm. Reach for it when you want energy, nostalgia, and a touch of mischief — a UI that rewards interaction instead of staying politely flat.

Design principles

• Hard edges only: every corner is 0px. Roundness is reserved for one shape — the pressable pill button.
• Shadows are solid, never soft. Stack offset color blocks so elements look like they sit physically above the surface.
• Color is loud and intentional. Neon accents pop against a dark, near-black field so they read as light sources.
• Buttons must feel mechanical: they lift on hover and physically depress (shadow collapses, element nudges down-right) on press.
• Pixel type is decorative for headings, but body text stays legible — use a tall, readable monospace for paragraphs.
• Embrace playful chrome: scanlines, blinking cursors, and badge counters reinforce the cabinet fantasy without hurting usability.

Color

The base is a midnight blue-black #0B0D2A that reads as the dark glass of a screen. Panels and cards lift to #161A3F (surface) with a #2C3170 border that keeps edges crisp in the dark. Primary actions use hot pink #FF2E63; the cyan secondary #21E6C1 and yellow #FFD23F carry the rainbow-shadow accents, with violet #7C4DFF for tertiary highlights and links. Foreground text is a slightly cool white #F4F4FB; muted captions use #9296C4.

This style is dark-native. A light variant flips the field to a warm paper #F4F2E9 with surface #FFFFFF, keeps the same saturated accents, and swaps text to #0B0D2A — but the neon-on-dark mode is the signature. In dark mode, lean on glow (a subtle accent-colored outer ring) to suggest emission; in light mode, drop the glow and let the solid block shadows carry the depth.