name: platter-design
version: alpha
description: >
  The Platter is a brutalist music-criticism zine: a near-black jet surface
  (#0D0D0D) carrying bone off-white text (#F5F3EE), wired with two electric
  voltages — acid lime (#C6FF00) and coral (#FF6B6B). The signature move is a
  giant spinning vinyl record that doubles as a radial navigation dial, paired
  with a hard 2px bone/jet grid that boxes every section. Typography is loud and
  condensed: Anton display, Archivo Black for stamped labels, PT Serif (often
  italic) for body criticism, and Space Mono for tracked-out metadata. Hard
  text-shadows, a lime kinetic marquee, and edge-to-edge color blocks give it a
  printed-poster, no-mercy energy.
colors:
  # Surface
  jet: '#0D0D0D'        # primary page surface, dark sections, ink/text-on-color
  bone: '#F5F3EE'       # off-white text on jet, hairline borders
  # Brand voltages
  lime: '#C6FF00'       # primary accent: nav, CTA fill, highlights, score chips
  coral: '#FF6B6B'      # secondary accent: featured section fill, hover state
  # Section fills
  panel-grey: '#1a1a1a' # the vinyl-pop disc behind crate cards
  hairline-dark: '#333333' # border on the vinyl-pop disc
  # Text (opacity variants of bone via /xx utilities)
  bone-80: 'rgba(245,243,238,0.80)' # lead paragraph body
  bone-70: 'rgba(245,243,238,0.70)' # footer prose
  bone-60: 'rgba(245,243,238,0.60)' # mono metadata, captions
  bone-50: 'rgba(245,243,238,0.50)' # footer legal line
typography:
  display:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(64px, 12vw, 150px)
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.01em
  black:
    fontFamily: "'Archivo Black', sans-serif"
    fontSize: 14px
    fontWeight: 400
  serif:
    fontFamily: "'PT Serif', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  serif-quote:
    fontFamily: "'PT Serif', serif"
    fontSize: 20px
    fontWeight: 400
    fontStyle: italic
  mono:
    fontFamily: "'Space Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:
  none: 0px      # default: all panels, borders, cards, chips are square
  full: 9999px   # only the vinyl records and disc dots
spacing:          # base unit 4px; section padding steps at 24px / 48px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  xxl: 96px
components:
  cta-button:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.jet}'
    typography: '{typography.black}'
    rounded: '{rounded.none}'
    padding: '16px 28px'
    hoverBackgroundColor: '{colors.coral}'
    # label: "DROP THE NEEDLE ↓"
  score-chip:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.jet}'
    typography: '{typography.black}'
    rounded: '{rounded.none}'
    padding: '4px 8px'
    # absolute top-left of crate sleeve, e.g. "8.1"
  crate-card:
    backgroundColor: 'transparent'
    border: '2px solid {colors.bone}'   # on the sleeve image only
    rounded: '{rounded.none}'
    titleTypography: '{typography.display}'
    titleEffect: 'text-shadow 5px 5px 0 {colors.jet}'
    metaTypography: '{typography.mono}'
  marquee:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.jet}'
    typography: '{typography.display}'
    borderBottom: '2px solid {colors.jet}'
    padding: '16px 0'
  tracklist-table:
    textColor: '{colors.jet}'
    typography: '{typography.mono}'
    headerBorder: '2px solid {colors.jet}'
    rowBorder: '1px solid {colors.jet}'
  nav-dial:
    centerBackgroundColor: '{colors.lime}'
    centerTextColor: '{colors.jet}'
    centerTypography: '{typography.black}'
    linkTypography: '{typography.mono}'
    linkColor: '{colors.lime}'
    linkHoverColor: '{colors.bone}'
motion:
  vinyl-spin: 'spin360 — rotate 360deg, 12s linear infinite (hero + footer records)'
  marquee: 'translateX 0 to -50%, 28s linear infinite (lime now-spinning rail)'
  hero-headline: 'GSAP from y:120 opacity:0, 0.9s power4.out, stagger 0.12, delay 0.2'
  reveal-title: 'GSAP from x:-80 opacity:0, 0.8s power3.out on ScrollTrigger top 85%'
  crate-rise: 'GSAP from y:90 opacity:0, 0.7s power3.out on ScrollTrigger top 90%'
  vinyl-pop: 'crate hover: disc translateX 58% rotate 40deg, 0.45s cubic-bezier(.2,.8,.2,1)'
  sleeve-zoom: 'crate hover: image scale 1.03, 0.5s ease'
