name: groove-dist-design
version: alpha
description: >
  GROOVE/DIST is an editorial, print-shop record-label storefront rendered on a
  warm bone paper surface (`#F2ECE0`) ruled everywhere with hard 2px ink
  hairlines (`#13110E`). Its voltage is a tangerine accent (`#FF5417`) backed by
  an ultramarine secondary (`#1B34D8`) and a flax yellow (`#E8B53A`) reserved for
  big revenue numbers. The signature moves are a spinning vinyl deck with an
  animated tonearm and orbit ring, a velocity-reactive ticker marquee, per-char
  kinetic headline reveals, and a sticky scroll-scrubbed revenue counter. Type is
  a three-face system: Bricolage Grotesque for display, Hanken Grotesque for body,
  and Major Mono Display for all numerics/meta. Geometry is uniformly sharp — zero
  corner radius on every rectangular surface, with circles reserved for the disc,
  badges, and play buttons.
colors:
  # Brand / Accent
  tangerine: '#FF5417'    # primary voltage — buy button, active track, accents, selection, chart line
  ultramarine: '#1B34D8'  # secondary — tiles, LIVE badge, payout accent, waveforms, totals
  flax: '#E8B53A'         # tertiary — big revenue stat number only
  # Surface
  bone: '#F2ECE0'         # page background, inverse text on ink panels
  paper: '#E3D9C4'        # declared deeper paper tone (defined; unused in markup)
  ink: '#13110E'          # near-black — text, 2px borders, ink panels (footer/ticker/catalog)
  # Text
  text-body: '#13110E'    # body/heading text on bone
  text-muted: '#6E665A'   # mist — eyebrows, meta, secondary labels
  # Hairlines / Tints
  hairline-ink: 'rgba(19,17,14,0.13)'    # 1px row dividers on bone
  hairline-mist: 'rgba(110,102,90,0.35)' # stat-row dividers
  hairline-bone: 'rgba(242,236,224,0.3)' # dividers on ink panels
  # Gradient
  chart-fill: 'linear-gradient(#FF5417 0.45 → 0)'  # SVG area fill under revenue line
typography:
  display:
    fontFamily: "'Bricolage Grotesque', 'Hanken Grotesque', sans-serif"
    fontSize: clamp(56px, 11vw, 168px)
    fontWeight: 800
    lineHeight: 0.84
    letterSpacing: -0.035em
  body:
    fontFamily: "'Hanken Grotesque', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'Major Mono Display', ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    textTransform: lowercase
  eyebrow:
    fontFamily: "'Hanken Grotesque', system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.28em
    textTransform: uppercase
rounded:                  # geometry is overwhelmingly sharp
  none: 0px
  full: 9999px            # disc, dot-badge, play buttons, orbit ring (circles only)
spacing:                  # base unit 4px; recurring multiples below
  xs: 4px
  sm: 8px
  md: 14px
  lg: 18px
  xl: 32px
  xxl: 56px
components:
  buyButton:
    backgroundColor: '{colors.tangerine}'
    textColor: '{colors.bone}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '20px 26px'
    border: '0; right 2px solid {colors.ink}'
    note: 'fontWeight 700, 13px, letterSpacing .06em; hover → ink bg / tangerine text. Label "↓ BUY DIGITAL · $12"'
  formatButton:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '20px 18px'
    border: 'right 2px solid {colors.ink}'
    note: '12px mono; hover → ink bg / bone text. Labels FLAC / WAV / MP3·320 / AIFF'
  tile:
    backgroundColor: '{colors.ultramarine}'
    textColor: '{colors.bone}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '16px'
    note: 'bento card; hover scales 1.04 with 2px tangerine outline, siblings dim to .55'
  payoutCell:
    backgroundColor: '{colors.bone}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '18px 16px'
    border: '2px solid {colors.ink} grid, 2px right dividers'
    note: 'plabel 10px uppercase mist; pval 26px mono; .accent → ultramarine'
  track:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '16px 28px'
    border: 'bottom 1px {colors.hairline-ink}'
    note: 'active row → tangerine fill / bone text; play button circle 36px 2px ink border'
  liveBadge:
    backgroundColor: '{colors.ultramarine}'
    textColor: '{colors.bone}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '3px 9px'
    note: 'fontWeight 600; label "● LIVE"'
  ticker:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.bone}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '12px 0'
    note: '21px Bricolage 600; <b> highlights in tangerine; velocity-reactive scroll'
  playButton:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.full}'
    padding: '36px circle'
    border: '2px solid {colors.ink}'
