name: pixelhollow-design
version: alpha
description: >
  Pixel Hollow is a horizontally-scrolling indie game studio site styled as a
  16-bit dungeon crawl. The surface is a deep midnight indigo (`#1A1C2C`) lit by
  three retro voltages — amber gold (`#FFCD75`), ember orange (`#EF7D57`), and
  toxic green (`#A7F070`) — drawn straight from a classic pixel-art palette. The
  signature moves are everywhere chunky: hard 6px offset shadows, 4px borders,
  8px stepped `clip-path` corners that never round, dithered radial overlays, and
  a parallaxed corridor the player's pixel avatar walks down. Type is pure
  pixel-font heritage — Pixelify Sans for display, Silkscreen for HUD labels,
  VT323 for body lore — all rendered with `image-rendering: pixelated`.
colors:
  # Surface
  void: '#11131f'           # deepest panels, gates, footer, video frames
  surface: '#1A1C2C'        # page background, body fill, dark insets
  panel: '#262945'          # cards, chips, inputs, equipment slots, HUD bars
  # Brand / Voltages
  gold: '#FFCD75'           # primary brand — logo, headings, borders, default text
  ember: '#EF7D57'          # accent — torches, text-shadows, labels, accent borders
  toxic: '#A7F070'          # secondary accent — avatar, body copy, CTA fill, HP bar
  # Text
  text: '#FFCD75'           # default body/heading text (gold)
  text-muted: '#FFCD75'     # gold at /70 or /60 opacity for footer & sub-labels
  body: '#A7F070'           # VT323 lore/body text (toxic green)
  # Hairlines
  border: '#FFCD75'         # 4px / 2px gold borders on cards, gates, inputs
  border-ember: '#EF7D57'   # 2px ember borders on equipment slots & chips
  border-toxic: '#A7F070'   # 2px toxic borders on chips & inset frames
  # Effect
  shadow-hard: '#1A1C2C'    # 6px hard offset shadow (.hardsh)
  shadow-gold: '#FFCD75'    # gold hard shadow (.hardsh-g)
  shadow-ember: '#EF7D57'   # 5px ember hard shadow (.hardsh-m), torch glow color
typography:
  display:
    fontFamily: "'Pixelify Sans', sans-serif"
    fontSize: clamp(2.25rem, 8vw, 8rem)   # text-4xl up to text-9xl
    fontWeight: 700
    letterSpacing: 0.05em                 # tracking-wider on hero/logo
  hud:
    fontFamily: "'Silkscreen', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.25em                 # tracking-[0.25em]/[0.3em] on labels
    textTransform: uppercase
  body:
    fontFamily: "'VT323', monospace"
    fontSize: clamp(1.25rem, 3vw, 1.875rem)  # text-xl to text-3xl
    fontWeight: 400
    lineHeight: 1.1                        # leading-tight
rounded:                      # no rounding — brutalist pixel geometry
  none: 0px
  step8: '8px stepped clip-path (.step8)'   # faux-beveled pixel corner, not radius
spacing:                      # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  navbar:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.gold}'
    border: '4px bottom {colors.gold}'
    shadow: '{colors.shadow-ember} 5px 5px 0 (.hardsh-m)'
    padding: 'px-4 py-2'
  equipSlot:
    backgroundColor: '{colors.panel}'
    border: '2px {colors.ember}'
    size: 'w-9 h-9 (36px)'
    rounded: '{rounded.none}'
  relicCard:
    backgroundColor: '{colors.panel}'
    border: '4px {colors.gold}'
    textColor: '{colors.gold}'
    shadow: '{colors.shadow-hard} 6px 6px 0 (.hardsh)'
    padding: '16px (p-4)'
    rounded: '{rounded.none}'
  chip:
    backgroundColor: '{colors.panel}'
    border: '2px (ember / toxic / gold)'
    typography: '{typography.hud}'
    padding: 'px-2 py-1'
    rounded: '{rounded.none}'
  input:
    backgroundColor: '{colors.surface}'
    border: '2px {colors.gold}'
    textColor: '{colors.gold}'
    typography: '{typography.body}'
    padding: 'px-3 py-2'
  ctaButton:
    backgroundColor: '{colors.toxic}'
    textColor: '{colors.surface}'
    border: '4px {colors.gold}'
    shadow: '{colors.shadow-ember} 5px 5px 0 (.hardsh-m)'
    typography: '{typography.display}'
    padding: 'py-3'
    hover: 'bg {colors.gold}'
