## Overview
A 1960s comic book splash page. Newsprint cream canvas, flat ink-black outlines, primary-color blocks, and halftone dot patterns lifted from mid-century pop art. Treats chicken nuggets like Issue #001 of the most exciting series on the rack. Headlines stack like cover lines, products are framed as comic plates with reference numbers, and tilted action bursts ("ZAP!", "ZERO PREP!") punctuate the page wherever a flat layout needs a kick.
## Colors
- **Newsprint cream** (`#FAF3E2`): Page itself — warm off-white that reads as printed pulp paper.
- **Ink black** (`#0E0E10`): Structural color. Every outline, panel border, body of text, divider. Behaves like the skeleton of the layout.
- **Hero red** (`#EF2B2D`): Brand wordmark, primary CTA, action bursts, accent underlines.
- **Comic blue** (`#1B4FE0`): Secondary panel fills, link accents.
- **Sun yellow** (`#FFD23F`): Action burst stickers, button hovers, halftone dot patterns, footer.
- **Princess pink** (`#FF7BAA`): Single wink — only inside the Princess card.
Colors are always flat fills, never gradients, never blended. Hierarchy comes from area and contrast, the way a comic press would lay it down.
## Typography
- **Headline Font**: Inter Black (900) — always uppercase at display sizes (56–128px), tracking tight, leading 0.9 so lines stack like an inked block
- **Body Font**: Inter (400–600) — sentence case, standard tracking, 16–18px with 1.5 line-height
- **Label Font**: Space Mono — uppercase, 0.1em tracking, archival contexts only (issue numbers, SKUs, footer)
- **Burst Font**: Bubblegum Sans — exclusively inside tilted yellow/red sticker shapes ("POW!", "NEW!"), 14–32px
Italics only on the accent word inside a hero headline — never body.
## Elevation
Zero shadows. Depth is created through (a) the contrast between flat color blocks, (b) the thickness of black borders (2px / 3px / 4px minimum), and (c) tilted action bursts that overlap section edges to break the grid.
## Components
- **Buttons**: Comic-book stickers. Primary is a hero-red pill with a 3px ink-black border and a hard 2px translateY shift on hover (no easing softness — the snap is the point). Secondary inverts: cream fill, 3px black border, hover flips to sun yellow. Tertiary nav links gain a 4px sun-yellow underline on hover. Transitions are 150ms `ease-out`, never longer.
- **Cards**: Every container is a comic panel — 3px ink-black borders against flat color fills (red, blue, yellow, cream). Header carries an "ISSUE #" tag in Space Mono, title in Inter Black 32px, character chip in the bottom-left.
- **Halftone patterns**: Flat radial-gradient backgrounds for printed-paper texture — ink-black on color or yellow on cream, never the reverse.
- **Action bursts**: Tilted irregular star shapes filled with sun yellow or hero red, outlined in 3px ink-black. Maximum two per section.
- **Inputs**: Cream fill, 3px ink-black border, square corners. Labels in Space Mono uppercase 11px, flush above the field. On focus, label flips to hero red — no focus rings, no shadows.
## Do's and Don'ts
- Do build everything from rectangles, thick borders, and flat color fills.
- Do use minimum 2px borders — most structural strokes sit at 3–4px.
- Do let action bursts break out of containers and overlap section edges.
- Do snap transitions hard — comic moments don't fade, they happen.
- Don't gradient or blend any color.
- Don't use partial-radius rounding (`rounded-md`, `rounded-lg`) — corners are pill or perfectly square.
- Don't lowercase a hero headline — display type is always UPPER.
- Don't use Bubblegum Sans for actual content — it lives only inside burst stickers.