motion:
  disc-spin: 'spin360 — rotate 360deg, 8s linear infinite (vinyl disc)'
  headline-reveal: 'per-char clip-path inset + translateY + opacity, .7s cubic-bezier(.16,1,.3,1), 35ms stagger'
  track-enter: 'translateY(16px)→0 + opacity, .6s ease, 45ms stagger on scroll-in'
  tile-enter: 'translateY(24px)→0 + opacity, .7s ease, 70ms stagger on scroll-in'
  revenue-counter: 'scroll-scrubbed — sticky 240vh pin scrubs net-earnings count-up + SVG clip reveal + dot tracking'
  rev-head-blur: 'filter blur(14px)→0 + opacity, .9s on scroll-in'
  ticker-velocity: 'rAF marquee drift (.6px base) boosted by scroll velocity register with .85 decay'
  foot-rule: 'scaleX(0)→1, 1s on scroll-in (tangerine rule)'
  hover-transitions: 'color/background .2–.35s cubic-bezier(.16,1,.3,1)'
icons:
  library: inline glyphs / unicode (no icon font)
  style: 'typographic — ◉ ● ▶ ❚❚ ↓ ↗ ↗ arrows, ◇ diamond, hand-built CSS tonearm & orbit'
  sizes: { sm: 10px, md: 13px, lg: 22px }
  color: '{colors.ink}'

GROOVE/DIST

groove-dist-design · alpha

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

Overview

GROOVE/DIST is the storefront for a fictional independent record co-op, styled like a risograph print job or a record-pressing-plant spec sheet. The whole page sits on a warm bone paper (#F2ECE0) and is ruled into hard panels by ubiquitous 2px ink hairlines (#13110E) — no card lives without a sharp border, and nothing is rounded except true circles. The voltage is a single hot tangerine (#FF5417) used for the buy button, the active track row, selection, the chart line, and every emphatic <b>; an ultramarine (#1B34D8) carries the catalog tiles, the LIVE badge, payout accents, and waveforms; a flax yellow (#E8B53A) is held back exclusively for the giant revenue number. Dark inverse panels (footer, ticker, catalog) flip to ink backgrounds with bone text. The type story is three faces: Bricolage Grotesque at heavy 800 for the kinetic headline and section heads, Hanken Grotesque for body, and Major Mono Display (lowercase) for every catalog id, timecode, duration, and stat — giving the page its technical, machine-printed feel. Signature moves: a spinning vinyl disc with a static CSS tonearm and dashed orbit ring, a velocity-reactive ticker marquee, a per-character headline reveal, and a sticky scroll-scrubbed revenue ledger that counts up as you scroll.

Colors

Brand / Accent. tangerine #FF5417 is the primary voltage — buy button fill, active track row, ::selection, the revenue chart stroke/area, the footer rule, and inline <b> highlights in the ticker. ultramarine #1B34D8 is the secondary — catalog tile fill, the ● LIVE badge, payout .accent, ledger positives, fee total, and the focus outline. flax #E8B53A appears only as the .bigstat revenue figure and its delta.

Surface. bone #F2ECE0 is the page background and the inverse text color on ink panels. ink #13110E is the near-black used for all text on bone, every 2px border, and the dark panels (footer, ticker, catalog, vinyl-wrap, rev-stat). paper #E3D9C4 is declared in :root but not referenced in the markup.

Text. Body and headings render in ink; mist #6E665A is the muted tone for eyebrows, meta rows, plabels, and secondary stat text.

Hairlines / tints. Row dividers use rgba(19,17,14,0.13) on bone tracks and rgba(19,17,14,0.12) in the ledger; stat rows use rgba(110,102,90,0.35); dividers on ink panels use rgba(242,236,224,0.3) and grid overlays use bone at 0.04–0.06 opacity.

Gradient. The only gradient is the revenue chart area fill — a vertical #FF5417 ramp from 0.45 to 0 opacity beneath the line. A faint radial dot grain (radial-gradient(ink .6px) at 5% opacity) textures the hero.

Typography

Three Google Fonts loaded via one css2 @import: Bricolage Grotesque (opsz 12–96, weights 600/700/800), Hanken Grotesque (400/500/600/700), and Major Mono Display. Bricolage is the display face (with ss01 stylistic set); Hanken is the body workhorse; Major Mono Display is forced lowercase and used for all numerics, ids, timecodes, and technical meta.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56px,11vw,168px)	800	0.84	-0.035em	Hero headline (per-char reveal)
section-head	clamp(34–68px)	800	0.92–0.95	-0.02em	Tracklist / Catalog / Revenue heads
ticker	21px	600/700	—	0.01em	Marquee segments (Bricolage)
body	16px	400	1.6	—	Paragraphs (Hanken)
hero-body	clamp(15px,1.2vw,17px)	400	1.65	—	Hero lede, 54ch
artist	clamp(18px,2vw,24px)	500	—	—	Artist name
mono / bigstat	13px / clamp(40–66px)	400	0.95–1	—	Ids, durations, stats (Major Mono)
eyebrow	11px	400	—	0.28em	Uppercase eyebrows
meta	10–11px	400	—	0.04–0.12em	Uppercase meta / table heads

Layout