icons:
  library: Tabler (tabler-icons-webfont)
  style: outline
  sizes: { md: 24px, lg: 48px }
  color: '{colors.jet}'
  usage: 'ti-disc only, decorative, inside the lime marquee'

The Platter

platter-design · alpha

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

Overview

The Platter is a music-criticism blog built like a riso-printed punk zine. The whole site sits on a jet near-black surface (#0D0D0D) with bone off-white type (#F5F3EE), and every section is hard-boxed by 2px hairline borders that snap between bone-on-jet and jet-on-color. Two electric voltages run through it: acid lime (#C6FF00) drives navigation, the CTA, score chips and highlights, while coral (#FF6B6B) flips the featured-review section into a full-bleed warm block and serves as the CTA hover. The signature move is a massive spinning vinyl record in the hero whose lime label center reads THE PLATTER and whose ring carries four radial nav links (REVIEWS / SCENES / FEATURES / ARCHIVE) — navigation as a turntable dial. Type is loud and condensed: Anton for huge display headlines (line-height 0.82, slight negative tracking), Archivo Black for stamped labels and buttons, PT Serif (frequently italic) for the actual criticism, and Space Mono in 0.25em uppercase tracking for all metadata. A lime kinetic "NOW SPINNING" marquee, hard 5px text-shadows on crate titles, an enormous mix-blend "9.4" score, and GSAP scroll reveals complete the printed-poster, no-mercy character.

Colors

Surface. jet #0D0D0D is the primary page background (.jet) and also the ink color for text and chips set on colored sections (.text-jet). bone #F5F3EE is the off-white text on jet (.bone) and the color of nearly every 2px hairline border (border-[#F5F3EE]).

Brand voltages. lime #C6FF00 is the dominant accent — nav links, the hero CTA fill, the marquee rail background, headline highlight words, the crate score chips, the lead-paragraph left border, and footer link hovers/headers. coral #FF6B6B is the secondary accent: it fills the entire Featured Critique section (.bg-coral) and is the CTA hover color (hover:bg-[#FF6B6B]); it also alternates with lime on the crate vinyl-pop center dots.

Section / structural fills. panel-grey #1a1a1a is the round vinyl disc that slides out from behind crate cards, ringed by hairline-dark #333 and centered with a lime/coral dot.

Text opacities. Body and metadata use bone at reduced opacity via Tailwind /xx utilities: bone-80 for the hero lead, bone-70 for footer prose, bone-60 for mono captions and crate metadata, and bone-50 for the footer legal line.

Typography

Four Google Fonts, imported via a single @import (Anton, Archivo Black, PT Serif, Space Mono). All are open-source, so no substitutes are needed. Anton is the condensed display face; Archivo Black is the heavy grotesque used for stamped labels/buttons; PT Serif carries the editorial body and italic pull quotes; Space Mono handles all tracked-out metadata.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp 64→150px	400	0.82	-0.01em	Hero/section/crate headlines, marquee
black	14px (11–18px)	400	tight	—	CTA, score chips, dial label
serif	16px (→20px)	400	1.625	—	Body criticism, footer prose
serif-quote	20px (→24px) italic	400	normal	—	Pull quotes, hero lead, taglines
mono	12px (→14px)	400	normal	0.25em (to 0.3em)	All metadata, nav, captions, table

Layout

Base unit is 4px; section padding steps at 24px (p-6) on mobile up to 48px (md:p-12), with tall vertical rhythm (py-16/py-24). The page is a vertical stack of full-bleed, hard-bordered sections: (1) a split hero — left 2/5 holds the spinning vinyl + radial nav, right 3/5 holds the giant Anton headline, italic lead, and CTA; (2) a lime full-width marquee rail; (3) a two-column coral Featured Critique with album art, review prose, pull quote, and a mono tracklist table, overlaid with a colossal mix-blend-multiply "9.4"; (4) The Record Crate — a 1/2/3 responsive grid of staggered (lg:mt-8/16) crate cards; (5) a footer with a mini spinning vinyl logo and three mono link columns. Hero headlines run to 150px; crate titles overlap their sleeves with a negative -mt-7. Whitespace is generous vertically but the layout is dense and edge-to-edge, framed entirely by 2px rules.

Elevation & Depth

There are no soft drop shadows or glass. Depth comes from three devices: (1) the 2px hard borders that box and separate every section and card; (2) hard offset text-shadows (5px 5px 0 #0D0D0D) on crate titles, giving a stamped/printed relief; and (3) z-index layering of the vinyl-pop disc behind sleeve images plus the mix-blend-multiply giant score numeral. Color blocking (lime/coral fills against jet) carries most of the visual hierarchy.

Shapes

Brutalist and square by default: rounded.none (0px) everywhere — sections, cards, score chips, buttons, the album art, the tracklist. The only curves are fully circular (rounded-full, rounded.full 9999px): the spinning vinyl records, the nav-dial lime center, and the small lime/coral dots inside the dial and crate discs. The contrast of perfect circles against hard rectangles is the whole shape story.

Components

• CTA button — lime fill, jet Archivo Black text, square (0 radius), 16px 28px padding, hover flips to coral. Label: "DROP THE NEEDLE ↓".
• Score chip — lime fill, jet Archivo Black, square, 4px 8px, absolutely positioned top-left over crate sleeves (e.g. "8.1").
• Crate card — transparent; 2px bone border on the sleeve image; Anton title with a 5px hard text-shadow overlapping the sleeve (-mt-7); mono metadata row (artist / genre · date); a panel-grey disc slides out on hover.
• Marquee rail — lime background, jet Anton text, 2px jet bottom border, 16px 0 padding, scrolling "NOW SPINNING ///" with ti-disc icons.
• Tracklist table — jet mono text on coral; 2px jet header rule, 1px jet row rules; columns TRK # / TITLE / BPM/KEY / LEN.
• Nav dial — radial nav over the vinyl: lime center label (Archivo Black, THE / PLATTER), four mono lime links positioned at compass points, hover to bone.

Motion

Two CSS loops run continuously: the vinyl records spin (spin360, 12s linear infinite) and the lime rail marquees (translateX 0→-50%, 28s linear infinite). A defined .vinyl-fast speed-up class (1.1s + blur) exists in CSS but is not wired up — the comment notes "no hover speed-up". GSAP + ScrollTrigger drive entrances: the hero headline lines stagger up (y:120, 0.9s power4.out, 0.12 stagger); .reveal-title blocks slide in from the left (x:-80, 0.8s power3.out at top 85%); crate cards rise (y:90, 0.7s power3.out at top 90%). On crate hover, the disc pops out (translateX 58% rotate 40deg, 0.45s custom bezier) and the sleeve zooms (scale 1.03, 0.5s ease).

Iconography

Tabler icon webfont, outline style. Usage is minimal and decorative: only ti-disc appears, rendered in jet at ~48px inside the lime marquee. No UI icons elsewhere — arrows are inline text glyphs (↓), and dividers are /// text.

Do's and Don'ts

• Do keep every panel square (0 radius) and frame sections with 2px bone/jet hairlines — the grid is the brand.
• Do reserve circles for the vinyl records and dial dots only.
• Do set all metadata in Space Mono with 0.25em+ uppercase tracking.
• Do lean on lime as the primary voltage and coral as the secondary block/hover accent.
• Don't introduce soft drop shadows or glass — depth is borders, hard text-shadows, and color blocking only.
• Don't mix the type roles (Anton for display, Archivo Black for labels, PT Serif for reading, Space Mono for data).
• Don't soften the contrast — the loud jet/lime/coral collisions are the point.

Known Gaps

• The display fontSize is given as clamp(64px,12vw,150px) to summarize the responsive Anton ramp (text-[64px] → lg:text-[150px]); the HTML uses fixed breakpoint sizes rather than a real clamp.
• Bone opacity colors (bone-80/70/60/50) are Tailwind /xx utilities on #F5F3EE; the rgba values are computed equivalents, not literal hex in the HTML.
• Archivo Black is loaded but only weight 400 exists; "weight" is nominal.
• The .vinyl-fast animation class is authored in CSS but never applied.