name: tastingtable-design
version: alpha
description: >
  A warm editorial "live cooking class" landing page set on a cream paper texture
  (#FBF4E9) speckled with SVG fractal-noise grain and faint saffron/olive radial
  blooms. Charcoal ink (#262019) carries text and the heavy 2–6px borders that
  frame every image; tomato red (#D9482B) is the action voltage, with saffron
  (#E8A93C) for menu tabs/labels and olive (#7A7A3A) for eyebrows. The type story
  pairs an optical Fraunces serif (display, often italic) with Mukta sans (body)
  and Spline Sans Mono (tabular metadata). Signature moves: ken-burns hero photo,
  3D rotateY flip cards revealing ingredient lists, chili-pepper "heat" pips, a
  dotted-leader live schedule, and pill buttons that flip tomato→charcoal on hover.
colors:
  # Brand / Voltage
  tomato: '#D9482B'      # primary CTA fill, live dots, links/hover, accent italics
  saffron: '#E8A93C'     # course tabs, eyebrow labels on dark, ingredient amounts
  olive: '#7A7A3A'       # eyebrows, region labels, hairline borders, meta icons
  # Surface
  cream: '#FBF4E9'       # page paper background, on-charcoal text, light cards
  charcoal: '#262019'    # ink: text, heavy borders, dark sections, footer
  # Text (charcoal at opacities)
  body: 'rgba(38,32,25,0.80)'   # body paragraphs (charcoal/80)
  muted: 'rgba(38,32,25,0.60)'  # captions, subtitles (charcoal/60)
  faint: 'rgba(38,32,25,0.20)'  # disabled heat pips, avatar hairline (charcoal/20)
  # Hairlines
  hairline-dark: 'rgba(38,32,25,0.12)'  # card dividers on cream (charcoal/12)
  hairline-light: 'rgba(251,244,233,0.12)' # dividers on charcoal (cream/12)
  border-olive: 'rgba(122,122,58,0.35)'    # header & section borders (olive/35)
  # Gradient / Texture
  grain-saffron: 'rgba(232,169,60,0.05)' # paper-tex radial bloom top-left
  grain-olive: 'rgba(122,122,58,0.05)'   # paper-tex radial bloom bottom-right
  photo-scrim: 'rgba(38,32,25,0.85)'     # bottom-up gradient over hero photo
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(3.75rem, 7vw, 4.5rem)   # text-6xl → lg:text-7xl hero/CTA
    fontWeight: 600
    lineHeight: 0.95
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 1.5rem            # italic accent (chef names, blockquotes vary 1.25–2.25rem)
    fontWeight: 500
    fontStyle: italic
  section-title:
    fontFamily: "'Fraunces', serif"
    fontSize: 3rem              # text-5xl section headings
    fontWeight: 600
  body:
    fontFamily: "'Mukta', sans-serif"
    fontSize: 1.125rem          # text-lg lead paragraphs
    fontWeight: 400
    lineHeight: 1.625
  nav:
    fontFamily: "'Mukta', sans-serif"
    fontSize: 15px
    fontWeight: 500
  eyebrow:
    fontFamily: "'Spline Sans Mono', monospace"
    fontSize: 0.75rem           # text-xs labels
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase
  mono-meta:
    fontFamily: "'Spline Sans Mono', monospace"
    fontSize: 0.875rem          # text-sm times, amounts, stats (tabular-nums)
    fontWeight: 400
rounded:
  sm: 4px        # cuisine/course tag chips (rounded)
  md: 8px        # tab notches (rounded-t-lg / rounded-bl-lg)
  lg: 16px       # cards, pantry box (rounded-2xl)
  xl: 24px       # chef photo frame (rounded-[24px])
  hero: 28px     # hero image frame (rounded-[28px], tl corner squared)
  full: 9999px   # pill buttons, avatars, dots (rounded-full)
spacing:          # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  section-y: 80px   # py-20 dark/divider sections
components:
  primaryButton:
    backgroundColor: '{colors.tomato}'
    textColor: '{colors.cream}'
    typography: '{typography.nav}'
    rounded: '{rounded.full}'
    padding: '14px 28px'   # px-7 py-3.5
    hover: 'background → {colors.charcoal}'
  secondaryButton:
    backgroundColor: 'transparent'
    textColor: '{colors.charcoal}'
    border: '2px solid rgba(38,32,25,0.30)'
    rounded: '{rounded.full}'
    padding: '14px 28px'
    hover: 'border + text → {colors.tomato}'
  flipCardFront:
    backgroundColor: '{colors.cream}'
    border: '2px solid {colors.charcoal}'
    rounded: '{rounded.lg}'   # rounded-2xl with rounded-tr-none notch
    padding: '20px'
  flipCardBack:
    backgroundColor: '{colors.charcoal}'
    textColor: '{colors.cream}'
    rounded: '{rounded.lg}'
    padding: '24px'
  courseTab:
    backgroundColor: '{colors.saffron}'
    textColor: '{colors.charcoal}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.md}'   # rounded-t-lg / rounded-bl-lg
    padding: '8px 20px'
  cuisineChip:
    backgroundColor: '{colors.olive}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.sm}'
    padding: '4px 12px'
  pantryBox:
    backgroundColor: '{colors.cream}'
    border: '2px solid {colors.charcoal}'
    rounded: '{rounded.lg}'
    headerBackground: '{colors.charcoal}'
  scheduleRow:
    typography: '{typography.display-italic}'
    leader: '2px dotted rgba(251,244,233,0.32)'
    timeColor: '{colors.saffron}'
motion:
  kenburns: '22s ease-in-out infinite — hero photo scale 1→1.12 + slight translate'
  flipCard: 'transform .65s cubic-bezier(.4,.1,.2,1) — rotateY(180deg) on hover'
  livePulse: 'pulse 1.8s infinite — expanding tomato box-shadow ring on live dots'
  reveal: 'GSAP power3.out .9s — opacity 0→1, y 28→0 on scroll (ScrollTrigger top 88%)'
  sprigReveal: 'GSAP power2.out 1.1s — herb sprig icon fade + rise'
  cardStagger: 'GSAP power2.out .6s, stagger .1s — flip cards y 30→0 on scroll'
  buttonHover: 'transition-colors — pill fills flip tomato↔charcoal↔saffron'
icons:
  library: 'Lucide (data-lucide), plus game-icons herbs-bundle decorative sprig, inline chili <symbol>'
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 28px }
  color: '{colors.olive}'

The Tasting Table

tastingtable-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 Tasting Table is a warm, editorial landing page for live regional cooking classes — it reads like a printed recipe card brought online. The whole page sits on a cream "paper" surface (#FBF4E9) built from layered CSS: two faint radial blooms (saffron rgba(232,169,60,.05) top-left, olive rgba(122,122,58,.05) bottom-right) over an inline SVG fractal-noise grain at 3.5% opacity. Ink is a warm near-black charcoal (#262019) that does double duty as text color and as the heavy 2–6px frames around every photograph. The voltage is tomato red (#D9482B) — every CTA pill, every live dot, the accent italics; saffron (#E8A93C) tags courses and labels, and olive (#7A7A3A) handles eyebrows and hairlines. Type is the heart of the brand: an optical Fraunces serif (display, frequently italic) sets headlines and chef names against Mukta sans body copy, with Spline Sans Mono (tabular numerals) for times, prices and tracked-out uppercase eyebrows. The signature moves are tactile and food-themed: a slow ken-burns zoom on the hero paella, 3D rotateY flip cards that turn over to reveal an ingredient list, chili-pepper "heat" pips, a dotted-leader live schedule on a charcoal slab, and pill buttons that swap tomato→charcoal on hover.

Colors

Brand / Voltage. tomato #D9482B is the primary action color — CTA pill fills, the pulsing live dots, link hover (hover:text-[var(--tomato)]), accent italic words in headlines, and the full-bleed final CTA section. saffron #E8A93C marks "Course NN" tabs, eyebrow labels on dark backgrounds, ingredient amounts, and schedule times. olive #7A7A3A is the quieter accent: eyebrows on light, chef region labels, meta icons, hairline borders, and a 15%-tint signature chip (bg-[var(--olive)]/15).

Surface. cream #FBF4E9 is the page paper and the text/fill color on dark sections. charcoal #262019 is the universal ink — body text base, the heavy photo borders, the dark Live/footer slabs, and flip-card backs.

Text. Charcoal at opacities: body copy at charcoal/80, captions/subtitles at charcoal/60, disabled heat pips and avatar hairlines at charcoal/20.

Hairlines. Dividers on cream use charcoal/12; dividers on charcoal use cream/12–cream/20; the header and chef-section borders use olive/35.

Gradient / Texture. The hero photo has a bottom-up scrim from-[var(--charcoal)]/85 to-transparent; the paper texture blends the two 5% radial grains plus the SVG noise.

Typography

Three Google Fonts via one @import: Fraunces (optical serif, weights 400–900

• italics — the display face, often set italic for chef names and pull-quotes), Mukta (humanist sans, 300–700 — body and nav), and Spline Sans Mono (monospace, 400–600, font-variant-numeric: tabular-nums — metadata, prices, eyebrows). All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.75–4.5rem)	600	0.95	tight	Hero & final-CTA headlines
section-title	3rem (text-5xl)	600	normal	—	Section headings
display-italic	1.25–2.25rem	500	snug	—	Chef names, blockquotes, schedule dishes
body	1.125rem (text-lg)	400	1.625	—	Lead paragraphs
nav	15px	500	—	—	Nav links, button labels
eyebrow	0.75rem (text-xs)	400	—	0.3em	Uppercase mono eyebrows/tabs
mono-meta	0.875rem (text-sm)	400	—	—	Times, amounts, stats (tabular)

Layout

Base unit is 4px on Tailwind's scale. The page is a stack of centered max-w-[1280px] sections at px-8, narrowing to max-w-[860px] for the Live schedule and max-w-[900px] for the final CTA. The hero is an asymmetric [0.95fr_1.05fr] two-column grid — copy left, framed photo right with an overhanging "Course 01" tab. The menu is a responsive 1→2→3 column flip-card grid. Chef profiles alternate left/right via direction:rtl flips on a two-column grid. Dark slabs (Live, footer) and a full-bleed tomato CTA break the cream rhythm. Whitespace is generous and editorial — large py-16/20/24/28 section padding.

Elevation & Depth

Depth comes mostly from heavy borders, not shadows: photos are framed in border-2/border-[6px] charcoal. Two real shadows exist — shadow-2xl on the hero photo frame and shadow-xl on the pantry box. The header uses a subtle backdrop-blur-xs. The hero photo gets a bottom scrim gradient; flip cards use perspective:1400px for true 3D depth.

Shapes

A layered radius story. Pill (rounded-full) for all buttons, avatars and dots. Cards and the pantry box are rounded-2xl (16px) but deliberately square one corner (rounded-tr-none) so an overhanging tab can dock there. The hero frame is a custom 28px with a squared top-left. Chef frames are 24px. Tabs/badges use small 4–8px radii (rounded, rounded-t-lg, rounded-bl-lg). A .torn clip-path and .notch mask provide ticket-stub edges.

Components

• Primary button — tomato fill, cream text, rounded-full, px-7 py-3.5, Mukta 600; hover → charcoal fill. ("Reserve a seat", "Watch live", "Send my basket")
• Secondary button — transparent, border-2 border-charcoal/30, charcoal text, pill; hover → tomato border + text. ("Add to basket")
• Flip card — h-[440px], perspective:1400px; front is cream with border-2 charcoal + rounded-2xl rounded-tr-none, photo header, dish title, chef avatar, time + heat pips; back rotates 180° to a charcoal panel listing ingredients with saffron amounts and a "Book this course" pill.
• Course tab — saffron fill, charcoal text, mono eyebrow, rounded-t-lg or rounded-bl-lg, overhangs the card/photo. ("Course 01", "No. 02")
• Cuisine chip — olive fill, cream text, mono uppercase, rounded 4px.
• Heat pips — three inline chili <symbol> SVGs filled tomato; empties at 0.2.
• Schedule row — flex row with live dot, Fraunces dish name + optional "Live" badge, olive chef/cuisine line, dotted .leader, saffron mono time.
• Pantry box — cream card, border-2 charcoal, rounded-2xl, charcoal header bar, checkbox list (accent-tomato), dashed-border subtotal row, tomato CTA.
• Stat block — border-l-2 border-olive with Fraunces number + muted label.

Motion

• Ken-burns — hero photo kenburns 22s ease-in-out infinite, scaling 1→1.12 with a slight translate.
• Flip cards — transform .65s cubic-bezier(.4,.1,.2,1) rotateY(180deg) on hover, transform-style:preserve-3d, backface-visibility:hidden.
• Live pulse — pulse 1.8s infinite expanding tomato box-shadow ring on dots.
• Scroll reveals — GSAP + ScrollTrigger: .reveal blocks fade up (power3.out .9s, start top 88%), sprig icons rise (power2.out 1.1s), and the card grid staggers in (stagger .1s).
• Hover — transition-colors on all pills and links.

Iconography

Lucide outline icons (data-lucide, stroke 2px, lucide.createIcons()): clock, users, play, shopping-basket — sized w-4/w-5, tinted olive or saffron. A decorative game-icons "herbs-bundle" sprig SVG (sized w-7–w-9) is recolored per-section via CSS filter (olive on light, brighter on dark, pure white on tomato). An inline <symbol id="chili"> powers the heat pips, filled tomato in JS.

Do's and Don'ts

• Do keep cream as the dominant surface and reserve tomato for action.
• Do frame photos with heavy charcoal borders and dock a saffron tab on a squared corner.
• Do use Fraunces italic for names/quotes and Spline Sans Mono for all numbers.
• Don't add drop shadows where a border belongs — depth here is editorial.
• Don't round the tab-docking corner; the rounded-tr-none notch is the move.
• Don't mix accent roles — saffron labels, olive eyebrows, tomato actions.

Known Gaps

• Hero/CTA headline size is given as clamp(3.75rem, 7vw, 4.5rem) to capture the text-6xl → lg:text-7xl responsive jump; the HTML uses discrete Tailwind steps.
• The sprig icon's per-section colors come from CSS filter chains (invert/sepia/ saturate/hue-rotate), not hex tokens; described qualitatively.
• The paper texture is a multi-layer CSS background (two radial grains + an SVG fractal-noise data-URI at ~3.5% opacity) — token captures the two grain colors.
• display-italic line spans several sizes (1.25–2.25rem) across uses; one representative value recorded.