name: terroir-design
version: alpha
description: >
  A single-origin chocolate "specimen catalogue" rendered as a tactile,
  apothecary-meets-cartography artifact. The surface is grained cocoa-brown
  (#3B241B) and aged cream paper (#F2E4CE); amber (#C9892F) is the structural
  voltage, with raspberry (#9E2B4E) and pistachio (#7FA05B) as cataloguing
  accents. Signature moves: a GSAP lid that lifts off a four-slot inset
  presentation box, a scroll-driven astrolabe flavor chart, foil-edged origin
  dossiers, and dotted-leader price ledgers. Type pairs a high-contrast Fraunces
  display (including swash italics) with Spectral body serif and an Archivo mono
  used in wide-tracked uppercase labels. Geometry is sharp-cornered throughout —
  radius is reserved for the single circular astrolabe medallion.
colors:
  # Surface
  cocoa: '#3B241B'        # primary dark surface, nav, box body, footer
  cocoa-deep: '#1f120c'   # box outer border + inner slot grout
  cream: '#F2E4CE'        # paper sections, slot fills, light text
  # Brand / Voltage
  amber: '#C9892F'        # primary accent: borders, rules, icons, CTA hover fill
  # Accents (cataloguing)
  raspberry: '#9E2B4E'    # specimen tag 01, prices, stars, hairline
  pistachio: '#7FA05B'    # specimen tag 02, coordinates, dossier meta, hairline
  # Text
  text-on-dark: '#F2E4CE'         # cream body/headings on cocoa
  text-on-light: '#3B241B'        # cocoa text on paper sections
  # Hairlines / overlays (rgba)
  grain-light: 'rgba(59,36,27,0.05)' # paper-grain radial mottle
  inset-shadow: 'rgba(0,0,0,0.7)'    # slot inset glow
  lid-shadow: 'rgba(0,0,0,0.6)'      # box drop shadow
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.25rem, 5vw, 4.5rem)   # text-5xl → md:text-7xl
    fontWeight: 900
    lineHeight: 0.92
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(1.875rem, 4vw, 2.25rem)
    fontWeight: 500
    fontStyle: italic
  body:
    fontFamily: "'Spectral', serif"
    fontSize: 1.125rem    # text-lg
    fontWeight: 400
    lineHeight: 1.625
  label:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2.75px   # tracking-[0.25em]
    textTransform: uppercase
  label-wide:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 5.5px    # tracking-[0.5em]
    textTransform: uppercase
rounded:
  none: 0px        # default — every panel, card, button, tag is sharp
  full: 9999px     # only the central astrolabe medallion
spacing:           # Tailwind 4px base unit; common steps used
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 80px        # py-20 section padding
components:
  nav:
    backgroundColor: '{colors.cocoa}'   # bg-cocoa/95 + backdrop-blur-xs
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    borderBottom: '2px solid {colors.amber}'
    padding: '0 24px'                    # h-14
  button-outline:
    backgroundColor: 'transparent'
    textColor: '{colors.amber}'
    border: '1px solid {colors.amber}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '6px 16px'                  # px-4 py-1.5; hover fills amber, text cocoa
  button-block:
    backgroundColor: '{colors.cocoa}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px'                      # py-3 full-width; hover amber/cocoa
  specimen-slot:
    backgroundColor: '{colors.cream}'
    boxShadow: 'inset 0 0 24px rgba(0,0,0,0.7), inset 0 3px 6px rgba(0,0,0,0.9)'
    rounded: '{rounded.none}'            # aspect-3/4, sepia images
  origin-card:
    backgroundColor: '{colors.cream}'
    boxShadow: '0 0 0 2px {colors.cocoa}, 0 0 0 5px {colors.amber}, 0 0 0 7px {colors.cocoa}'  # foil-edge
    rounded: '{rounded.none}'
  specimen-tag:
    backgroundColor: '{colors.raspberry}'   # also amber / pistachio variants
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
    transform: 'rotate(-3deg)'               # tag-rotate
  ledger-row:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.text-on-light}'
    typography: '{typography.label}'
    # dotted-leader: flex:1; border-bottom:2px dotted {colors.amber}
motion:
  lid-lift: 'GSAP gsap.to #lid → yPercent:-104, rotateX:8, duration:1.6, delay:0.4, ease back.out(1.4)'
  astrolabe-rotate: 'GSAP ScrollTrigger #astro-ring → rotation:120, scrub:1 across viewport'
  origin-rows: 'GSAP from y:50, duration:0.9, ease power2.out, ScrollTrigger start top 82%'
  nav-hover: 'CSS hover:t-amber on links; button hover fills bg-amber, text cocoa'