motion:
  gate: 'GSAP — gate halves slide open xPercent ±100, 1.6s power3.inOut on load'
  avatar-walk: 'JS — avatar left tracks scroll progress; bottom hops with scroll velocity'
  parallax: 'Lenis horizontal scroll; bg-stained translateX(-scroll*0.2)'
  reveal: 'GSAP from opacity 0 / y 30, 1s, ScrollTrigger'
  relic-wipe: 'GSAP clipPath inset(0 100% 0 0) -> inset(0), 0.7s staggered 0.12s'
  typewriter: 'JS lore text typed char-by-char at 18ms/char'
  flick: 'torch glow keyframes, 1.7s steps(3) infinite'
  bob: 'translateY -6px, 1.2s steps(4) infinite (avatar & merchant)'
  glowpulse: 'relic drop-shadow pulse, 2s steps(4) infinite'
  curblink: 'cursor blink 1s steps(1) infinite'
icons:
  library: inline SVG (hand-built pixel art, viewBox 0 0 16 16)
  style: solid pixel rects/polygons/circles, image-rendering pixelated
  sizes: { hud: 20px, avatar: 48px, relic: 60px, merchant: 64px }
  color: '{colors.toxic} / {colors.ember} / {colors.gold}'

Pixel Hollow

pixelhollow-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Pixel Hollow is an indie game studio one-pager built as a side-scrolling dungeon corridor — you don't scroll down, you scroll right, walking a pixel avatar past five full-viewport panels. The whole thing lives in a single retro game palette: a midnight indigo void (#1A1C2C / #11131f), slate panels (#262945), and three glowing voltages — amber gold (#FFCD75), ember orange (#EF7D57), and toxic green (#A7F070). Nothing is round. Every box has a 4px border, a 6px hard offset shadow (.hardsh: 6px 6px 0 #1A1C2C), and key elements wear an 8-point stepped clip-path bevel (.step8) that fakes chunky pixel corners. A dithered dot pattern (radial-gradient #000 1px / 4px grid) and a radial vignette sit over the surface for CRT grit. The type story is all pixel fonts — Pixelify Sans for big display, Silkscreen for tiny HUD labels, VT323 for flowing lore — and everything (including images, video, and SVG) is forced through image-rendering: pixelated. Headings carry an offset ember text-shadow (7px 7px 0 #EF7D57) so titles read as drop-shadowed sprites.

Colors

Surface — Three depths of indigo. #11131f (void) is the darkest: the entry gates, video frames, and footer. #1A1C2C (surface) is the page background and body fill. #262945 (panel) is every raised element — relic cards, contact cards, chips, equipment slots, HUD bars, and the progress track.

Brand / Voltages — #FFCD75 (gold) is the primary: the PIXEL HOLLOW logo, all major headings, the default text color, and the dominant 4px/2px border. #EF7D57 (ember) is the hot accent: glowing torches, the offset text-shadow on every heading, category labels, and accent borders. #A7F070 (toxic green) is the secondary accent: the avatar sprite, all VT323 body/lore copy, the HP bar fill, the "SEAL THE DEAL" CTA fill, and the blinking input cursor.

Text — Default text is gold #FFCD75; muted variants use gold at /70 and /60 (footer, hints). Lore and body paragraphs are toxic green #A7F070 in VT323.

Hairlines — Borders carry the structure. 4px gold on cards/gates, 2px gold on inputs, 2px ember on equipment slots, 2px toxic on inset frames and chips.

Effect — Hard shadows are flat color blocks, not blurs: .hardsh is 6px 6px 0 #1A1C2C, .hardsh-g 6px 6px 0 #FFCD75, .hardsh-m 5px 5px 0 #EF7D57. Torch glow uses ember rgba (#EF7D5799); avatar and relics use toxic green drop-shadows.

Typography

Three Google-Fonts pixel faces (one @import). Pixelify Sans (400–700) is the display/headline face — the logo, hero "PIXEL HOLLOW", and all section H2/H3. Silkscreen (400/700) is the HUD/label face — tiny uppercase, wide-tracked captions, chips, equipment, footer. VT323 is the body face — the conversational lore typewriter, card descriptions, and form input text. All are open-source, so no substitution is needed. Everything sits on image-rendering: pixelated for crispness.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp 2.25–8rem (text-4xl→9xl)	700	tight	0.05em (wider)	Logo, hero, H2/H3
hud	9–10px	400/700	normal	0.25–0.3em	Labels, chips, footer, HUD
body	text-xl→3xl	400	1.1 (tight)	normal	Lore, descriptions, inputs

Layout

Base unit is 4px (Tailwind scale; gaps of 1/2/3/4/5/8). The page is a fixed 100vh viewport with a horizontal flex-row corridor of 100vw panels driven by Lenis horizontal smooth-scroll. A fixed top navbar (logo + equipment HUD + HP bar + progress bar), a fixed bobbing pixel avatar, fixed background layers (radial vignette, parallaxed stained-glass shapes, dither overlay), and a fixed footer bracket the scene. The five panels: (1) hero with sliding entry gates and torches; (2) "torchlit hall" with pixelated parallax pillars; (3) lore library with a two-column grid + typewriter; (4) relic rooms — a 4-up card grid of game titles with autoplay video; (5) merchant + contact form in a two-column grid. Content maxes at max-w-6xl/7xl. Whitespace is generous within panels but the composition is dense with HUD chrome at the edges.

