name: bean-origin-design
version: alpha
description: >
  A printed-ledger broadsheet for a fictional green-coffee importer (Verdant &
  Sons). The surface is a dark kraft-paper brown (`#2A1B12`) with alternating
  slightly-lighter rows (`#33271A`), inked in warm cream (`#E8DCC6`). Two warm
  voltages carry the page: a cherry red-orange (`#D8674C`) for sold-out and
  alerts, and an amber gold (`#D6A45A`) for premium lots and marks. The type
  story is editorial print: a black slab serif (Bitter) for headlines and farm
  prose, a neutral grotesque (Inter) for UI, and a tabular monospace (Roboto
  Mono) for all numbers, metadata, and ledger labels. The geometry is sharp —
  zero corner radius everywhere except pill toggles — built on hairline ink
  rules, a 9-column data grid, and a 12-column header/footer, with expandable
  lot rows the signature interaction.
colors:
  # Brand / Voltage
  cherry: '#D8674C'      # alerts, sold-out strike-through + label, ETA highlight
  gold: '#D6A45A'        # premium lot numbers, ornaments (✦ ※), open-row accent bar
  # Surface
  kraft: '#2A1B12'       # page background, default rows, toggle knob-on text
  kraft-dk: '#33271A'    # alternating rows, expanded lot-detail panel
  # Text
  ink: '#E8DCC6'         # primary cream text, borders, dividers, sparkline strokes
  # Hairlines (ink at reduced alpha)
  ink-40: 'rgba(232,220,198,0.40)'  # top strip + footer dividers
  ink-15: 'rgba(232,220,198,0.15)'  # row separators
  ink-30: 'rgba(232,220,198,0.30)'  # neutral expanded-panel left bar
  # Semantic on flags
  flag-edge: 'rgba(58,42,26,0.30)'  # 0.5px border around country flag chips
typography:
  display:
    fontFamily: "'Bitter', serif"
    fontSize: 'clamp through 48px'   # text-5xl masthead
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: '-0.01em'
  display-italic:
    fontFamily: "'Bitter', serif"
    fontSize: '14px'
    fontWeight: 400
    lineHeight: 1.625
  ui:
    fontFamily: "'Inter', sans-serif"
    fontSize: '13px'
    fontWeight: 400
  mono-label:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: '10px'
    fontWeight: 400
    letterSpacing: '0.2em'
    textTransform: uppercase
  mono-data:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: '13px'
    fontWeight: 400
rounded:                  # radius scale
  none: '0px'             # everything structural is sharp
  full: '999px'           # toggle track + knob only
spacing:                  # base unit 4px (Tailwind scale)
  xs: '4px'
  sm: '8px'
  md: '12px'
  lg: '24px'
  xl: '32px'
components:
  masthead-title:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  lot-row:
    backgroundColor: '{colors.kraft}'   # alternates with {colors.kraft-dk}
    textColor: '{colors.ink}'
    borderBottom: '1px solid {colors.ink-15}'
    rounded: '{rounded.none}'
    padding: '12px 0'
  lot-number-premium:
    typography: '{typography.mono-data}'
    textColor: '{colors.gold}'
  lot-detail:
    backgroundColor: '{colors.kraft-dk}'
    borderLeft: '2px solid {colors.gold}'   # or {colors.cherry} sold-out / {colors.ink-30} neutral
    typography: '{typography.display-italic}'
    padding: '16px 24px'
  ledger-select:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 28px 6px 10px'
  ledger-input:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    borderBottom: '1px solid {colors.ink}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.none}'
  toggle:
    backgroundColor: 'transparent'   # filled {colors.ink} when on
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
  flag-chip:
    border: '0.5px solid {colors.flag-edge}'
    rounded: '{rounded.none}'
motion:
  row-stagger: 'GSAP ScrollTrigger.batch — rows fade autoAlpha 0→1, y 16→0, duration 0.45s, stagger 0.05s, batchMax 6, start top 92%'
  lot-expand: 'CSS max-height 0 → 240px on .open via class toggle (no explicit transition authored)'
  smooth-scroll: 'Lenis smooth scroll, autoRaf'
icons:
  library: inline glyphs / SVG
  style: typographic ornaments (✦ ✶ ※ ▮ §) plus inline polyline sparkline + CSS country-flag chips
  sizes: { sm: 10px, md: 14px, lg: 24px }
  color: '{colors.gold}'

Bean Origin — Verdant & Sons

bean-origin-design · alpha

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

Overview

