name: marcy-s-design
version: alpha
description: >
  Marcy's is a hand-painted lunch-counter landing page rendered as a riso-print
  menu board: a warm bone paper surface (#F2EAD8) under a multiply halftone grain
  overlay, set against a poppy-red voltage (#F0431F) and a jade-green secondary
  (#0E8F6E / #0A5E49) with a butter-yellow highlight (#F6C544). Everything is
  framed in hard 2px ink-black hairlines with zero corner radius, hover offset
  "hard shadows" (4px 4px 0 ink), and a 4px misregistration ghost on display
  type. The type story is a three-voice system: Bricolage Grotesque (heavy
  display, italic hand-notes), Hanken Grotesk (body), and Spline Sans Mono
  (kickers, prices, tags, labels — all tracked uppercase). The layout is an
  editorial menu sheet: a scatter-assemble photo mosaic hero, a two-column
  dotted-leader menu spec, a velocity-reactive marquee, a cursor-preview
  regulars list, a live receipt, and a brutalist bento.
colors:
  # Surface
  bone: '#F2EAD8'        # page background (paper); button/dock text; light fills
  bone2: '#E7DBC0'       # dashed "gap" tile fill; secondary paper tone
  # Brand / Voltage
  poppy: '#F0431F'       # primary accent: hero H1, CTAs, logo mark, kickers, badges
  jade: '#0E8F6E'        # secondary: section H2, prices, tile bg, status dot, tags
  jade-deep: '#0A5E49'   # dark sections (marquee, regulars, receipt, footer), body-on-light text
  butter: '#F6C544'      # highlight: price chips, datechip, dark-section accents
  # Text / Ink
  ink: '#181613'         # near-black: body text, all 2px borders, hard shadows
  # Hairlines / Overlays
  hairline-light: 'rgba(242,234,216,.18)'  # bone borders inside dark sections
  jade-tint: 'rgba(14,143,110,.1)'         # special-row hover wash
  dot-leader: 'rgba(24,22,19,.35)'         # dotted price leader on light
typography:
  display:
    fontFamily: "'Bricolage Grotesque', system-ui, sans-serif"
    fontSize: clamp(56px, 8vw, 116px)
    fontWeight: 800
    lineHeight: 0.92
    letterSpacing: -0.02em
  display-italic:
    fontFamily: "'Bricolage Grotesque', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    textTransform: italic
  body:
    fontFamily: "'Hanken Grotesk', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  kicker:
    fontFamily: "'Spline Sans Mono', ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.22em
    textTransform: uppercase
  mono-label:
    fontFamily: "'Spline Sans Mono', ui-monospace, monospace"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 0.14em
    textTransform: uppercase
rounded:                  # essentially zero — brutalist hard corners
  none: '0'
  pill: '999px'           # tags, allergen chips, dock buttons/dock shell, status dot
  full: '50%'             # logo mark, status dot, office thumb, dock category circles
spacing:                  # base unit 4px; common steps observed
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  section: 88px           # .sec vertical padding
components:
  button:
    backgroundColor: '{colors.poppy}'
    textColor: '{colors.bone}'
    typography: '{typography.mono-label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '13px 20px'
    hover: 'translate(-2px,-2px) + box-shadow 4px 4px 0 {colors.ink}'
    # label e.g. "ORDER PICKUP", "REQUEST A QUOTE →"
  ghost-button:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
  price-chip:
    backgroundColor: '{colors.butter}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '2px 8px'
  datechip:
    backgroundColor: '{colors.butter}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '2px solid {colors.ink}'
    padding: '4px 9px'
  tag-pill:
    backgroundColor: 'transparent'
    textColor: '{colors.jade}'
    border: '1.5px solid {colors.jade}'
    rounded: '{rounded.pill}'
    padding: '0 5px'
  tile:
    backgroundColor: '{colors.jade}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    # aspect-ratio 1; img filter contrast(1.05) saturate(.95)
  receipt:
    backgroundColor: '{colors.jade-deep}'
    textColor: '{colors.bone}'
    border: '2px solid {colors.ink}'
    padding: '26px'
    # perforated top/bottom edge via radial-gradient mask
  dock:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.bone}'
    rounded: '{rounded.pill}'
    padding: '8px 10px'
    shadow: '0 18px 40px -12px rgba(0,0,0,.5)'
  bento-cell-big:
    backgroundColor: '{colors.poppy}'
    textColor: '{colors.bone}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '22px'
    hover: 'scale(1.04) + box-shadow 6px 6px 0 {colors.ink}'
motion:
  hero-mosaic-assemble: 'tiles fly in from random offset/rotation, settle to 0; transform .9s, staggered 45ms/tile'
  hero-headline-reveal: 'lines translateY(105%)→0, overflow-clipped; transform .8s ease'
  ghost-misregistration: '::before offset 4px/4px in jade behind display text'
  marquee: 'continuous translateX loop + scroll-velocity boost (base .6px/frame, capped +7)'
  menu-row-scrub: 'clip-path inset(0 100% 0 0)→0, scrubbed by scroll progress through section'
  order-numerals-parallax: 'stroked numerals translateY driven by scroll progress (--ny)'
  heading-entrances: 'anim-skew (skewY 7deg), anim-blur (blur 16px), anim-track (letter-spacing .32em) → settle, .8s'
  reg-item-entrance: 'translateY(24px)+opacity, staggered 90ms via IntersectionObserver'
  reg-cursor-preview: 'fixed 200×250 image follows cursor, scales .92→1; siblings dim to .42'
  bento-entrance: 'cells translateY(24px)→0, staggered 70ms; hover dims non-hovered to .55'
  footer-name: 'blur(14px)+opacity 0 → blur(0) on intersect'
  fstripe: 'scaleX(0)→1 poppy bar, 1s'
  pulse: 'status/live dots opacity 1→.35, 2s / 1.5s infinite'
  grain-parallax: 'fixed grain translateY(scroll*0.06)'
  ease: 'cubic-bezier(.2,.8,.2,1)'
icons:
  library: inline SVG (hand-drawn diner glyphs) + Unicode glyphs (☏ ⏱ ★ ⏱)
  style: outline / stroked
  stroke: 2px
  sizes: { sm: 20px, md: 24px, lg: 34px }
  color: 'currentColor (ink on light, butter/bone on dark)'

Marcy's

marcy-s-design · alpha

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

Overview

Marcy's is a hand-painted lunch counter rendered as a riso-printed menu board. The whole page sits on warm bone paper (--bone #F2EAD8) underneath a fixed halftone grain image at opacity .16 with mix-blend-mode: multiply, giving everything a printed-on-newsprint texture. The voltage is poppy red (--poppy #F0431F) — the hero headline, every CTA, the round logo mark, the mono kickers. Jade green is the steady second voice: --jade #0E8F6E for section titles, prices, and photo-tile fills, with --jade-deep #0A5E49 for the inverted sections (marquee, regulars, receipt, footer) and for muted body text on the bone. Butter yellow (--butter #F6C544) is the highlight that lands on price chips, the datechip, and accents inside dark blocks. The signature moves are all print-shop tricks: a 4px misregistration ghost (a jade duplicate offset behind display text), hard 2px solid --ink hairlines around every frame, zero corner radius, and hover "hard shadows" (4px 4px 0 --ink) instead of soft elevation. Type runs in three voices — Bricolage Grotesque heavy for display (and italic for hand-notes), Hanken Grotesk for body, Spline Sans Mono for every tracked-uppercase label, kicker, tag, and price. Layout is an editorial menu sheet: a scatter-then-assemble photo mosaic hero, a two-column dotted-leader menu, a velocity-reactive marquee, a cursor-preview regulars list, a perforated live receipt, and a brutalist bento.

Colors

Surface. --bone #F2EAD8 is the page paper — also the text color on the poppy buttons and the dark dock, and the light fill on inverted accents. --bone2 #E7DBC0 is the dashed "gap" mosaic tile and a secondary paper tone.

Brand / Voltage. --poppy #F0431F is the primary accent: the hero h1, the .btn fill, the round logo mark, every .kicker, the nav underline, the dock order button and item-count badge, the catering "big" bento cell, and the focus-visible outline. --jade #0E8F6E is the secondary: .sechead h2, special prices, photo-tile backgrounds, the status pulse dot, .row .tag borders, and the order-step stroked numerals. --jade-deep #0A5E49 carries the inverted sections (marquee, regulars, receipt, footer) and doubles as muted body text on bone (.sp-desc, .cat-time, .smsnote).

Highlight. --butter #F6C544 lights up .price/.pr chips, the .datechip, the dark-section titles (.darkcat h3), the regulars price/add accents, and receipt values.

Ink. --ink #181613 is the near-black used for all body text and — crucially — every 2px border and every hard offset shadow. The dock shell is solid ink.

Hairlines / overlays. Inside dark sections, borders and rules are bone at low alpha — rgba(242,234,216,.18 / .25 / .3 / .4). Special rows wash on hover with rgba(14,143,110,.1); the dotted price leader on light is rgba(24,22,19,.35).

Typography

Three Google Fonts, loaded via one fonts.googleapis.com/css2 link: Bricolage Grotesque (opsz 12–96, weights 600/700/800) is the display face — heavy for headlines/numbers, font-style: italic weight 600 for the hand-painted notes. Hanken Grotesk (400/500/600) is the body. Spline Sans Mono (500/700) is the utility/mono voice for every kicker, tag, price, label, and stat — always tracked and usually uppercase. Open-source substitutes are not needed; all three are open Google Fonts.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56px, 8vw, 116px)	800	0.92	-0.02em	hero h1, .disp
section h2	clamp(44px, 6vw, 82px)	800	0.92	—	.sechead h2
cat h3	34px	800	—	—	menu category headings
display-italic	18px	600	—	italic	.handnote, .cat-sub, .ftag
body	16px	400	1.6	—	base body text
kicker	12px	700	0.22em	uppercase	.kicker (poppy)
nav / btn	12px	500–700	—	.08–.14em	nav, .btn, dock
mono-label	10–11px	700	.1–.2em	uppercase	tags, prices, stats, footer
est line	9px	700	0.26em	uppercase	logo "EST · 1958"

Layout

Base unit is 4px; common steps are 4 / 8 / 12 / 14 / 16 / 22 / 32 / 48px, with .sec blocks at 88px vertical padding and the hero at 54px 0 84px. Content is centered in .wrap / .hbar at max-width: 1280px with 32px side padding (18px under 768px). The hero is a 1.05fr .95fr grid: a 4-column photo mosaic (grid-auto-rows: 1fr, aspect-ratio 1 tiles, one dashed "№ 7 — FLIPPING" gap) beside the specials text. The menu is a CSS columns: 2 (gap 48px) spec sheet of .cat blocks, each topped by a 3px ink rule, with dotted-leader rows. Other sections: a full-bleed marquee, an inverted regulars list (auto 1fr auto grid), an order grid (1.1fr .9fr — steps + receipt), and a brutalist catering bento (repeat(4,1fr), 160px auto-rows, a 3×2 "big" cell, a 1×2 griddle photo, a 2×1 office cell). Whitespace is generous and grid-disciplined; the feel is a printed menu, not a SaaS dashboard. Everything collapses to single column at 768px.

Elevation & Depth

There are no soft drop shadows on content — depth is built from hard 2px ink hairlines around every frame and hard offset shadows on hover (box-shadow: 4px 4px 0 var(--ink) on .btn, 6px 6px 0 on bento cells and the cursor preview, 3px 3px 0 on the "ding!" tag). The only soft shadow is the floating dock (0 18px 40px -12px rgba(0,0,0,.5)). The grain overlay adds printed texture, not lift. Depth is also signaled by the misregistration ghost (jade offset behind type) and -webkit-text-stroke outline numerals.

Shapes

Brutalist: corner radius is 0 on essentially every rectangle (tiles, cards, buttons, chips, the receipt, bento cells). Pills (999px) and full circles (50%) are reserved for small round things — the logo mark, status/live dots, tags and allergen chips, the dock shell and its circular category buttons, the count badge. The contrast between sharp menu frames and the few round chips is deliberate.

Components

• Button (.btn) — poppy fill, bone text, 2px solid ink, no radius, 13px 20px, mono uppercase .14em; hover nudges -2,-2 with 4px 4px 0 ink hard shadow. Labels: "ORDER PICKUP", "SEND PICKUP CODE →".
• Ghost button (.ghostbtn) — transparent, ink text, same ink border; catering quote variant overrides to bone fill.
• Price chip (.pr) — butter fill, ink text, 2px ink border, mono bold, 2px 8px (bone fill inside butter category).
• Datechip — butter fill, ink border, mono .1em; e.g. "FRI · MAR 14".
• Kicker — mono 12px/.22em poppy uppercase, prefixed with em-dashes.
• Tag pill (.tag / .allerg / .a) — 999px, 1.5px jade (or butter on dark) border, transparent fill, mono 9.5px; e.g. "GF", "V", "GLUTEN".
• Mosaic tile — jade fill, 2px ink border, square; image filter: contrast(1.05) saturate(.95); dashed .gap variant on bone2.
• Menu row — name · dotted leader · butter price chip; revealed by scroll scrub.
• Receipt — jade-deep card, bone text, ink border, 26px padding, perforated top/bottom edge via radial-gradient mask; butter values; a rotated bone "ding!" tag pinned bottom-right.
• Dock — fixed pill, solid ink, bone text, soft shadow; bag icon + butter count, circular category toggles (active = poppy), running total, poppy order button. Slides up on scroll.
• Bento cells — ink-bordered, square corners; big = poppy, griddle = jade photo, office = bone, delivery = butter, sms = jade-deep; hover scale + hard shadow, siblings dim.

Motion

Everything is JS-driven via a single rAF scroll loop plus IntersectionObservers (--ease: cubic-bezier(.2,.8,.2,1)). Hero: photo tiles fly in from random offsets/rotation and settle (transform .9s, 45ms stagger), then the headline lines reveal from translateY(105%) under overflow clips. The marquee runs a continuous translateX loop that speeds up with scroll velocity (base .6px/ frame, capped +7). Menu rows scrub open via clip-path inset(0 100% 0 0)→0 tied to scroll progress, with an IntersectionObserver safety net. Order-step numerals parallax on --ny. Section headings enter with three variants — skew (skewY 7deg), blur (blur 16px), and tracking (letter-spacing .32em) — all settling over .8s. Regulars items stagger in (90ms) and, on hover, a fixed 200×250 cursor-preview image follows the pointer while siblings dim to .42. The footer name de-blurs (blur 14px→0) and a poppy fstripe scales in. Status and "LIVE" dots pulse infinitely; the grain parallaxes at scroll*0.06. Note: a reduce flag exists in the script but is hard-coded false, so motion is always on.

Iconography

Icons are hand-authored inline SVGs (viewBox 0 0 24 24, fill: none, stroke-width: 2) of diner glyphs — shopping bag, egg, pancake stack, coffee cup, pie, delivery truck, SMS bubble — rendered in currentColor (ink on light, butter/bone on dark) at 20–34px. A handful of Unicode glyphs stand in for small ornaments: ☏ (phone), ⏱ (clock), ★ (star in marquee/boardnote). There is no icon-font dependency.

Do's and Don'ts

• Do keep the warm bone surface and the multiply grain overlay — they are the "hand-painted print" foundation.
• Do frame everything in 2px solid --ink with zero radius, and reach for hard offset shadows (Npx Npx 0 ink) on hover, never soft blur.
• Do keep type in its three lanes: Bricolage display, Hanken body, Spline mono for every tracked-uppercase label/price/tag.
• Do use butter only as a small highlight (chips, accents on dark), poppy as the loud voltage, jade/jade-deep as the steady structure.
• Don't round corners on cards, buttons, or tiles, or introduce soft Material-style elevation.
• Don't drop the ghost misregistration on big display type — it is the signature print move.
• Don't add a fourth font family or use mono for running body copy.
• Don't put poppy and jade large fills directly adjacent without the ink hairline between them.

Known Gaps

• The halftone grain texture is an external CDN PNG (grain.png) sized 240px 240px at opacity .16 / multiply; exact texture is the asset, not a token.
• Photo-tile and food imagery are external CDN / Pexels / Unsplash URLs; only their fills/filters are tokenized.
• The animated values (mosaic random fly-in offsets, marquee velocity boost, scroll-scrub reveal counts) are computed at runtime in JS; documented as behavior, not fixed values.
• Spacing scale is inferred from the recurring padding/gap values in the CSS; there is no declared spacing token system in the source.