Elevation & Depth

No soft shadows — depth is built from hard offset color shadows and stacked borders. .hardsh (6px 6px 0 #1A1C2C), .hardsh-g, and .hardsh-m (5px 5px 0 #EF7D57) give cards and buttons a printed-sticker lift. Glow is reserved for animated light sources: torches flicker via box-shadow keyframes, relics pulse a green drop-shadow, the avatar carries a faint green glow. A radial vignette (circle at 30% 20%, #262945 -> #1A1C2C) plus a 30%-opacity dither dot grid sit behind everything for atmospheric grain. Parallax (stained glass at 0.2x scroll) adds spatial depth in the corridor.

Shapes

Aggressively non-round. The default border-radius is 0 — every card, chip, input, and bar is a sharp rectangle. The one decorative move is .step8, an 8-point stepped clip-path that bevels corners in 4px pixel steps (logo mark, gate locks, CTA blocks, video frames), reading as a chunky 16-bit cut corner rather than a curve. Stained-glass panels and pixel-art SVGs use angular polygon() clip-paths. The HP bar, progress bar, and chips are all hard rectangles.

Components

• Navbar — #1A1C2C fill, 4px bottom gold border, .hardsh-m ember shadow, px-4 py-2; holds the .step8 logo mark, equipment slots, HP bar, and a bottom progress track (#262945 rail, #FFCD75 fill).
• Equipment slot — 36px (w-9 h-9) #262945 square, 2px ember border, holds a 20px pixel-art SVG; titled "Blade of Code", "Tome of Art", etc.
• Relic card — #262945 fill, 4px gold border, .hardsh, p-4; glowing 60px SVG icon, autoplay pixel video in a toxic-bordered frame, ember category label, gold H3, green VT323 blurb, tiny rating/sales stats.
• Chip / tag — #262945 fill, 2px border (ember/toxic/gold to match its text), Silkscreen 10px uppercase, px-2 py-1; e.g. "CLASS: SOLO-DEV", "LVL 27".
• Input — #1A1C2C fill, 2px gold border, px-3 py-2, VT323 gold text with a /40 placeholder; the name field carries a blinking green cursor block.
• CTA button — full-width #A7F070 fill, #1A1C2C Pixelify text, 4px gold border, .hardsh-m, py-3, hovers to gold; label "SEAL THE DEAL ▸".
• Avatar — fixed 48px pixel-knight SVG, green glow, bobbing, walks the corridor.

Motion

Scroll is horizontal Lenis smooth-scroll over the corridor. On load, two entry gates slide apart (xPercent ±100, 1.6s power3.inOut). As you scroll: the progress bar fills, the avatar's left tracks progress and its bottom hops with scroll velocity, and a stained-glass layer parallaxes at 0.2x. ScrollTrigger reveals lore text (fade + 30px rise) and wipes relic cards in with a staggered clipPath inset reveal (0.7s, 0.12s stagger). The lore paragraph types out char-by-char at 18ms. Ambient loops run on steps() easing for a choppy retro cadence: torch flicker (1.7s steps(3)), bob (1.2s steps(4)), relic glow pulse (2s steps(4)), and a 1s cursor blink.

Iconography

All icons are hand-built inline SVG pixel art on a 0 0 16 16 viewBox, drawn from <rect>, <polygon>, and <circle> primitives and rendered with image-rendering: pixelated. No icon library. Fills are the three voltages (toxic green, ember, gold) on the indigo surface. Sizes scale by role: 20px in equipment HUD slots, 48px for the walking avatar, 60px for relic altars, 64px for the merchant. Icons are both decorative (avatar, torches, stained glass) and semantic (game-genre relics, equipment items).

Do's and Don'ts

• Do keep everything sharp — border-radius: 0, with .step8 as the only permitted "soft" corner.
• Do pair every raised surface with a 4px border and a hard offset shadow.
• Do stick to the four-color world: indigo surfaces + gold/ember/toxic.
• Do use steps() easing on ambient loops and image-rendering: pixelated on all raster/SVG/video.
• Don't introduce blur shadows, gradients-as-fills (the vignette/dither are the only background textures), or any non-pixel typeface.
• Don't scroll vertically — the navigation metaphor is a horizontal corridor.
• Don't mix the type roles: Pixelify for display, Silkscreen for labels, VT323 for body.

Known Gaps

• Display fontSize is expressed as a clamp() approximation of the responsive Tailwind step range (text-4xl through text-9xl); individual headings use discrete steps, not a true clamp.
• text-muted and body reuse base hexes at fractional Tailwind opacity (/70, /60, /40); the tokens record the base color, not each opacity.
• Pillar images, stained-glass panels, and relic videos are external Pexels assets recolored via CSS filters (brightness/sepia/hue-rotate/saturate); exact rendered tints depend on the source media.