Bean Origin is a printed-broadsheet ledger for a fictional specialty green-coffee importer, "Verdant & Sons." The whole page reads like a daily trading sheet pressed onto dark kraft paper: the surface is a deep roasted brown (#2A1B12, .bg-kraft) with rows that alternate into a marginally lighter brown (#33271A, .bg-kraft-dk), and everything is inked in a warm cream (#E8DCC6, .text-ink) that also draws every border, divider, and sparkline. Two warm voltages punctuate the cream: a cherry red-orange (#D8674C, .text-cherry) reserved for alerts — sold-out strike-throughs, the "Sold Out" tag, the ETA date — and an amber gold (#D6A45A, .text-gold) for premium lot numbers, the ✦/※ ornaments, and the accent bar on opened rows. The type story is pure editorial print: a black slab serif (Bitter, .font-slab) for the masthead and the italic farm tasting notes, a neutral grotesque (Inter, .font-grot) for body and UI, and a tabular monospace (Roboto Mono, .font-mono) for every number, ledger label, and metadata line. The geometry is deliberately sharp — no rounded corners anywhere except the single pill toggle — and the signature moves are the hairline ink rules, the 9-column data grid (.col-headers), the country-flag CSS chips, the masthead sparkline, and the click-to-expand lot rows that reveal a producer dossier.

Colors

Brand / Voltage. Two warm accents do all the highlighting. cherry (#D8674C) is the alert voltage: it strikes through sold-out availability (text-decoration-color), colors the "▮ Sold Out" tag, marks the in-transit ETA date, and is the left-bar on a sold-out lot's detail panel. gold (#D6A45A) is the premium/ornament voltage: it colors standout lot numbers, the ✦ and ※ glyphs in the masthead/footer, and the left accent bar on opened lot details.

Surface. kraft (#2A1B12) is the page background and the default (odd) row fill. kraft-dk (#33271A) is the alternating (even) row fill and the background of every expanded lot-detail panel — the panel and its parent row swap shades so the dossier reads as a recessed drawer.

Text. A single text color: ink (#E8DCC6), a warm cream used for all copy, all borders (.border-ink), the vertical dividers (.divider-v), the sparkline strokes, and the toggle. When inverted (toggle "on"), the knob becomes ink and its text becomes kraft.

Hairlines. Ink is dropped to alpha for separators: ink-40 (rgba(232,220,198,0.40)) on the top tag strip and footer divider, ink-15 (rgba(232,220,198,0.15)) between rows, and ink-30 (rgba(232,220,198,0.30)) as the neutral left bar on non-highlighted detail panels. The heavy structural rules under the header and above the footer are solid ink at 3px.

Semantic. Country-flag chips are drawn entirely in CSS linear-gradient / radial-gradient with real national colors, framed by a 0.5px rgba(58,42,26,0.30) (flag-edge) hairline.

Typography

Three families, all Google Fonts, imported in one call: Bitter (weights 400/700/900), Inter (400/500/600/700), and Roboto Mono (400/500/700, with font-variant-numeric: tabular-nums). Bitter is the slab serif used for headlines and the italic tasting-note prose; Inter is the grotesque used for body/UI; Roboto Mono carries every figure and label. All are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	~48px (text-5xl)	900	0.95	-0.01em (tracking-tight)	Masthead "Verdant & Sons."
display (section)	24px (text-2xl)	900	—	—	"The Green Bean Ledger."
display-italic	14px	400	1.625	—	Farm dossier tasting prose
ui	12–13px	400	normal/relaxed	—	Variety, process, footer body
mono-label	9–11px	400	—	0.15–0.3em	Column headers, ledger labels, masthead meta
mono-data	13px	400	—	—	Elevation, screen, available, dates
score-int / score-dec	17px / 11px	700 / 400	—	-0.02em (int)	Cupping scores, e.g. 90.25

Layout

Base unit 4px (Tailwind scale); horizontal page padding is px-8 (32px). The page is a single full-bleed column with no centered max-width — it fills the viewport like a printed sheet. Structure, top to bottom: a thin uppercase tag strip; a grid-cols-12 masthead split into importer name (5), date (2), in- transit (2), and a sparkline (3), each separated by vertical divider-v rules and capped by a 3px ink bottom border; a wrap-flex "Sort the Desk" filter bar; the ledger table — a 9-column CSS grid (92px 2fr 1fr 0.95fr 68px 66px 84px 76px 1.9fr) with right-aligned numeric columns; and a grid-cols-12 footer (sample requests 5, divider 1, logistics 6) sealed by another 3px ink rule and a dashed-repeating-gradient hairline. Whitespace is tight and gridded — this is a dense, information-rich sheet, not an airy landing page.

Elevation & Depth

No shadows, no glows, no glass. Depth is entirely typographic and tonal: borders carry the structure (1px hairlines for rows/dividers, 3px solid ink for the major header/footer rules), and the only "raise/recess" effect is the two-tone surface swap — an expanded lot detail sits on the opposite kraft shade from its row with a 2px colored left bar (gold / cherry / ink-30), reading as a recessed dossier drawer.

Shapes

Sharp by default. Every structural element — rows, selects, inputs, panels, flag chips, the table — has 0px radius (no rounded-* classes are used). The sole exception is the filter toggle, whose track and knob are border-radius: 999px pills ({rounded.full}). Inputs are borderless except a single bottom-rule (.ledger-input), reinforcing the ledger-on-paper feel.

Components

• Masthead title — font-slab black text-5xl, ink, leading 0.95, tracking-tight; subtitle is font-slab italic at 80% opacity.
• Tag strip — full-width row, border-b border-ink/40, text-[10px] uppercase tracking-[0.2em] mono; center span in gold with ※ ornaments.
• Lot row — alternating kraft / kraft-dk fill, border-b border-ink/15, py-3, 9-col grid; clickable, expands one at a time. Premium lots get a gold bold mono lot number; others plain ink.
• Lot detail (dossier) — kraft-dk (or kraft) panel, 2px left bar (gold premium / cherry sold-out / ink/30 neutral), 12-col grid: producer block in mono caps + slab name, tasting prose in slab italic; CSS max-height 0 → 240px on .open.
• Sold-out lot — availability 000 struck through in cherry; note prefixed with ▮ Sold Out in cherry uppercase mono text-[10px].
• Ledger select — transparent, 1px ink border, mono 11px uppercase letter-spacing 0.08em, custom inline-SVG cream caret; sharp corners.
• Ledger input — transparent, bottom-border-only ink, mono 11px, 60px wide, used as the score-range filter (84.0 → 92.5).
• Toggle — 36×18 pill, 1px ink track, 14px knob; .on fills ink and slides knob to 19px with kraft fill.
• Flag chip — 14×10 CSS-gradient national flag, 0.5px translucent edge, inline before the origin name.
• Sparkline — inline SVG polyline (1.2px ink stroke) with two 2px node dots and a dashed baseline, plus a NOV–APR mono axis.
• Footer — sample-request + logistics columns, dashed-gradient (.dash-border) hairline, address line with gold ✦.

Motion

Two real motions. (1) Row reveal: GSAP ScrollTrigger.batch on .lot-row — rows start autoAlpha 0, y 16 and animate to autoAlpha 1, y 0 over 0.45s with 0.05s stagger, batchMax 6, interval 0.06, firing at top 92%. (2) Lot expand: clicking a row toggles .open, which the CSS selector .lot-row.open + .lot-detail opens from max-height 0 to 240px (no explicit transition is authored on .lot-detail, so the height change is instant — see Known Gaps). Lenis provides smooth page scrolling (autoRaf). No hover transitions are defined.

Iconography

No icon font. Iconography is typographic ornaments and inline graphics: ✦ and ※ marks (gold) frame the brand; § sections the footer; ▮ flags sold-out; → separates the score range. The sparkline is hand-authored inline SVG, and the country flags are pure CSS gradient chips (14×10). UI affordances (the select caret) are inline data-URI SVG. Ornament color is gold (#D6A45A); structural graphics are ink (#E8DCC6).

Do's and Don'ts

• Do keep numbers in Roboto Mono with tabular figures — the ledger alignment depends on it.
• Do reserve cherry strictly for alerts (sold-out, ETA) and gold for premium/ornament; never use them as body color.
• Do keep everything sharp-cornered; only the toggle is a pill.
• Do alternate row shades and swap the detail panel to the opposite shade.
• Don't add shadows, glows, or glass — depth comes only from hairlines and the two kraft tones.
• Don't introduce a fourth typeface or set body copy in the slab serif except for the italic dossier prose and headlines.
• Don't widen to a centered max-width column; the sheet is full-bleed.

Known Gaps

• The masthead title size is given as Tailwind text-5xl (~48px); the exact rendered px depends on the Tailwind v4 default scale, not an explicit value.
• .lot-detail has overflow:hidden and a max-height change on .open but no authored transition, so the expand is effectively instantaneous; any perceived ease would come from the browser, not the CSS — described as instant.
• Hairline alpha colors (ink-40/30/15, flag-edge) are derived from the Tailwind /40 /15 opacity modifiers and the inline rgba(58,42,26,0.3); listed as tokens for documentation though authored inline.
• spacing scale is inferred from the Tailwind utility classes actually used (px-8, py-6, gap-6/12), not a declared custom scale.