Base spacing unit is 4px; recurring values are 8 / 12 / 14 / 16 / 18 / 24 / 32 / 56 px. Content is centered at max-width: 1440px with 32px side padding (18px on mobile). The page is a vertical stack of full-bleed sections each closed by a 2px ink bottom border: top bar → ticker marquee → hero → tracklist → catalog → revenue → footer. The hero is a 7fr 5fr grid (headline + payout/CTA left, vinyl deck right) with a giant rotated 018 registration numeral bleeding off the right edge at 12% opacity and corner crop marks. The tracklist is a 3fr 9fr sticky-split (sticky side panel + scrolling rows in a 5-column data grid). The catalog is a 4-column bento with big (2×2) and tall (1×2) spans on an ink panel. Revenue is a 5fr 4fr 3fr ledger grid inside a sticky 240vh scroll pin. Whitespace is dense and editorial — everything butts against rules rather than floating.

Elevation & Depth

This is a flat, border-driven system — depth comes from 2px ink hairlines and inverse panels, not shadows. The only real shadow is box-shadow: 0 0 0 2px bone ringing the vinyl disc (a hard outline, not a soft drop). Dark panels (footer / ticker / catalog / vinyl / rev-stat) recede by inverting to ink with bone text; grid-line overlays at 4–6% opacity add subtle texture. Hover lift on catalog tiles is faux-3D via scale(1.04) + a 2px tangerine outline while siblings dim, with no shadow.

Shapes

Radius is essentially zero. Every rectangular surface — buttons, tiles, panels, cells, badges, bars — has square corners (rounded.none). The only curves are genuine circles set to border-radius: 50% (rounded.full): the spinning disc and its label, the dot-badge, the tonearm pivot, orbit ring, and the 36px play buttons. A rotated 14px square .diamond and ◇/◉ glyphs add geometric punctuation.

Components

• buyButton — tangerine fill, bone text, 0 radius, 20px 26px, 2px ink right border; hover inverts to ink/tangerine. Label "↓ BUY DIGITAL · $12".
• formatButton — transparent, mono 12px, 2px ink right divider, hover ink/bone. Labels FLAC / WAV / MP3·320 / AIFF.
• tile — ultramarine fill, bone text, 16px pad, square; hover scale(1.04) + 2px tangerine outline, dims siblings to .55. big/tall grid spans.
• payoutCell — 4-up grid inside a 2px ink box; mono 26px values, mist 10px uppercase labels, .accent value in ultramarine.
• track row — 5-col grid, 1px ink-tint divider; active row flips to tangerine fill / bone text with an inverted bone play button.
• liveBadge — ultramarine fill, bone text, 3px 9px, "● LIVE".
• ticker — ink panel, bone text, 21px Bricolage; tangerine <b> accents.
• playButton — 36px circle, 2px ink border, transparent; ▶ / ❚❚ glyph.
• rev-stat / fee / ledger cells — bordered grid cells; rev-stat is an ink panel with flax bigstat; ledger rows in mono with ultramarine positives.

Motion

Motion is plentiful and JS-driven. The vinyl disc spins continuously (spin360, 8s linear). The hero headline reveals per character via clip-path + translate + opacity with a 35ms stagger on cubic-bezier(.16,1,.3,1). Track rows and catalog tiles slide up with staggered entrances on IntersectionObserver scroll-in (45ms / 70ms). The ticker marquee drifts via a continuous rAF loop whose speed is boosted by scroll velocity (register decays at 0.85). The revenue section is a sticky 240vh scroll pin that scrubs a net-earnings count-up, an SVG clip-path reveal, and a tracking dot; on mobile/reduced it runs once. The section head un-blurs (blur(14px)→0), the tracklist index parallaxes, and the footer rule wipes in with scaleX. A reduce flag is authored but hardcoded false.

Iconography

No icon font — all icons are typographic unicode glyphs and hand-built CSS shapes. Markers include ◉ (ticker bullets), ● (live/now-playing dots), ▶ / ❚❚ (play/pause), ↓ ↗ ↑ arrows, ◇/diamond, and ─ rules. The tonearm (pivot + bar + head), orbit ring with timecode marks, and crop marks are built from positioned divs and borders. Glyphs inherit text color (ink on bone, bone on dark, tangerine for emphasis) and run 10–22px.

Do's and Don'ts

• Do rule everything with 2px ink hairlines and keep rectangular corners sharp.
• Do reserve tangerine for one hot accent, ultramarine for structure/UI, and flax only for the big revenue figure.
• Do set all ids, durations, and stats in Major Mono Display (lowercase).
• Do invert to ink panels with bone text for dark sections.
• Don't add rounded corners, soft drop shadows, or gradients beyond the chart fill.
• Don't introduce new hues or let flax leak outside the revenue stat.
• Don't mix display and body faces — Bricolage for headlines, Hanken for prose.
• Don't soften the dense, edge-to-edge editorial grid into floating cards.

Known Gaps

• paper #E3D9C4 is declared in :root but never used in the markup; included for completeness.
• The chart-fill gradient is an SVG linearGradient (tangerine 0.45→0), expressed here in shorthand.
• The disc spin runs even though a reduce flag exists; it is hardcoded false, so reduced-motion is effectively off.
• Spacing scale is inferred from recurring padding/margin values (4px base); no formal scale is declared in the source.
• Icon sizes are approximated from glyph font-sizes across components.