name: beauvoir-design
version: alpha
description: >
  An editorial broadsheet for a fictional natural-wine importer, set on a pale
  sage-green page (#E2EBD0) inked entirely in oxblood (#5C1E1E) with a single
  chartreuse voltage (#C8D44A). The signature move is a "Periodic Table of
  Producers" — a 108-cell diamond grid of element-style tiles that flip in 3D to
  reveal tasting notes — paired with a giant Bodoni Moda masthead, two running
  marquees, and a 3D page-flip "editorial book". Type is a high-contrast Bodoni
  Moda display against a Figtree humanist body, with small-caps captions and
  Roman-numeral dates. Geometry is hairline-ruled and sharp-cornered: everything
  is divided by 1px oxblood rules, nothing is rounded except the dots and grape
  glyphs.
colors:
  # Brand / Voltage
  oxblood: '#5C1E1E'        # primary ink: text, all hairline borders, dark bars, footer bg
  chartreuse: '#C8D44A'     # voltage: marquee strip, badges, buttons, Orange Aisle section bg
  # Surface
  sage: '#E2EBD0'           # page background; light text on dark (oxblood) panels
  # Region tile fills (light)
  tile-stone: 'rgba(196,192,180,0.83)'   # ring 0 — stone gray cell
  tile-tan: 'rgba(222,200,174,0.83)'     # ring 1 — warm tan cell
  tile-straw: 'rgba(212,200,144,0.83)'   # ring 2 — golden straw cell
  tile-sage: 'rgba(184,196,180,0.83)'    # ring 3 — sage cell
  tile-lavender: 'rgba(192,176,192,0.83)'# ring 4 — dusty lavender cell
  tile-steel: 'rgba(180,188,200,0.83)'   # ring 5 — steel blue cell
  tile-cream: 'rgba(224,216,196,0.83)'   # ring 6 — cream center cell
  # Region accent borders (underlines / cell backs)
  region-mosel: '#8A8880'   # gray
  region-friuli: '#B8641E'  # burnt orange
  region-jura: '#8A7828'    # olive
  region-loire: '#4A7A54'   # green
  region-burgundy: '#6A406A'# plum
  region-austria: '#404870' # indigo
  region-champagne: '#907860'# taupe
  # Hairlines / overlays
  hairline: '#5C1E1E'                     # 1px section + cell dividers
  hairline-soft: 'rgba(92,30,30,0.40)'    # 40% oxblood top-bar rule
  footer-rule: 'rgba(226,235,208,0.15)'   # 15% sage rule inside footer
  scrim-oxblood: 'rgba(92,30,30,0.70)'    # image caption gradient / badge bg
typography:
  masthead:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: clamp(48px,12vw,180px)
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.04em
  editorial-h2:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: clamp(48px,8vw,120px)
    fontWeight: 900
    lineHeight: 0.86
    letterSpacing: -0.04em
  section-title:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: 18px
    fontWeight: 700
    letterSpacing: -0.01em
  marquee:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1
  tile-symbol:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: clamp(24px,2.2vw,36px)
    fontWeight: 900
    lineHeight: 1
  body:
    fontFamily: '"Figtree", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
  eyebrow:
    fontFamily: '"Figtree", sans-serif'
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.14em
    textTransform: uppercase
  ticker:
    fontFamily: '"Figtree", sans-serif'
    fontSize: 12px
    fontWeight: 500
    letterSpacing: 0.08em
    textTransform: uppercase
  caption-sc:
    fontFamily: '"Figtree", sans-serif'
    fontSize: 8px
    fontWeight: 500
    letterSpacing: 0.08em
    textTransform: uppercase
rounded:                      # almost nothing is rounded — sharp editorial geometry
  none: 0px
  full: 9999px                # nav dots only
spacing:                      # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  '2xl': 32px
  '3xl': 56px
components:
  subscribe-button:
    backgroundColor: '{colors.chartreuse}'
    textColor: '{colors.oxblood}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
    # hover inverts to oxblood bg / chartreuse text; label scrambles via anime.js
  producer-tile:
    backgroundColor: '{colors.tile-cream}'
    textColor: '{colors.oxblood}'
    typography: '{typography.tile-symbol}'
    rounded: '{rounded.none}'
    padding: '6px'
    # 3px region-colored bottom border; flips 180° in 3D on hover to oxblood-tinted back
  region-badge:
    backgroundColor: '{colors.chartreuse}'
    textColor: '{colors.oxblood}'
    typography: '{typography.ticker}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
  dark-section-bar:
    backgroundColor: '{colors.oxblood}'
    textColor: '{colors.sage}'
    typography: '{typography.section-title}'
    rounded: '{rounded.none}'
    padding: '12px 32px'
  image-caption:
    backgroundColor: '{colors.scrim-oxblood}'
    textColor: '{colors.sage}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '20px'
  nav-dot:
    backgroundColor: '{colors.oxblood}'
    rounded: '{rounded.full}'
    # 7px circle, 0.3 opacity; active = full opacity + scale(1.4)
motion:
  masthead-reveal: 'GSAP — .mh-line translateY 105%→0%, duration 1.2s, power4.out, stagger 0.14s, delay 0.3s'
  hero-pin-zoom: 'GSAP ScrollTrigger pin (end +=650, scrub 1.2) — hero bg scale 1→1.16, overlay opacity 1→0.1'
  grid-stagger: 'GSAP — cells autoAlpha 0→1 + scale 0.88→1, 0.45s power2.out, stagger from center over grid [8,14]'
  tile-flip: 'CSS — .cell-inner rotateY 0→180deg on hover, transform 0.6s cubic-bezier(.16,1,.3,1)'
  book-flip: 'GSAP — 3D page turn, departing rotateY→-90 (0.38s power2.in) then arriving →0 (0.38s power2.out), wheel/key/touch driven, 820ms lock'
  marquee: 'CSS keyframes mleft 30s / mright 50s linear infinite (translateX 0↔-50%)'
  button-scramble: 'anime.js scrambleText on subscribe button hover, revealRate 0.4, settleDuration 600ms'
  smooth-scroll: 'Lenis, lerp 0.08, smoothWheel'
icons:
  library: Tabler icons (webfont)
  style: outline
  sizes: { inline: 30px }
  color: '{colors.oxblood}'
  # only ti-grape used (in the chartreuse marquee); ◆ ⌀ ▸ → § are typographic glyphs

Beauvoir Imports

beauvoir-design · alpha

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

Overview

Beauvoir is an editorial broadsheet for a fictional natural-wine importer, built like a printed catalogue rather than a web page. The entire surface is a pale sage-green (#E2EBD0) inked in deep oxblood (#5C1E1E), with one electric chartreuse voltage (#C8D44A) reserved for the marquee strip, badges, the subscribe button, and the full-bleed "Orange Aisle" section. The signature move is the Periodic Table of Producers: a 108-cell diamond grid of element-style tiles, each a wine domaine with its two-letter symbol, vintage, and region, which flip 180° in 3D on hover to reveal tasting notes and soil type. Above it sits a giant Bodoni Moda masthead ("Beauvoir & Imports.") that reveals line-by-line over a pinning, zooming hero image. The type story is unapologetic high-contrast didone display (Bodoni Moda, weights up to 900, optical sizing 6–96) set against a calm humanist body (Figtree), with small-caps captions, uppercase tracked eyebrows, and Roman-numeral dates ("Est. MCMXCVIII", "§ IV"). Below the table, four editorial spreads live inside a 3D page-flip book navigated by wheel/keyboard/swipe with dot indicators. Geometry is sharp and hairline-ruled throughout: every region is separated by a 1px oxblood rule, and the only rounded things in the whole document are the 7px nav dots.

Colors

Brand / Voltage. The primary ink is oxblood #5C1E1E — used for all body and display text, every hairline border, the dark section bars, the arrivals ticker, and the footer background. The single accent is chartreuse #C8D44A, applied to the diagonal serif marquee strip, the "This Week's Arrivals" tag and ticker chips, the subscribe button, and as the full background of the Orange Aisle section. Surface. The page sits on sage #E2EBD0, which also serves as the light text color on oxblood panels (footer, ticker, section bars). Tile fills. The periodic grid uses seven concentric "ring" fills, all at 0.83 alpha so the background image bleeds through: tile-stone, tile-tan, tile-straw, tile-sage, tile-lavender, tile-steel, and tile-cream (center). Region accents color each tile's 3px bottom border and its flipped back face: region-mosel #8A8880, region-friuli #B8641E, region-jura #8A7828, region-loire #4A7A54, region-burgundy #6A406A, region-austria #404870, region-champagne #907860 (plus several more region pairs defined in the data map). Hairlines / overlays. Section and cell dividers are solid hairline #5C1E1E; the top utility bar uses hairline-soft rgba(92,30,30,0.40); the footer's internal rules are footer-rule rgba(226,235,208,0.15); image captions and the rare-allocation badge use scrim-oxblood rgba(92,30,30,0.70).

Typography

Two families, both loaded from Google Fonts. The display face is Bodoni Moda (a didone with optical sizing 6..96, weights 400–900, plus italics) — used at extreme sizes for the masthead and editorial headlines, and small for section titles and the marquee. The body face is Figtree (a friendly geometric- humanist sans, weights 300–700) used for all running text, eyebrows, tickers, and captions. Bodoni Moda is open-source; Figtree is open-source — no substitution needed. Decorative touches: .serif italics for emphasis words ("Biologism", "Orange"), small-caps (.sc) on producer names, and a chartreuse number with a 1.5px oxblood -webkit-text-stroke ("·2025·").

Token	Size	Weight	Line-height	Tracking	Usage
masthead	clamp(48px,12vw,180px)	900	0.92	-0.04em	Giant "Beauvoir & Imports." wordmark
editorial-h2	clamp(48px,8vw,120px)	900	0.86	-0.04em	Spread headlines (up to clamp …150px on Rare)
section-title	18px	700	—	-0.01em	Dark-bar section labels
marquee	42px	400	1	—	Diagonal chartreuse running strip
tile-symbol	clamp(24px,2.2vw,36px)	900	1	—	Two-letter element symbols in grid
body	14px	400	1.8	—	Editorial paragraphs
eyebrow	11px	500	—	0.14em	Uppercase section eyebrows / captions
ticker	12px	500	—	0.08em	Top bars + arrivals ticker (uppercase)
caption-sc	8px	500	—	0.08em	Small-caps producer name labels

Layout

Base unit is 4px (Tailwind's default scale: 6/8/12/16/24/32/56px observed). The page is full-bleed, edge-to-edge, divided into stacked full-width sections each separated by a 1px oxblood rule — no centered max-width container; only text columns are capped (max-w-md/max-w-lg/max-w-sm). The composition: (1) a 100vh masthead with utility bars, the giant wordmark, and two stacked marquees pinned to its bottom; (2) the periodic table — a 14-column CSS grid with 120px rows, populated as a diamond (8/10/12/14/14/12/10/8 cells) over a faint background image; (3) the editorial book — a 100vh perspective:1400px stage holding four absolutely-stacked spreads built on a 12-column grid (5/7 and 7/5 splits with full-bleed imagery); (4) the oxblood footer with a multi-column legal-text block (columns-1…4 with column rules). Whitespace is generous inside spreads (p-8 md:p-14) but the global rhythm is dense and gridded, like a periodic table or a wine list.

Elevation & Depth

The system is almost entirely flat and hairline-driven — depth comes from 1px oxblood rules, dark/light panel inversions, and 3D transforms rather than shadows. The few real shadows: the .poly polaroid utility (0 12px 30px -10px rgba(0,0,0,.35)) and the producer tiles' tactile depth from their 3px colored bottom borders. Genuine z-depth is created by perspective (800px on tiles, 1400px on the book) driving rotateY flips, and by the scroll-pinned hero that scales its background 1→1.16 while its sage overlay fades 1→0.1. Image captions use a transparent-to-oxblood linear gradient.

Shapes

Brutally rectangular. border-radius is 0 everywhere — tiles, cards, badges, buttons, and image frames are all sharp-cornered to read as printed matter. The only curves in the document are the 7px circular book nav dots (border-radius:50%) and the round Tabler grape glyphs in the marquee. The recurring "shape" motif is instead the 3px colored underline beneath each producer tile and rare-allocation card — a printed-spec-sheet device.

Components

• Subscribe button — chartreuse fill, oxblood text, no radius, 12px 24px padding, 11px uppercase tracked label "Subscribe to Allocations"; hover inverts to oxblood bg / chartreuse text and scrambles its text via anime.js.
• Producer tile — ring-colored translucent fill, oxblood symbols, 6px padding, 3px region-colored bottom border, no radius; flips 180° in 3D on hover to a region-colored back face showing tasting notes + soil + "Profile →".
• Batch / producer card — flat region-tinted fill (e.g. #B8C4B4, #DEC8AE), 2–3px colored bottom border, no radius, small serif symbol + small- caps name + vintage·region; revealed via GSAP from opacity 0.
• Region badge / arrivals tag — chartreuse chip, oxblood uppercase 12px text, oxblood right border ("This Week's Arrivals ▸").
• Dark section bar — oxblood fill, sage serif title left + chartreuse 11px uppercase note right (e.g. "Hover to reveal tasting notes").
• Image caption — oxblood scrim (gradient or 70/80% panel), sage uppercase 11px eyebrow, no radius.
• Nav dot — 7px oxblood circle, 0.3 opacity; active = full opacity + scale 1.4.

Motion

Heavy, choreographed motion. Masthead reveal clips each headline line and slides it up (translateY 105%→0, 1.2s power4.out, 0.14s stagger). The hero pins on scroll while its background zooms (scale →1.16) and its overlay fades out (scrub 1.2). The periodic grid staggers in from the center across an [8,14] grid (autoAlpha + scale 0.88→1, 0.45s). Tiles flip in 3D on hover (rotateY 180°, 0.6s cubic-bezier(.16,1,.3,1)). The editorial book turns pages with a two-phase 3D flip (departing →-90° then arriving →0°, 0.38s each), driven by wheel/keyboard/touch with an 820ms lock and IntersectionObserver activation. Two marquees scroll continuously (30s left, 50s right). The subscribe button scrambles its text on hover (anime.js). All scrolling is smoothed by Lenis (lerp 0.08).

Iconography

Icons come from the Tabler webfont (ti classes), outline style. In practice only ti-grape appears, repeated as a separator in the chartreuse marquee at ~30px (text-3xl), inked oxblood. Everything else is typographic: ◆ bullets in the arrivals ticker, § section markers, → and ▸ arrows, · middots, and ⌀ for low-sulfite bottles. Icons are decorative ornamentation, never functional UI controls.

Do's and Don'ts

• Do keep the palette to sage page + oxblood ink + one chartreuse voltage; let region colors live only on tiles and underlines.
• Do use Bodoni Moda huge and Figtree small; lean on small-caps, uppercase tracking, and Roman numerals for the catalogue voice.
• Do separate every region with a crisp 1px oxblood hairline and keep corners sharp.
• Don't introduce border-radius (except the nav dots) or drop shadows for depth — depth is hairlines, panel inversion, and 3D flips.
• Don't spread chartreuse across body surfaces; it is a punctuation color.
• Don't soften the type contrast — the didone/sans tension is the brand.

Known Gaps

• The translucent tile fills (rgba(…,0.83)) and the masthead/section background images are decorative; only the listed fills and accent borders are tokenized. Many additional region color pairs (Beaujolais, Rhône, Alsace, Sicily, Piedmont, Catalonia, Georgia, etc.) are defined in the JS REGION_STYLES / RING_COLORS maps but only the seven concentric ring colors are surfaced as tokens here.
• Tabler ti-grape size is read from Tailwind text-3xl (30px); other glyphs are font characters, not icons.
• Spacing scale is inferred from observed Tailwind utilities, not an explicit declared scale.