Pixel
Mission
Channel the golden age of arcade cabinets and 8-bit consoles — where every pixel is intentional, UI is chunky, and nostalgia hits hard.
Brand
🎨 Colors
#1A1A2E — Background (dark arcade)#E94560 — Primary (neon red)#0F3460 — Secondary (deep blue)#16C79A — Accent (retro green)#FFD700 — Highlight (coin gold)#EAEAEA — Text (white-ish)
🔤 Typography
- Headings: Press Start 2P (pixel, display only)
- Body: Fira Code (monospace, readable)
- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.25rem / 2xl 1.5rem / 3xl 2rem
📐 Spacing
- 8px grid (single pixel block unit)
- Section padding: 4rem vertical, 1.5rem horizontal
- Card gaps: 1rem
- Max content width: 60rem
🧩 Components
- Buttons: Chunky, 0px radius, 4px solid border, 4px drop shadow (no blur, solid offset), press effect moves element down 4px
- Cards: Solid border (4px), 0px radius, dark bg, neon accent border on hover, pixel-perfect corners
- Nav: Chunky horizontal bar, monospace links, active state uses inverted colors
- Hero: Dark background with pixel-art decorative border (CSS border-image or SVG), large pixel heading, single CTA
- Footer: 4px top border, pixel-art divider line, compact monospace links
♿ Accessibility
- Contrast ratio ≥ 4.5:1 on all text — neon on dark passes easily
- Focus ring: 4px solid #FFD700, 0px radius, 4px offset from element
- Reduced motion: disable screen shake and button press animations
- Minimum font size: 0.875rem — Press Start 2P reserved for headings ≥ 1.5rem only
- Monospace body text aids dyslexic readers with consistent letter spacing
✍ Writing Tone
Punchy, energetic, arcade-style. ALL CAPS for buttons and labels. Short commands. "INSERT COIN" energy. Use > arrows and█ blocks for flair.
Do / Don't
✅ Do
- Use CSS
box-shadow with 0 blur and positive offsets for chunky depth
- Apply
image-rendering: pixelated to all images and icons
- Use
border-image with pixel-art patterns for decorative section borders
- Keep borders either 2px or 4px — never odd pixel widths
- Animate with
steps() timing function for frame-by-frame feel
❌ Don't
- Use border-radius on any element — pixels have corners
- Anti-alias text — use
-webkit-font-smoothing: none for pixel fonts
- Use gradients — flat colors only
- Mix pixel and modern smooth aesthetics in the same view
- Exceed 4px for any border or shadow — keep the grid tight
Quality Gates
1---2name: pixel3description: 8-bit retro gaming aesthetic with blocky pixel-art borders, chunky UI, and arcade nostalgia.4---5# Pixel6## Mission7Channel the golden age of arcade cabinets and 8-bit consoles — where every pixel is intentional, UI is chunky, and nostalgia hits hard.8## Brand9### 🎨 Colors10- `#1A1A2E` — Background (dark arcade)11- `#E94560` — Primary (neon red)12- `#0F3460` — Secondary (deep blue)13- `#16C79A` — Accent (retro green)14- `#FFD700` — Highlight (coin gold)15- `#EAEAEA` — Text (white-ish)16### 🔤 Typography17- Headings: **Press Start 2P** (pixel, display only)18- Body: **Fira Code** (monospace, readable)19- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.25rem / 2xl 1.5rem / 3xl 2rem20### 📐 Spacing21- 8px grid (single pixel block unit)22- Section padding: 4rem vertical, 1.5rem horizontal23- Card gaps: 1rem24- Max content width: 60rem25### 🧩 Components26- **Buttons**: Chunky, 0px radius, 4px solid border, 4px drop shadow (no blur, solid offset), press effect moves element down 4px27- **Cards**: Solid border (4px), 0px radius, dark bg, neon accent border on hover, pixel-perfect corners28- **Nav**: Chunky horizontal bar, monospace links, active state uses inverted colors29- **Hero**: Dark background with pixel-art decorative border (CSS border-image or SVG), large pixel heading, single CTA30- **Footer**: 4px top border, pixel-art divider line, compact monospace links31### ♿ Accessibility32- Contrast ratio ≥ 4.5:1 on all text — neon on dark passes easily33- Focus ring: 4px solid #FFD700, 0px radius, 4px offset from element34- Reduced motion: disable screen shake and button press animations35- Minimum font size: 0.875rem — Press Start 2P reserved for headings ≥ 1.5rem only36- Monospace body text aids dyslexic readers with consistent letter spacing37### ✍ Writing Tone38Punchy, energetic, arcade-style. ALL CAPS for buttons and labels. Short commands. "INSERT COIN" energy. Use > arrows and█ blocks for flair.39## Do / Don't40### ✅ Do41- Use CSS `box-shadow` with 0 blur and positive offsets for chunky depth42- Apply `image-rendering: pixelated` to all images and icons43- Use `border-image` with pixel-art patterns for decorative section borders44- Keep borders either 2px or 4px — never odd pixel widths45- Animate with `steps()` timing function for frame-by-frame feel46### ❌ Don't47- Use border-radius on any element — pixels have corners48- Anti-alias text — use `-webkit-font-smoothing: none` for pixel fonts49- Use gradients — flat colors only50- Mix pixel and modern smooth aesthetics in the same view51- Exceed 4px for any border or shadow — keep the grid tight52## Quality Gates53- [ ] No border-radius anywhere in the stylesheet54- [ ] All images and icons use `image-rendering: pixelated`55- [ ] Press Start 2P font loads and renders properly on headings56- [ ] Button press animations use `steps()` timing function57- [ ] No CSS gradients in any declaration58- [ ] Layout works at 320px with monospace body text and pixel headings
jdsadminllc