name: pacman-arcade-design
version: alpha
description: >
  An 8-bit arcade-cabinet UI themed as a Pac-Man maze firewall: pure-black
  screen (#000) with a multi-color ghost palette — Pac yellow (#FFE800), blue
  (#2A3FE5), pink (#F4B9B0), orange-warning (#D97706), danger red (#DC2626) and
  success green (#10B981). Every container is a 4px dotted border with square
  corner-marker pips. Type is pixel-font Press Start 2P for headings/labels with
  Space Mono body, all uppercase. Signatures: CRT scanline overlay, chomping
  Pac-Man dots, floating CSS ghost shapes with cursor-tracking eyes, dotted-pellet
  trails, a power-pellet toggle that recolors the dashboard, and a drift ticker.
colors:
  # Arcade palette (one hue per role)
  pac: '#FFE800'             # Pac-Man yellow — primary CTA, pellets, logo
  primary: '#2A3FE5'         # blue ghost (Inky) / 1P plan / maze borders
  secondary: '#F4B9B0'       # pink ghost (Pinky) / cabinet plan
  warning: '#D97706'         # orange ghost (Clyde) / 2P featured plan
  danger: '#DC2626'          # red ghost (Blinky) / threat alerts
  success: '#10B981'         # green — secure status, ticker, READY badge
  # Surface
  surface: '#000000'         # CRT screen canvas
  surface-well: 'rgba(255,255,255,0.05)' # faint inner wells
  on-surface: '#FFFFFF'
  on-surface-muted: 'rgba(255,255,255,0.6)'
typography:
  display:
    fontFamily: '"Press Start 2P", cursive'
    fontSize: 72px            # hero (text-5xl→7xl), pixel font
    fontWeight: 400
    lineHeight: 1.1
    textTransform: uppercase
    letterSpacing: -0.02em    # tracking-tighter
  heading:
    fontFamily: '"Press Start 2P", cursive'
    fontSize: 36px            # section h2 (text-4xl)
    fontWeight: 400
  label-pixel:
    fontFamily: '"Press Start 2P", cursive'
    fontSize: 11px            # nav, badges, plan headers
    fontWeight: 400
  body:
    fontFamily: '"Space Mono", monospace'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    textTransform: uppercase
  body-fine:
    fontFamily: '"Space Mono", monospace'
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em
rounded:
  none: 0px                  # dotted-border boxes are square
  full: 9999px               # Pac-Man / pellets / status dots
spacing:
  # base unit = 4px; arcade-roomy py-24 → py-48
  md: 32px
  lg: 48px
  xl: 96px
  xxl: 192px
components:
  box-dotted:
    background: '{colors.surface}'
    border: '4px dotted currentColor'  # colored per section (blue/warning/danger/...)
    rounded: '{rounded.none}'
    cornerMarkers: '8px square pips at each corner (currentColor)'
  button-primary:
    background: '{colors.pac}'
    textColor: '#000000'
    border: '4px dotted {colors.pac}'
    typography: '{typography.label-pixel}'
    active: 'translateY(1px)'
    glow: '0 0 10px var(--color-pac)'
  button-outline:
    border: '4px dotted {colors.secondary}'   # color matches section
    textColor: 'matching color'
    hover: 'bg color/10'
  ghost:
    shape: '48px rounded-top body + two white eyes w/ cursor-tracking pupils'
    fill: 'danger / secondary / primary / warning'
    glow: '0 0 20px rgba(color,0.4)'
    animation: 'float 2.5s ease-in-out'
  toggle-power:
    off: 'black w/ dotted white border, white dot'
    on: 'bg {colors.primary}, {colors.pac} dot — recolors whole dashboard (.power-on)'
  ticker:
    border: '4px dotted {colors.success} (top+bottom)'
    text: 'Press Start green + pac dots'
    animation: 'drift 30s linear'
  pricing-featured:
    background: '{colors.warning}'  # orange highlighted 2P plan, scale 1.05
motion:
  signatures: 'chomp 0.3s steps(2), float 2.5s, blink 0.8s steps, drift 30s, pulse-pellet 1s'
  crt: 'scanline gradient overlay (::after) + scanline-overlay'
  interactive: 'cursor-tracking ghost pupils (atan2); scroll-progress footer Pac-Man'
icons:
  library: none (CSS-drawn ghosts + Pac-Man) + pixel glyph letters (TW/GH)
  style: pure CSS pixel shapes
  colorRule: 'each ghost/section owns one palette hue'

Pac-Man Arcade — "GHOSTWALL"

Design spec — version alpha. Source: static HTML (pacman-arcade.html); tokens read from :root and component CSS. Fictional arcade-themed firewall product; described factually.

Overview

An 8-bit arcade cabinet UI that themes a network firewall as a Pac-Man maze ("hunt down malicious packets"). The screen is pure black {colors.surface} #000000 with a CRT scanline overlay. Color comes from the arcade ghost palette — Pac yellow {colors.pac} #FFE800, blue {colors.primary} #2A3FE5, pink {colors.secondary} #F4B9B0, orange {colors.warning} #D97706, red {colors.danger} #DC2626, green {colors.success} #10B981 — each hue owning a role (a ghost, a plan, a status). Every container is a 4px dotted border with square corner-marker pips. Type is the pixel font Press Start 2P (headings, labels, all uppercase) over Space Mono body. Signatures: chomping Pac-Man dots, floating CSS ghost shapes whose pupils track the cursor, dotted pellet trails, a power-pellet toggle that recolors the whole dashboard blue, a green drift ticker, and a scroll-progress Pac-Man eating the footer rule.

Colors

Arcade palette. No single voltage — Pac yellow {colors.pac} is the primary CTA/pellet/logo color; the four ghost hues ({colors.danger} Blinky, {colors.secondary} Pinky, {colors.primary} Inky, {colors.warning} Clyde) each tag a module/plan and its dotted border; {colors.success} green signals secure/READY status and the ticker. Discipline: one hue per ghost/section/status — colors never blend.

Surface. Black {colors.surface} everywhere; faint white wells ({colors.surface-well}); white text {colors.on-surface} (60% muted).

Typography

Press Start 2P pixel font for all headings, nav, badges and plan headers (uppercase, blocky); Space Mono for body and fine print (also uppercase).

Token	Family	Size	Usage
display	Press Start 2P	72px	Hero ("HUNT DOWN MALICIOUS…")
heading	Press Start 2P	36px	Section titles
label-pixel	Press Start 2P	11px	Nav, badges, plan headers
body	Space Mono	18px	Body copy (uppercase)
body-fine	Space Mono	10px	Fine print, stats

Layout

Base 4px, arcade-roomy sections (py-24→py-48). A sticky dotted nav (chomping Pac logo + "INSERT COIN"); a centered hero over a faint dotted maze grid; a dashboard (7/5 split: a maze "network map" with ghosts/pellets + a countermeasures panel with the power toggle); a 4-up ghost module grid (rotated cards that straighten on hover); a green drift ticker; a 3-up pricing row with a scaled orange featured plan; and a footer with a scroll-progress Pac-Man rail.

Elevation & Depth

Flat 8-bit — depth is neon glow, not shadow: pellets/CTAs/ghosts carry colored glows (0 0 10–20px), the CRT ::after scanline gradient and a scanline-overlay sit above everything. Cards are rotated and snap straight on hover rather than lifting.

Shapes

Square dotted-border boxes ({rounded.none}) with 8px corner pips define the maze aesthetic; Pac-Man, pellets, ghost eyes and status dots are the only {rounded.full} elements (ghosts are rounded-top capsules).

Components

• box-dotted — 4px dotted border (colored per section) with square corner-marker pips.
• button-primary — Pac-yellow fill, black pixel label, dotted border, yellow glow, press-down.
• button-outline — section-colored dotted border + matching text, tinted hover.
• ghost — CSS rounded-top body in a palette hue, white eyes with cursor-tracking pupils, float + glow.
• toggle-power — flips the dashboard into .power-on (blue bg, white ghost bodies, yellow pupils).
• ticker — green dotted-bordered band of Press Start phrases + Pac dots, drifting left.
• pricing-featured — orange "2P CO-OP" plan, scaled up with a blinking "BEST VALUE" tag.

Motion

Pervasive arcade motion: chomp (0.3s steps(2)), float ghosts (2.5s), blink (0.8s steps), drift ticker (30s linear), pulse-pellet (1s); plus JS interactivity — ghost pupils track the mouse via atan2, the power toggle recolors the dashboard, and a footer Pac-Man advances with scroll progress.

Iconography

No icon library — ghosts and Pac-Man are pure CSS pixel shapes; social links are pixel-letter glyphs (TW/GH) in dotted boxes. Each ghost/section owns one palette hue.

Do's and Don'ts

• Do keep the pure-black CRT screen with the scanline overlay.
• Do assign exactly one palette hue per ghost, plan, status and its dotted border.
• Do use 4px dotted borders + corner pips on every container.
• Do set headings/labels in Press Start 2P and body in uppercase Space Mono.
• Do lean on neon glow + chomp/float/blink animations for life.
• Don't use solid borders, rounded boxes, or drop shadows in place of dotted borders + glow.
• Don't mix two ghost colors in one element.
• Don't abandon the pixel font for headings — it carries the 8-bit identity.

Known Gaps

• Values read from the implementation's resolved :root. --color-fg-muted is referenced but undefined in source (hero subtext falls back). Copy/stats are sample content; CSS transitions are globally disabled in the capture so animation timings reflect authored intent.