name: waxwonder-design
version: alpha
description: >
  A photocopied-zine record-shop layout printed on warm newsprint (#D8D4CC) in
  near-black ink (#1A1916), with a vermilion rubber-stamp red (#C23A2B) and a
  faded teal (#3E7A86) as the two off-register "voltages." The signature moves
  are CMYK misregistration ghosts behind headlines, taped-down paper scraps with
  hard offset shadows, a full-page photocopy grain plus halftone-dot overlay,
  torn paper edges, duotone-graded photos, and vinyl discs that eject and spin
  on hover. Type is a three-face print kit: Archivo Black for headlines, Tinos
  serif for body, Courier Prime mono for captions and tags. Geometry is
  collage-grade — everything rotated a degree or two, nothing on a grid.
colors:
  # Surface
  news: '#D8D4CC'         # page surface — warm newsprint; .bg-news / dark-section text
  surface-crate: '#cfcabf'  # crate section band background
  surface-bin: '#bdae8e'    # inner crate bin (tan craft board)
  scrap: '#efece4'        # taped scrap paper fill (.scrap)
  scrap-white: '#f4f2ec'  # brighter scrap / flyer / input fill (.scrap-white)
  # Text / Ink
  ink: '#1A1916'          # primary ink — headings, body, borders, dark blocks (.ink)
  # Brand / Voltages
  stamp: '#C23A2B'        # rubber-stamp red — accent text, badges, offset shadows (.stamp)
  mis: '#3E7A86'          # misregistration teal — secondary accent (.mis)
  stamp-deep: '#a32f22'   # darker red, disc-label outer ring
  # Hardware / Hairlines
  staple: '#3a3833'       # staple metal; also disc highlight ring
  tape: 'rgba(214,206,176,.55)'  # translucent tape strips
  # Disc
  disc-core: '#252420'    # vinyl groove ring tone

Wax & Wonder

waxwonder-design · alpha

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

Overview

Wax & Wonder is a record shop rendered as a hand-pasted photocopied zine. The page is warm newsprint #D8D4CC printed in near-black ink #1A1916, lit by two deliberately off-register inks: a rubber-stamp vermilion #C23A2B and a faded teal #3E7A86. The whole surface sits under two fixed overlays — an SVG feTurbulence photocopy grain (mix-blend-mode:multiply, opacity .5) and a radial-gradient halftone dot screen (6px grid, opacity .25) — so every pixel reads as a third-generation copy. The hallmark move is CMYK misregistration: the .ghost headlines stamp a red copy down-left and a teal copy up-right behind the ink word, and photos are pushed to harsh duotone via grayscale(1) contrast(1.45). Content is collage: taped paper scraps (.scrap, .scrap-white) with hard offset block shadows like 6px 7px 0 rgba(26,25,22,.55), torn-edge clip-path cards, staples and translucent tape strips pinning things down, and nearly every element rotated a degree or two off-axis. The type kit is three printer's faces — Archivo Black headlines, Tinos serif body, Courier Prime mono captions. GSAP drives a spinning hero vinyl, a scatter-in entrance for flyers, and the signature interaction: hovering a crate sleeve ejects the record disc sideways and spins it at 33⅓.

Colors

Surface. The page is news #D8D4CC, a warm newsprint gray, applied via .bg-news. Two section bands deepen it: the crate section uses surface-crate #cfcabf with the inner bin in surface-bin #bdae8e (tan craft board), and the "Just Pulled" section flips fully dark to ink #1A1916. Paper scraps come in two tones: scrap #efece4 (.scrap) and the brighter scrap-white #f4f2ec (.scrap-white), the latter reused as the email input fill.

Ink / Text. Everything is set in ink #1A1916 — headings, body, borders (border-[#1A1916]), and the solid dark blocks (.boxhead, the header lockup, buttons). On dark blocks the text flips to news #D8D4CC.

Brand / Voltages. stamp #C23A2B is the rubber-stamp red: accent words (.stamp), the tagline pill, badges, the "C — 45s" chip, link underlines, and notably the colored offset shadows on the primary button (shadow-[6px_7px_0_#C23A2B]). mis #3E7A86 is the misregistration teal: the "&" in the lockup, the "Liner Notes" nav chip, the blockquote, and the "MAILER" ghost. stamp-deep #a32f22 forms the disc-label's outer ring.

Hardware / Hairlines. Staples are staple #3a3833; tape strips are translucent tape rgba(214,206,176,.55) with dashed side edges. Block shadows are not colored shadows but hard opaque offsets in rgba(26,25,22,.4–.55).

Typography

Three Google Fonts faces, all open-source, imported together: Archivo Black (display, single weight 900-feel), Tinos (a Times-metric serif for body, with italics), and Courier Prime (typewriter mono for captions, tags, and fine print). Headlines are uppercase with tracking-tighter and very tight leading (leading-[.82]–[.85]).

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	3rem→8rem (text-5xl→8xl)	400 (Archivo Black)	.82	tighter	Header lockup "WAX & WONDER"
display-xl	2.25rem→4.5rem (text-4xl→7xl)	400	.85	tighter	Hero "Crates Full / Of Ghosts / On Wax"
display-lg	1.875rem→3.75rem (text-3xl→6xl)	400	normal	tighter	Section heads (THE CRATE, JUST PULLED)
display-sm	1.25rem→1.875rem	400	normal	tighter	Flyer/badge heads (Diggers Only, Rare As Hell)
body	1rem→1.125rem (base/lg)	400	snug	—	Tinos paragraph copy, address
mono-cap	11px–14px (text-[11px]/sm)	700	normal/wide	wide	Courier Prime captions, tags, prices, fine print

Layout

No grid — the system is collage. Base spacing rounds to a 4px unit but is used loosely; section padding is px-4 md:px-10 with py-16–py-24. The page is a vertical stack of full-bleed sections separated by border-y-4 border-[#1A1916] rules: a header lockup, an absolute-positioned hero (rotated flyers, a spinning disc bleeding off the right edge, scattered stamps), a horizontally scrolling "Crate" of record cards inside a bordered bin, a torn-edge "Liner Notes" zine spread (two-column md:grid-cols-2), a dark "Just Pulled" free-scatter of absolutely-placed sleeves, and a torn-edge footer (md:grid-cols-3, max-w-6xl mx-auto). Content blocks cap around max-w-3xl/max-w-6xl. The signature structural move is rotation: header lockup -rotate-1, nav chips rotate-2/-rotate-3, scraps and badges ±1–14deg, flyers tilted per element. Whitespace is busy and overlapping by design.

Elevation & Depth

Depth is print-physical, not soft. Cards and chips carry hard opaque offset shadows — no blur — e.g. box-shadow:6px 7px 0 rgba(26,25,22,.55) on .scrap, 5px 6px 0 rgba(26,25,22,.5) on .scrap-white, 8px 9px 0 rgba(26,25,22,.45) on the header lockup. The primary button uses a colored offset 6px 7px 0 #C23A2B that tightens to 3px 4px 0 on hover (the card "lifts" into the page). The crate bin adds an inset 0 0 60px rgba(26,25,22,.25) to look recessed. Two fixed full-page overlays (#grain-overlay, #halftone-overlay) multiply atop everything for the photocopy texture. Staples and tape add literal hardware shadows (1px 1px 0, 0 1px 2px).

Shapes

Mostly sharp rectangles — this is cut-and-paste paper, so radius is rare. The exceptions are fully round: vinyl discs and disc labels are rounded-full, as is the hero disc. The expressive shape move is the torn edge .torn-b, an irregular clip-path polygon used on the "Diggers Only" flyer and the zine and footer panels, plus per-element rotation that keeps every rectangle slightly askew.

Components

• Header lockup — fill ink #1A1916, text news #D8D4CC, Archivo Black uppercase 5xl→8xl, -rotate-1, shadow 8px 9px 0 rgba(26,25,22,.45), taped at the corners; "WAX"/"WONDER" wrapped in .ghost for the CMYK split.
• Tagline pill — fill stamp #C23A2B, text news, Courier Prime 11px–sm, px-2 py-1, -rotate-[.5deg]. Reads "REISSUE JAZZ // RARE SOUL // 45s & LPs".
• Nav chip — .scrap fill (#efece4), Courier Prime bold uppercase sm, px-4 py-2, rotated, hover flips rotation. One teal variant (#3E7A86 fill, news text, 4px 5px 0 shadow) for "Liner Notes".
• Scrap / flyer panel — scrap-white #f4f2ec, no radius, p-2–p-10, hard offset shadow, often torn-b and pinned with .tape/.staple.
• Record card — sleeve is a scrap-white p-2 frame around a duotone image (w-52, h-48), with a .disc vinyl tucked behind (z-0) that ejects on hover; caption is a .scrap chip, Courier Prime 11px, price in stamp bold.
• Primary button — fill ink #1A1916, text news, Archivo Black uppercase, px-7 py-4, colored offset shadow 6px 7px 0 #C23A2B → 3px 4px 0 on hover. Labels: "Start Digging ↓", "Stick It On →".
• Boxhead — inline ink block, news text, padding:.05em .25em; the knocked-out white-on-black headline word.
• Email input — .tape-input fill #f4f2ec, border-2 border-[#1A1916], Courier Prime sm, px-3 py-2, -rotate-1, outline-hidden.
• Badge / stamp — bordered call-outs, e.g. border-4 border-[#C23A2B] with mix-blend-mode:multiply ("Rare As Hell"), or border-2 border-[#1A1916] chips ("play graded VG+").

Motion

GSAP 3 + ScrollTrigger, all gated behind prefers-reduced-motion.

• Hero disc — infinite rotation:360 over 6s, linear ease.
• Flyer entrance — .flyer scatter-in: opacity 0→1, y:40, alternating rotation ±12, scale .9→1, duration .7, stagger .08, ease back.out(1.4).
• Pulled sleeves — each .pull springs in (scale .6→1, rotation ±20, back.out(1.5)) when "#pulled" hits 70% viewport.
• Crate hover (signature) — a paused timeline ejects the disc x:130, y:-18 over .55s (power2.out); on complete it spins rotation +=360 infinitely at 1.8s/rev; mouseleave reverses and snaps rotation back.

Iconography

No icon library. The only glyphs are inline Unicode arrows (↓, →) inside button labels and →→/← typographic marks in mono helper text. Visual "icons" are real photos (vinyl sleeves, crate digging, needle macro), all run through the .duo duotone filter. Color follows the ink/voltage palette.

Do's and Don'ts

• Do keep everything slightly rotated and overlapping — the collage chaos is the brand.
• Do use hard, blur-free offset shadows; the red #C23A2B offset is reserved for primary buttons.
• Do keep the grain + halftone overlays on; they unify the photocopy look.
• Do wrap headlines in .ghost for the red/teal misregistration split and run all photos through .duo.
• Don't introduce rounded corners except on discs/labels, or soft/blurred drop shadows.
• Don't add a fourth ink or use gradients beyond the radial disc/label fills — the system is two-voltage CMYK.
• Don't straighten the layout onto a clean grid or use crisp full-color photography.

Known Gaps

• The photocopy grain is an inline SVG feTurbulence data-URI; its exact noise is procedural, described qualitatively.
• Archivo Black has a single weight; the "900-feel" descriptor is qualitative, not a numeric font-weight.
• Responsive type sizes are Tailwind step ranges (e.g. text-5xl→8xl); the table lists the rem endpoints.
• Spacing has no formal scale in the markup; the 4px base unit is inferred from the Tailwind utilities used.