icons:
  library: 'Tabler icons-webfont (ti), plus game-icons (zigzag-hieroglyph, CSS-recolored to amber)'
  style: outline
  sizes: { sm: 14px, md: 24px, lg: 32px, xl: 48px }
  color: '{colors.amber}'

Terroir & Co.

terroir-design · alpha

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

Overview

Terroir & Co. presents single-origin chocolate as a museum-grade specimen catalogue — part apothecary, part cartographer's field dossier. The page lives on two grained surfaces: a deep cocoa brown (#3B241B, .cocoa-grain) and an aged cream paper (#F2E4CE, .paper-grain), both textured with SVG feTurbulence fractal noise and subtle radial mottling. Amber (#C9892F) is the single structural voltage — it draws every border, etched rule, icon, and the hover-fill on CTAs — while raspberry (#9E2B4E) and pistachio (#7FA05B) act as a cataloguing palette for specimen tags, prices, and tasting stars. The hero is a literal presentation box: a four-slot grid of sepia map/bar pairs whose lid (#lid) lifts off on load via GSAP back.out easing. Below, an SVG astrolabe "flavor chart" rotates on scroll, foil-edged origin dossiers alternate left/right, and a two-column ledger uses dotted-leaders to connect tasting notes to prices. Type is high-drama Fraunces (900 weight headings, 500-weight swash italics) over Spectral body serif, with Archivo mono for the wide-tracked uppercase labels that read like archival stamps. Everything is sharp-cornered; the only curve is the circular cacao medallion at the astrolabe's core.

Colors

Surface. Two grained backgrounds dominate. cocoa #3B241B is the primary dark field (nav, hero box body, divider strip, footer, lid) applied flat as .bg-cocoa or textured as .cocoa-grain. cocoa-deep #1f120c is the darker brown used for the box's border-[10px] frame and the p-[10px] grout between specimen slots. cream #F2E4CE is the aged-paper light field for the origin dossiers and ledger (.paper-grain), and also fills each specimen slot.

Brand / Voltage. amber #C9892F is the only true accent voltage: it colors all borders (bd-amber, nav border-b-2, hero border-b-4), the etched repeating-linear-gradient rules, the compass/star icons, the outline-button text, and becomes the hover fill on both CTAs.

Accents. raspberry #9E2B4E and pistachio #7FA05B are the cataloguing duo — used for specimen tags (bg-rasp, bg-pist), price figures, tasting stars, coordinate text, and as 1px hairlines in the divider strip.

Text. On dark surfaces text is cream #F2E4CE (often at /70–/80 opacity for body); on paper surfaces text is cocoa #3B241B (/70–/80 for secondary meta).

Overlays. Grain and depth come from rgba: rgba(59,36,27,0.05–0.06) radial mottle on paper, rgba(0,0,0,0.7) inset slot glow, rgba(0,0,0,0.6) lid drop shadow.

Typography

Three Google Fonts via a single @import: Fraunces (display serif, optical sizes 9–144, weights 400/600/900 + italic 500), Spectral (body serif, 400/500 + italic), and Archivo (the "mono"/label sans, 400/500/700/900). Mapped to .f-head, .f-body, .f-mono. Fraunces is genuinely high-contrast with a swash italic; close open substitutes would be Playfair Display or EB Garamond if unavailable. Archivo is a grotesque sans used here purely for wide-tracked uppercase micro-labels (not a true monospace).

Token	Size	Weight	Line-height	Tracking	Usage
display	text-5xl→text-7xl	900	0.92	—	H1 / origin names "Madagascar"
display-italic	text-3xl→text-4xl	500 italic	—	swash accents "Specimen", "Flavor Chart"
body	text-base/text-lg	400	1.625	—	Spectral paragraphs, descriptions
label	11px	400	—	0.25em	nav, eyebrows, meta stamps (uppercase)
label-wide	11px	400	—	0.5em	section dividers "Strata", "Origin Dossiers"

Micro-labels go as small as text-[7px]/text-[8px] for slot coordinate tags.

Layout

Tailwind's 4px base unit. Content is centered at max-w-[1280px] (ledger at max-w-[1180px]) with px-6 gutters. Sections stack full-bleed and alternate surface: cocoa nav → cocoa hero with the box → cocoa divider strip → cocoa-grain astrolabe (12-col grid, 4/8 split) → paper origin dossiers (12-col, alternating 5/7 with order swaps) → cocoa ledger (2-col paper panels). The hero box is the signature structural move: a border-[10px] cocoa-deep frame wrapping a grid-cols-2 md:grid-cols-4 gap-[10px] of inset slots, overlaid by an absolutely positioned lid that extends -left-12 -right-12 past the box edges. The astrolabe is a 420px stack of absolutely layered SVG rings plus a circular photo medallion and positioned star markers. Whitespace is generous and editorial (py-16–py-20 section rhythm) but compositions are dense and tactile.

Elevation & Depth

