name: barcraft-design
version: alpha
description: >
  An editorial bartender's study app rendered like a printed cocktail atlas:
  warm cream paper (#F2EBD6) under near-black ink (#1C1710), with a trio of
  liqueur "voltages" — amber gin (#A5742E), campari red (#B82E26), and rose
  vermouth (#D8968E). The signature move is a hand-drafted Sankey flow diagram
  built in raw SVG with diagonal hatch-pattern ribbons pouring ingredients into
  a wireframe rocks glass. Fraunces serves the oversized italicized display
  headlines, Inter the body, and JetBrains Mono every spec, label, and tabular
  number. Geometry is mostly sharp: hairline ink borders, tiny radii, pill chips,
  crosshatch and stripe fills, and a centered technique "ladder" that draws in on
  scroll.
colors:
  # Surface
  cream: '#F2EBD6'        # primary page background, dark-section text color
  cream-panel: '#F8F2DD'  # Sankey diagram panel fill (lighter cream)
  paper-2: '#EDE4C6'      # stacked-paper pseudo-element behind flip card
  paper-3: '#E5DBB8'      # second stacked-paper sheet
  ink: '#1C1710'          # near-black ink: text, borders, dark sections
  ink-deep: '#0e0a06'     # darkest surface, flashcards section
  # Brand / Ingredient voltages
  amber: '#A5742E'        # gin / base spirit accent + swatch + hatch fill
  campari: '#B82E26'      # campari red — primary accent, active states, links
  rose: '#D8968E'         # sweet vermouth — secondary accent, soft cards
  amber-deep: '#8a5f24'   # hatch line over amber ribbon
  campari-deep: '#8a1f19' # hatch line over campari ribbon
  rose-deep: '#b86b62'    # hatch line over rose ribbon
  # Text (on cream)
  text: '#1C1710'         # body + headings on cream (ink)
  text-muted: 'rgba(28,23,16,0.75)'  # body paragraphs
  text-faint: 'rgba(28,23,16,0.55)'  # captions, mono labels
  # Text (on ink / dark)
  on-ink: '#F2EBD6'       # cream text on ink surfaces
  on-ink-muted: 'rgba(242,235,214,0.65)' # muted cream
  on-ink-faint: 'rgba(242,235,214,0.40)' # faint cream labels
  # Hairlines
  border-ink: '#1C1710'   # full-strength ink hairline
  border-ink-soft: 'rgba(28,23,16,0.15)' # soft ink hairline / dividers
  border-cream-soft: 'rgba(242,235,214,0.15)' # hairline on ink surfaces
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(26px, 6vw, 88px)
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.02em
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 16px
    fontWeight: 400
    fontStyle: italic
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.65
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:
  none: 0px       # SVG nodes, checkboxes, image masks
  xs: 4px         # rounded / rounded-sm — cards, panels, stacked paper
  md: 8px         # rounded-lg — video frame
  full: 999px     # chips, pills, swatches, search input, buttons, avatar
spacing:           # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px         # px-10 main gutter
  xxl: 56px        # py-14 section padding
components:
  sidebar:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.on-ink}'
    typography: '{typography.body}'
    width: '220px'
    border: '1px hairline {colors.border-cream-soft} between blocks'
  navItemActive:
    textColor: '{colors.on-ink}'
    indicator: '2px {colors.campari} bar on left edge (::before)'
  chip:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
    fontSize: '11px'
  chipOn:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    rounded: '{rounded.full}'
  buttonInk:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    hoverBackgroundColor: '{colors.campari}'
    rounded: '{rounded.full}'
    padding: '6px 16px'
    typography: '{typography.body}'
  searchInput:
    backgroundColor: 'transparent'
    border: '1px solid {colors.border-ink-soft}'
    focusBorder: '{colors.ink}'
    rounded: '{rounded.full}'
    padding: '6px 16px 6px 36px'
  ingredientCard:
    backgroundColor: '{colors.rose} | {colors.amber} | {colors.campari} | {colors.cream}'
    textColor: '{colors.ink} | {colors.cream}'
    border: '1px solid {colors.border-cream-soft} or {colors.border-ink-soft}'
    rounded: '{rounded.xs}'
    padding: '20px'
    overlay: 'crosshatch / stripes-light pattern'
  flipCard:
    backgroundColor: '{colors.cream} (front) / {colors.ink} (back)'
    border: '1px solid {colors.ink} (front) / {colors.border-cream-soft} (back)'
    rounded: '{rounded.xs}'
    padding: '28px / 24px'
    size: '380x500px'
    behavior: '3D rotateY flip with stacked-paper shadow'
  statTile:
    backgroundColor: 'transparent'
    border: '1px solid {colors.border-ink-soft} or {colors.border-cream-soft}'
    rounded: '{rounded.xs}'
    padding: '8px / 12px'
    typography: '{typography.mono}'
  sankeyPanel:
    backgroundColor: '{colors.cream-panel}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.xs}'
    headerFooter: '{colors.cream} strips with {colors.border-ink-soft} dividers'
motion:
  drawRibbon: 'stroke-dashoffset 2000→0 over 2.4s ease-out forwards, staggered 0.1/0.4/0.7s — Sankey ribbons draw in'
  fillUp: 'scaleY(0)→1 over 2s ease-out, delay 1.4/1.6/1.8s, transform-origin bottom — glass liquid fills'
  flipCard: 'transform rotateY(180deg) over 0.9s cubic-bezier(.2,1.3,.4,1) — overshoot flip on click'
  spineLine: 'scaleY(0)→1 over 1.5s cubic-bezier(0.22,1,0.36,1) on scroll-into-view — technique spine draws down'
  stepReveal: 'opacity 0→1 + translateY(30px)→0 over 0.7s ease, staggered 0.15s per step via IntersectionObserver'
  btnHover: 'btn-ink background ink→campari on hover'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { sm: 11px, md: 14px, lg: 16px, xl: 22px }
  color: 'inherits currentColor — {colors.ink}, {colors.cream}, or accent'
  decorative: game-icons (delapouite/lorc SVGs) for bottle illustrations in cards

BarCraft (Vermuth Atlas)

barcraft-design · alpha

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

Overview

BarCraft is a bartender's study app dressed as a letterpress cocktail atlas. The whole canvas is warm cream paper (#F2EBD6) printed in near-black ink (#1C1710), and the brand runs on three liqueur "voltages" — amber gin (#A5742E), Campari red (#B82E26), and rose vermouth (#D8968E) — that recur as swatches, ribbon fills, card backgrounds, and accent text. The signature move is a hand-drafted Sankey flow diagram built entirely in raw SVG: three diagonal hatch-pattern ribbons (<pattern> rotated 45°/-45°) draw themselves in and pour through a "stirring zone" midline into a wireframe rocks-glass clip path, where layered liquid fills scale up from the bottom. Type does the editorial heavy lifting: Fraunces (optical-sizing on, -0.02em) sets oversized headlines up to 88px with romantic italic spans (Neg<i>ro</i>ni), Inter carries the body at 13px, and JetBrains Mono stamps every spec line, breadcrumb, tracking-0.25em uppercase label, and tabular number. Geometry is deliberately print-like: hairline ink borders instead of shadows, near-zero radii on panels, pill chips, crosshatch/stripe texture overlays, and a centered technique "ladder" with a spine that draws down and steps that fade in on scroll.

Colors

Surface. The page is cream #F2EBD6 (.bg-cream) with ink text. The Sankey panel uses a slightly lighter #F8F2DD; the flip card's stacked-paper shadow sheets are #EDE4C6 and #E5DBB8. Two dark surfaces invert the system: the sidebar and Library section use ink #1C1710 (.bg-ink) with cream text, and the Flashcards section drops to the darkest #0e0a06 with a radial cream glow-spot.

Brand / ingredient voltages. Three liqueur colors carry meaning throughout: amber #A5742E = gin/base spirit, campari #B82E26 = the primary accent (active nav bar, links, live dots, progress fills, hover state), and rose #D8968E = sweet vermouth/secondary accent. Each has a darker partner used only as the hatch stroke inside its SVG ribbon: #8a5f24, #8a1f19, #b86b62.

Text. On cream, headings and body are ink; paragraphs run at rgba(28,23,16,0.75), captions/labels at 0.55. On ink surfaces, text is cream with 0.65 muted and 0.40 faint variants.

Hairlines. Borders carry the structure: full-strength border-ink #1C1710, soft rgba(28,23,16,0.15) (.border-ink-soft) for dividers, and rgba(242,235,214,0.15) for hairlines on ink surfaces.

Typography

Three Google Fonts via one @import: Fraunces (display serif, optical sizing 9..144, weights 400–700), Inter (body sans, 300–600), and JetBrains Mono (mono, 400/500, tnum enabled). All open-source — no substitution needed. Fraunces is the personality: -0.02em tracking, frequent italic spans, and oversized line-heights down to 0.86.

Token	Size	Weight	Line-height	Tracking	Usage
display	up to 88px (also 48/64/42/34/26/24px)	500	0.86–1.0	-0.02em	Headlines, drink names, stat numbers
display-italic	15–18px	400 italic	tight	-0.02em	Taglines, "Florence, 1919", pull quotes
body	11–13px	400	1.65	0	Paragraphs, card descriptions
mono	10–11px	400	—	0.18–0.30em	Labels, breadcrumbs, specs, tabular oz/ABV

Layout

Base unit 4px on the Tailwind scale. The app is a fixed 220px ink sidebar + fluid main column. Main stacks full-bleed sections at px-10 (40px) gutters: a 12-column cocktail viewer (3-col specs / 9-col Sankey), a centered max-5xl technique ladder (2-col grid straddling a center spine, steps alternating left/right), a 12-column ingredient library (3-col filters + 9-col masonry grid using row-span-2 for tall cards), and a 12-col flashcards stage (3/6/3 meta / card / actions). Whitespace is generous and editorial; hairline dividers separate every section header. Texture fills (crosshatch, stripes-light, dotleader, 40px grid lines) add print grain.

Elevation & Depth

Almost no shadows — depth comes from hairline ink borders and texture. The one real elevation is the flip card's stack-paper pseudo-elements: two rotated (±2deg) cream sheets (#EDE4C6, #E5DBB8) offset behind it to fake a deck of cards. The Flashcards section adds a radial glow-spot of faint cream over the near-black surface. Crosshatch and stripe overlays sit at 20–30% opacity on cards; a 40px ink grid sits at 6% behind the Sankey.

Shapes

Mostly sharp. Panels, cards, and the Sankey use rounded/rounded-sm (4px) or sharp 0; the video frame is rounded-lg (8px). SVG diagram nodes, checkboxes, and image masks are square. Everything interactive that isn't a card is a full pill (999px): chips, the search input, buttons, swatches, avatar, progress bars, slider handles. The contrast of crisp editorial rectangles against pill controls is the shape signature.

Components

• Sidebar — ink fill, cream text, 220px; brand "Vermuth." with campari period; mono section labels at 0.20em; nav items with active campari left bar.
• Nav item (active) — .tab-active::before 2px campari bar, full cream text; inactive items cream/70 brightening on hover.
• Chip — pill, 1px ink border, mono 11px uppercase 0.06em, 4px 10px; .chip-on inverts to ink fill / cream text. On ink surfaces, border flips to cream.
• Button (ink) — pill, ink fill, cream text, hover → campari; "Drill" with play icon.
• Search input — transparent pill, soft-ink border, focus border ink, leading search icon, w-72.
• Ingredient card — rounded-sm, 20px padding, voltage or cream background, crosshatch/stripe overlay, mono category label, Fraunces name with italic span, bottle illustration, mono "USED IN N DRINKS →" footer.
• Flip card — 380×500, cream front / ink back, 1px border, 3D rotateY flip, stacked-paper shadow; front shows "RECALL" + empty glass SVG, back shows mini Sankey + ingredient list + method.
• Stat tile — bordered rounded-sm box, mono micro-label + Fraunces number.
• Sankey panel — #F8F2DD fill, 1px ink border, cream header/footer strips with mono labels and live dot.

Motion

Five authored animations: Sankey ribbons draw in via stroke-dashoffset (drawRibbon, 2.4s, staggered), glass liquid fills up via scaleY (fillUp, 2s, delayed 1.4–1.8s), the flashcard flips on click with an overshoot cubic-bezier (0.9s), the technique spine draws down (spineLine, 1.5s) and steps fade up (stepReveal, 0.7s, staggered 0.15s) on scroll via IntersectionObserver, and btn-ink shifts ink→campari on hover. All are active (not disabled).

Iconography

Tabler Icons webfont (ti ti-*), outline style, at 11/14/16/22px, colored by currentColor (ink, cream, or accent) — used for nav glyphs, search, play, technique step badges (snowflake, rotate, temperature, filter, droplet, check), bookmarks, and swipe arrows. Bottle illustrations inside library cards are decorative game-icons SVGs (delapouite/lorc), inverted to read on dark fills.

Do's and Don'ts

• Do keep the cream/ink base and reserve amber/campari/rose for ingredient meaning and accents.
• Do set every number, label, and breadcrumb in JetBrains Mono with wide uppercase tracking; let Fraunces italics carry the romance.
• Do structure with hairline borders and texture, not drop shadows.
• Don't introduce rounded corners beyond 4–8px on panels/cards (controls stay full pills).
• Don't add gradients or glossy fills — the look is matte printed paper with hatch/stripe grain.
• Don't let accent colors lose their ingredient mapping (amber=gin, campari=bitter, rose=vermouth).

Known Gaps

• Display fontSize token is expressed as a clamp() spanning the real fixed sizes used (26–88px); the HTML hard-codes individual sizes rather than a fluid clamp.
• Spacing tokens are inferred from the Tailwind utility scale actually used (px-10, py-14, gap-10, etc.); no explicit spacing variables exist in the markup.
• Stacked-paper, crosshatch, stripes, dotleader, and glow-spot are CSS background patterns; their visual depth is described qualitatively, not as shadow values.