Pixel Art / 8-Bit

---
name: pixel-8bit
description: Apply the Pixel Art / 8-Bit visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Pixel Art / 8-Bit, mentions 8-bit, pixel art UI, retro game style, or describes bitmap pixel fonts, no anti-aliasing (image-rendering: pixelated), hard pixel-offset shadows — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Pixel Art / 8-Bit Design System

Retro console graphics as a design system: bitmap type, hard pixel-offset shadows, chunky stepped borders, sprite decorations, and a limited NES-style palette — everything grid-snapped, nothing anti-aliased.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Pixel Art / 8-Bit.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (8-bit, pixel art UI, retro game style, NES aesthetic, bitmap UI), or describes its traits: bitmap pixel fonts; no anti-aliasing (image-rendering: pixelated); hard pixel-offset shadows; NES-style limited palette; grid-snapped layout; sprite and dithering decorations.

## Design tokens

### Color palette

- Near-black console background: `#0f0f23` (--color-bg)
- Dialog and panel fill: `#1c1c3a` (--color-surface)
- White bitmap text: `#ffffff` (--color-text)
- Dimmed UI text: `#9c9cc9` (--color-text-muted)
- NES light blue — links, selection, player one: `#3cbcfc` (--color-accent)
- NES red-magenta for damage, errors, hearts: `#e40058` (--color-accent-red)
- NES green for success and power-ups: `#00a800` (--color-accent-green)
- NES yellow for coins, stars, warnings: `#f8b800` (--color-accent-yellow)
- White pixel borders on panels: `#ffffff` (--color-border)

### Typography

- Display / headings: Press Start 2P (fallback: Courier New, monospace)
- Body: Silkscreen (fallback: Courier New, monospace)
- Mono / data: VT323 (fallback: Courier New, monospace)
- Type scale: 1.5 ratio, base 14px — computed steps: 14px / 21px / 32px / 47px / 71px / 106px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.5, letter-spacing 0, uppercase
- Body: line-height 1.7, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64 — Grid-snapped — every measurement is a multiple of 8px (the tile unit); irregular spacing breaks the console illusion.
- Border radius: none 0px — Zero radius everywhere. Fake rounding, if any, is built from stepped pixel corners, never border-radius.
- Border treatment: 4px solid #ffffff — Chunky borders in 4px units; dialog boxes use double borders (outer white, 4px gap, inner white) built with box-shadow rings.

### Shadows

- pixel: `4px 4px 0 #000000` — Buttons and small panels
- pixel-lg: `8px 8px 0 #000000` — Hero dialogs and modals
- double-border: `0 0 0 4px #0f0f23, 0 0 0 8px #ffffff` — NES dialog double-border ring on panels

### Layout

- Max content width: 1024px
- Everything snaps to an 8px tile grid
- HUD-style header: score/status items in corners
- Dialog-box sections stack like game menus
- Sprite decorations (hearts, coins, arrows) as list bullets and icons

### Effects

- image-rendering: pixelated on all imagery
- Blinking square cursor (steps() animation)
- Dithered gradient fills (checkerboard patterns, never smooth)
- Selection arrow ▶ that jumps between menu items
- Optional very subtle CRT scanline overlay

### Motion

- Easing: steps(4, end); durations 100ms / 200ms / 400ms
- All movement is stepped, never smooth — sprites teleport between frames
- Text can type on character-by-character like game dialog
- Hover moves elements exactly one 4px unit
- Blinking cursor at 2 frames per second, disabled under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0f0f23;
  --color-surface: #1c1c3a;
  --color-text: #ffffff;
  --color-text-muted: #9c9cc9;
  --color-accent: #3cbcfc;
  --color-accent-red: #e40058;
  --color-accent-green: #00a800;
  --color-accent-yellow: #f8b800;
  --color-border: #ffffff;
  --radius-none: 0px;
  --shadow-pixel: 4px 4px 0 #000000;
  --shadow-pixel-lg: 8px 8px 0 #000000;
  --shadow-double-border: 0 0 0 4px #0f0f23, 0 0 0 8px #ffffff;
  --border-default: 4px solid #ffffff;
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-body: Silkscreen, "Courier New", monospace;
  --font-mono: VT323, "Courier New", monospace;
  --text-base: 14px;
  --leading-heading: 1.5;
  --leading-body: 1.7;
  --tracking-heading: 0;
  --tracking-body: 0.02em;
  --ease: steps(4, end);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400&family=Silkscreen:wght@400;700&family=VT323:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** HUD bar: black bg, white 4px bottom border, wordmark in Press Start 2P, links as menu items with a ▶ selection arrow on hover
- **Hero:** Full-width game title screen: pixel logotype, PRESS START prompt blinking below, sprite decorations, dialog-box CTA
- **Card:** Surface fill with the double-border dialog treatment, 24px padding, uppercase Silkscreen title, pixel shadow
- **Button (primary):** Accent blue fill, white Press Start 2P label, 4px black border, pixel shadow; jumps 4px toward the shadow on press
- **Button (secondary):** Black fill, white border and label, same press behavior
- **Form fields:** Black fill, 4px white border, white VT323 text, blinking square caret; focus swaps border to accent blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A dialog box straight out of an NES RPG: black fill, chunky white double border built from square pixel steps, Press Start 2P text, and a blinking square cursor at the end of the line. Spend boldness here; keep everything else quiet.

## Do

- Snap every size, gap, and offset to the 8px tile unit
- Use steps() easing for all animation — smoothness is anachronistic
- Limit the palette to the NES-style set and dither instead of gradient
- Reserve Press Start 2P for headings; use Silkscreen or VT323 for running text

## Don't

- No border-radius, no blur, no soft shadows, no anti-aliased icons
- Don't set paragraphs in Press Start 2P — it exhausts readers fast
- No smooth parallax or eased tweens
- Don't scale pixel art by non-integer factors; sprites must scale 2x/3x/4x

## Accessibility notes

- Blinking cursor and PRESS START prompts must blink at 2Hz or slower, never flash rapidly, and stop under prefers-reduced-motion — a photosensitivity consideration for any CRT-style flicker effect
- Bitmap fonts are hard to read at small sizes: keep body text at 14px+ with 1.7 line-height, and offer real text (not sprite text) for all content
- NES yellow (#f8b800) on white surfaces fails contrast — use it only on the dark background

## Reference sites

- itch.io: https://itch.io
- Press Start 2P specimen: https://fonts.google.com/specimen/Press+Start+2P
- Lospec palette list: https://lospec.com/palette-list
- NES color palette: https://en.wikipedia.org/wiki/List_of_video_game_console_palettes

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip pixel-8bit.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/pixel-8bit.json

Settings → Capabilities → Skills → Upload skill → pixel-8bit.zip