Depth is physical, not material-design. The presentation box casts .lid-shadow = 0 24px 60px rgba(0,0,0,0.6). Each specimen slot is recessed via .slot-inset = inset 0 0 24px rgba(0,0,0,0.7), inset 0 3px 6px rgba(0,0,0,0.9), selling the "tablet in a velvet slot" feel. Origin photos get a triple-ring .foil-edge = 0 0 0 2px #3B241B, 0 0 0 5px #C9892F, 0 0 0 7px #3B241B (faux-foil stamp). The astrolabe medallion adds box-shadow:0 0 0 3px #3B241B plus a 4px amber ring. Elsewhere, depth is carried by thick borders and dashed hairlines rather than blur — only the nav uses backdrop-blur-xs.

Shapes

Resolutely rectilinear. The base radius is 0 — every panel, card, button, specimen tag, and ledger row is hard-cornered, reinforcing the catalogue/specimen metaphor. The single exception is rounded-full on the central cacao medallion and its containing astrolabe rings. Visual interest comes from rotate(-3deg) tags (.tag-rotate) and slight image rotations (rotate-2, -rotate-3) rather than from corner softening.

Components

• Nav — sticky, bg-cocoa/95 + backdrop-blur-xs, border-b-2 amber, 56px tall (h-14); compass icon + wide-tracked wordmark, label links, outline CTA.
• Outline button ("Acquire") — transparent, 1px amber border, amber label text, no radius, px-4 py-1.5; hover fills bg-amber with cocoa text.
• Block button ("Order the Full Collection") — full-width bg-cocoa, cream label, py-3, no radius; hover amber fill / cocoa text.
• Specimen slot — cream fill, aspect-3/4, .slot-inset recess, holds a sepia map photo + rotated bar photo + a rotated coordinate tag.
• Specimen tag — small rotated stamp, bg-rasp/bg-pist/bg-amber, cream or cocoa label, px-3 py-1.5, rotate(-3deg), absolutely pinned to card corner.
• Origin dossier — .foil-edge framed photo (sepia 0.2) + 900-weight name, percentage in accent color, Spectral description, mono meta row; dashed border-b-2 separators.
• Ledger row — Fraunces name, Spectral note, then a mono "% Dark" label, a .dotted-leader (2px dotted amber), and an accent-colored price ($14).
• Divider strip — stacked etched-rule (amber repeating gradient) + raspberry/pistachio hairlines bracketing a centered wide-tracked label.

Motion

GSAP 3 + ScrollTrigger. The hallmark is the lid lift: #lid animates yPercent:-104, rotateX:8 over 1.6s with delay:0.4 and ease:back.out(1.4), revealing the specimens on load. The astrolabe ring rotates 120° tied to scroll position (scrub:1, full-viewport range). Origin rows rise y:50 with power2.out as they enter at top 82%. CSS handles hover states (links to amber, buttons to amber-fill). The astrolabe tick marks (72 lines) are generated in JS at load.

Iconography

Primary library is Tabler icons-webfont (ti classes): ti-compass (the brand mark), ti-star-filled (tasting markers, in all three accent colors), ti-brand-instagram, ti-mail, ti-map-pin. Style is outline/line, sized from text-sm (14px) up to text-5xl (48px) on the lid compass, predominantly amber. A second source — game-icons zigzag-hieroglyph SVGs — flanks the "Origin Dossiers" header, recolored to amber via a CSS filter (invert/sepia/saturate/ hue-rotate). Icons are mostly decorative/wayfinding, not interactive UI.

Do's and Don'ts

• Do keep corners sharp (radius 0); save rounded-full for the astrolabe medallion only.
• Do texture surfaces with the grain backgrounds and keep amber as the sole structural voltage.
• Do use Archivo only for wide-tracked uppercase micro-labels, never for body copy.
• Do pair every specimen/dossier with its accent (raspberry / pistachio / amber) consistently.
• Don't introduce drop shadows for flat UI — depth comes from insets, foil rings, and the box.
• Don't soften the tactile metaphor with gradients-as-fills or glassy cards beyond the nav blur.
• Don't straighten the rotated tags or remove the dotted-leader ledger device.
• Don't add a fourth accent hue or shift the brown surface lighter.

Known Gaps

• Section spacing tokens (xl/2xl/3xl) are inferred from the Tailwind classes actually used (py-16, py-20, gap-10) rather than a declared scale.
• display font sizes are expressed as a clamp() approximation of the responsive text-5xl→text-7xl jump; the HTML uses discrete Tailwind steps.
• Grain textures are SVG feTurbulence data-URIs; their exact visual is procedural and only described, not enumerated.
• Fraunces/Spectral/Archivo are real Google Fonts (loaded), so no substitution is needed; substitutes are noted only as fallbacks.