Chomp

Chomp is a design system that drops the user straight into the glow of an arcade cabinet. It is built from chunky pixel typography, a midnight-blue cabinet background, and electric primary colors that buzz like a CRT at full brightness. Every edge is hard, every shadow is a solid block, and the whole thing is snapped to an 8-pixel grid. Reach for Chomp when you want playful, nostalgic, high-energy fun — game sites, launches, event pages, and brands that want visitors to feel like they just dropped a coin in the slot and the marquee lit up.

Design principles

• Everything snaps to an 8px pixel grid — no half-pixels, no blur, no anti-aliased curves.
• Hard edges only: 0px radius and chunky solid borders that read like a sprite outline.
• Color is loud and primary — neon yellow, pink, green, and cyan against deep midnight blue.
• Shadows are stacked solid blocks, never soft glows, mimicking layered pixel art.
• Type is pixel-perfect: bitmap-style fonts at sizes that keep letterforms crisp and blocky.
• Lean into the cabinet: scanlines, blinking cursors, coin glyphs, and "PRESS START" energy.
• Limit the palette per screen so the neons stay punchy and the color-coding reads clearly.

Color

The cabinet runs on a deep midnight blue background (#0A0A23) with raised panels in #15153A and borders in #3A3A7A. Foreground text is pure white (#FFFFFF) for maximum CRT contrast, with muted lavender-gray (#8A8AC0) for secondary labels and metadata. The primary accent is arcade yellow (#FFD000) for main actions and highlights; supporting neons are hot pink (#FF3860), pixel green (#21D07A), and sky cyan (#2EC4FF), used to color-code tiers, badges, and game states. Treat each neon as a "player color" — assign it a meaning and keep it consistent.

The system is dark by default, because that is where the neons glow brightest. A light "attract mode" variant flips to a cream #F4F0FF background with a navy #0A0A23 foreground while keeping the same neon accents, useful for print or high-glare contexts — but the dark cabinet is the canonical look. Never tint the neons toward pastel; their charge comes from full saturation against the near-black field.

Token reference

• background #0A0A23 — the deep midnight cabinet field.
• surface #15153A — raised panels, marquees, and cards.
• primary #FFD000 — arcade-yellow main actions and highlights.
• secondary #FF3860 — hot-pink emphasis and alerts.
• foreground #FFFFFF — primary white text at full CRT contrast.
• muted #8A8AC0 — lavender-gray secondary labels.
• border #3A3A7A — base panel borders before a neon override.