name: cafe-ops-design
version: alpha
description: >
  A single-sheet restaurant service log styled as an aged, foxed paper document
  — warm taupe-grey stock (`#C5BFAE`) printed in near-black ink (`#1A1814`),
  with a layered paper-fibre weave and sepia age-spots baked into the
  background. The system is editorial-bureaucratic: a Roboto Slab / Playfair
  Display serif for headings and dish names, Inter for labels, and an
  IBM Plex Mono with tabular figures for every number, time, and price. Ink-rule
  hairlines, double rules, dotted leaders, a brutalist 2-4px grid, and a zigzag
  torn-edge footer carry the structure. Tiny voltage colors do the signalling:
  forest green (`#3A6A4A`) for done/seated, mustard (`#D69E3A`) for low/dessert,
  and brick red (`#B43A2A`) for 86'd/overdue/VIP.
colors:
  # Surface
  surface-paper: '#C5BFAE'        # the .sheet stock fill; page is a 3-stop radial CDC8BA→C5BFAE→B8B19F
  surface-paper-light: '#CDC8BA'  # top of the page radial gradient
  surface-paper-dark: '#B8B19F'   # bottom/edge of the page radial gradient
  surface-inverse: '#1A1814'      # ink-black fills: notice ticker, tooltips, zigzag base
  # Ink / Text
  ink: '#1A1814'                  # primary ink for all headings, body, rules, borders
  ink-on-dark: '#E0DAC7'          # cream text on the ink-black ticker & tooltips
  # Voltage / Semantic
  voltage-green: '#3A6A4A'        # done checkbox, seated status, walk-in capacity number
  voltage-mustard: '#D69E3A'      # LOW pill, dessert status, low-stock figures, NOTICE diamond, allergy ⚠
  voltage-brick: '#B43A2A'        # 86'D pill, eighty-six strikethrough, overdue, VIP, peak bar
  # Hairlines / Tints (all derived from ink #1A1814 via opacity)
  hairline-strong: 'rgba(26,24,20,0.2)'   # .h-rule, region dividers
  hairline-faint: 'rgba(26,24,20,0.15)'   # tick-cell tops, list divide-y
  foxing: 'rgba(120,90,40,0.14)'          # sepia age-spot blots, multiply-blended
typography:
  display-serif:
    fontFamily: "'Roboto Slab','Playfair Display',serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1
  section-serif:
    fontFamily: "'Roboto Slab','Playfair Display',serif"
    fontSize: 22px
    fontWeight: 400
  dish-serif:
    fontFamily: "'Roboto Slab','Playfair Display',serif"
    fontSize: 17px
    fontWeight: 400
  serif-italic:
    fontFamily: "'Playfair Display',serif"
    fontSize: 13px
    fontWeight: 400
    fontStyle: italic
  label-caps:
    fontFamily: "'Inter',sans-serif"
    fontSize: 10px
    fontWeight: 600
    letterSpacing: 2.5px       # tracking-[.25em] on uppercase section labels
    textTransform: uppercase
  body-sans:
    fontFamily: "'Inter',sans-serif"
    fontSize: 13px
    fontWeight: 400
  mono-figure:
    fontFamily: "'IBM Plex Mono',monospace"   # font-variant-numeric: tabular-nums
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1
  mono-data:
    fontFamily: "'IBM Plex Mono',monospace"
    fontSize: 11px
    fontWeight: 400
rounded:                        # radius scale — the system is brutalist / zero-radius
  none: 0px
spacing:                        # base unit 4px; Tailwind scale, px-6 (24px) is the column gutter
  xs: 4px
  sm: 6px
  md: 8px
  lg: 16px
  xl: 24px
components:
  notice-ticker:
    backgroundColor: '{colors.surface-inverse}'
    textColor: '{colors.ink-on-dark}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.none}'
    padding: '6px 24px'         # px-6 py-1.5; NOTICE diamond uses voltage-mustard
  metric-cell:
    backgroundColor: '{colors.surface-paper}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-figure}'   # 40px tabular numerals + Inter caps label
    rounded: '{rounded.none}'
    padding: '16px 20px'        # px-5 py-4, divided by ink hairline borders
  region-header:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.label-caps}'
    rounded: '{rounded.none}'
    padding: '6px 24px'         # .region-hd: 2px solid top + 1px solid bottom ink rule
  menu-item:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.dish-serif}'    # name serif, price/count mono; dotted-lead between
    rounded: '{rounded.none}'
    padding: '8px 0'           # py-2, divide-y hairline-faint
  status-pill:
    backgroundColor: '{colors.voltage-mustard}'  # .low-pill; .so-pill uses voltage-brick + ink-on-dark
    textColor: '{colors.ink}'
    typography: '{typography.label-caps}'
    rounded: '{rounded.none}'
    padding: '1px 5px'         # 9px Inter 700, letter-spacing .08em
  party-chip:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.none}'
    padding: '2px 8px'         # left-border 3px keys status: confirmed=ink, seated=green, dessert=mustard, paid=faded, walk-in=dashed
  checkbox:
    backgroundColor: 'transparent'        # .check: 16px box, 1.5px ink border
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '0'              # .check.done fills voltage-green, ti-check in ink-on-dark, label struck through
  tooltip:
    backgroundColor: '{colors.surface-inverse}'
    textColor: '{colors.ink-on-dark}'
    typography: '{typography.body-sans}'
    rounded: '{rounded.none}'
    padding: '12px'           # 224px wide, rotated-square caret, fade+slide on hover
  kbd:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.none}'
    padding: '0 4px'          # .kbd: 10px mono, 1px ink border
motion:
  menu-reveal: 'GSAP gsap.from(.menu-item) — opacity 0→1, y 8→0, 0.4s, stagger 0.03, power2.out'
  wine-reveal: 'GSAP gsap.from(.wine-row) — opacity 0→1, y 6→0, 0.35s, stagger 0.02, power2.out'
  party-reveal: 'GSAP gsap.from(.party) — opacity 0→1, scale 0.97→1, 0.3s, stagger 0.015, power2.out'
  tooltip-hover: 'CSS — opacity & transform translateY(4px→0), 0.15s, on .party:hover'
  live-clock: 'JS setInterval 1000ms — #clock updates HH:MM:SS from Date()'
icons:
  library: Tabler (tabler-icons-webfont, ti ti-*)
  style: outline
  sizes: { sm: 12px, md: 22px }
  color: '{colors.ink}'

Café Ops — Service Log

cafe-ops-design · alpha

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

Overview

Café Ops is a one-sheet restaurant service log for the dinner shift, rendered as an aged paper document you'd find clipped to the pass. The surface is a warm taupe-grey stock — .sheet is #C5BFAE, sitting on a page-wide radial gradient from #CDC8BA through #C5BFAE to #B8B19F — overlaid with three layers of faint repeating hairline gradients that read as paper fibre and a multiply- blended scatter of sepia foxing blots (rgba(120,90,40,…)). Everything is printed in one near-black ink, #1A1814, which also draws every border and rule. The type story is deliberately bureaucratic-editorial: a slab/Didone serif (Roboto Slab, falling back to Playfair Display) for the date, section headings and dish names, with Playfair italic for asides; Inter for tracked-out uppercase labels; and IBM Plex Mono with tabular figures for every number, time, price and stock count. The geometry is brutalist — zero radius, 2-4px ink borders, a rigid 12-column grid split into Menu / Wine / Reservations, a double- rule header on the prep checklist, dotted leaders between dish and price, and a zigzag torn-paper edge at the foot. Color is rationed to three tiny voltages: forest green #3A6A4A (done, seated, capacity), mustard #D69E3A (low stock, dessert, the NOTICE diamond, allergy warnings) and brick red #B43A2A (86'd items, overdue prep, the VIP party, the peak-pace bar).

Colors

Surface. The working surface is surface-paper #C5BFAE, applied to the .sheet. Behind it the body paints a radial gradient from surface-paper-light #CDC8BA (top center) to surface-paper to surface-paper-dark #B8B19F at the edges, plus three repeating-linear-gradient layers at 0°, 92° and -3° in rgba(26,24,20,~0.02) that simulate paper weave. A body::before overlay scatters five foxing blots rgba(120,90,40,0.08–0.14) with mix-blend-mode: multiply. surface-inverse #1A1814 fills the inverted elements: the NOTICE ticker bar, the hover tooltips and the zigzag footer base.

Ink / Text. A single ink, ink #1A1814, does all heading, body, border and rule work. On dark fills the text flips to ink-on-dark #E0DAC7, a warm cream.

Voltage / Semantic. Three accents only. voltage-green #3A6A4A marks the done checkbox fill, the seated reservation status, and the walk-in-capacity number. voltage-mustard #D69E3A is the LOW pill, the dessert status tint, low-stock figures, the ◆ NOTICE diamond and the ⚠ allergy markers. voltage-brick #B43A2A is the 86'D pill, the eighty-six strikethrough, the overdue prep label, the VIP Béchard party border and the peak bar in the pace chart.

Hairlines / Tints. Dividers are ink at opacity: hairline-strong rgba(26,24,20,0.2) for rules and region dividers, hairline-faint rgba(26,24,20,0.15) for tick-cell tops and list divide-y. Heavier structure uses solid ink at 2-4px.

Typography

Three imported families (Google Fonts): Roboto Slab (400/500/700) with Playfair Display (incl. italics) as the serif pairing for display and dish names; Inter (400-700) for labels and UI; IBM Plex Mono (400-700) with font-variant-numeric: tabular-nums for all figures. All are open-source, so no substitution is needed. Section labels are Inter, 10px, 600, uppercase, tracked to .25em; the giant metric numbers and the live clock are IBM Plex Mono at 40px.

Token	Size	Weight	Line-height	Tracking	Usage
display-serif	34px	400	1	—	Header date "Thursday, 14 Nov."
section-serif	22px	400	—	—	Column titles, prep heading
dish-serif	17px	400	—	—	Dish names in the menu
serif-italic	11-13px	400 italic	—	—	"La Petite", producer asides, "(for two)"
label-caps	10px	600	—	.25em	Uppercase metric & region labels
body-sans	13px	400	—	—	Wine names, checklist items, tooltip body
mono-figure	40px	600	1	—	Covers/capacity numbers, service clock
mono-data	9-12px	400-600	—	—	Times, prices, counts, stock, kbd, ticker

Layout

Base unit is 4px on the Tailwind scale; px-6 (24px) is the standard column gutter, py-1.5/py-2 the row rhythm. The page is a single full-width sheet, no max-width container. The header is a 12-column strip (border-b-4 ink): a 3-col masthead (logo + date), then 2-col metric cells for Covers, Walk-in Capacity and Pace, and a 3-col right-aligned Service Clock — each separated by ink borders (border-r-2 then border-r). Below it a full-width ink NOTICE ticker. The main body is a 12-column grid split into three equal 4-col sections — Menu, Carte des Vins, Reservations — divided by border-r-2 ink rules; menu and wine are dotted-leader line items, reservations is a 15-minute timeline of party chips. Below the main, a full-width Daily Prep checklist opens with a 3px double-rule top (dbl-top) and a 4-column garde-manger / sauté / pasta / pastry grid, closing on a zigzag torn-paper bottom edge. The whitespace is dense and ledger-like — this is a working document, packed but ruled.

Elevation & Depth

There are no drop shadows. Depth comes entirely from ink rules and the layered paper texture: 4px / 2px / 1px solid ink borders, double rules (dbl-top, 3px), dotted leaders (1.5px dotted ink), and opacity hairlines. The only "floating" elements are the hover tooltips — solid #1A1814 panels with a rotated-square caret — and even they sit flat without shadow. The foxing overlay and fibre gradients add tactile, printed depth rather than UI elevation.

Shapes

Resolutely zero-radius. Every box, pill, chip, checkbox and tooltip is a sharp rectangle (rounded.none). The signature shapes are linear, not rounded: the 1.5px dotted leader that fills the gap between a dish and its price, the zigzag sawtooth made from two 45°/-45° linear-gradient tiles, the status left-borders (3px solid/dashed) on party chips, and the 16px outlined checkbox that fills green when done. The little flags are striped linear-gradient rectangles with a faint outline.

Components

• notice-ticker — ink #1A1814 bar, cream #E0DAC7 mono text, px-6 py-1.5, leads with a mustard ◆ NOTICE; single-line scroll of service alerts.
• metric-cell — header KPI block, transparent on paper, 40px mono numeral over a 10px tracked Inter caps label, px-5 py-4, separated by ink borders.
• region-header (.region-hd) — section label band, 2px ink top + 1px ink bottom rule, transparent fill, label-caps left + mono hint right.
• menu-item — serif dish name, optional LOW/86'D pill, dotted-lead, then mono pulled/par count and right-aligned $ price; py-2, hairline divide-y.
• status-pill — LOW = mustard fill on ink text; 86'D (so-pill) = brick fill on cream; 9px Inter 700, 1px 5px, zero radius.
• party-chip (.party) — mono reservation tag (e.g. "×6 BÉCHARD"), px-2 py-0.5, 3px left-border keying status: confirmed = solid ink, seated = green tint+border, dessert = mustard tint+border, paid = faded grey, walk-in = dashed ink. Hover reveals a tooltip.
• checkbox (.check) — 16px box, 1.5px ink border; .done fills voltage-green with a cream ti-check and strikes the label through in green.
• tooltip — 224px #1A1814 panel, cream text, p-3, serif name + muted detail lines, rotated-square caret; fades and slides up on hover.
• eighty-six — sold-out treatment: brick-red 3px line-through on the dish name.
• kbd — 10px mono in a 1px ink box, 0 4px — keycap styling (authored, util).
• flag — 14×10px striped gradient country flag with rgba outline, inline by wine region.

Motion

On load, GSAP staggers three reveals from the bundled CDN: .menu-item (opacity+y:8, 0.4s, 0.03 stagger), .wine-row (opacity+y:6, 0.35s, 0.02) and .party (opacity+scale:0.97, 0.3s, 0.015), all power2.out. Tooltips animate in CSS — opacity and a 4px translateY over 0.15s on .party:hover. A vanilla JS setInterval ticks the #clock Service Clock every second in HH:MM:SS. No scroll, parallax, or persistent looping animation otherwise.

Iconography

Tabler icons via the tabler-icons-webfont CDN, used sparingly: ti-clipboard- check (22px) heads the prep checklist, and ti-check (12px) marks completed tasks inside the done checkboxes. Outline style, inheriting ink #1A1814 (the check turns cream on the green done fill). Decorative diamonds (◆) and warnings (⚠) are plain unicode glyphs colored by voltage, not icon-font glyphs.

Do's and Don'ts

• Do keep everything in the single ink #1A1814 and ration the three voltages strictly to their meanings (green=good/done, mustard=low/warn, brick=out/critical).
• Do use IBM Plex Mono with tabular figures for every number so columns of prices, times and stock align.
• Do structure with ink rules, dotted leaders and double/zigzag edges — the document reads as printed paper.
• Don't introduce border-radius, drop shadows, or gradients-as-decoration; the only gradients are the paper texture and the flag/zigzag tiles.
• Don't add a fourth accent color or use the voltages for plain emphasis.
• Don't swap the serif/mono split — serif for names and headings, mono for data, Inter for tracked labels.

Known Gaps

• The paper-fibre and foxing textures are layered CSS gradients; their exact per-layer opacities (~0.012–0.030 fibre, 0.08–0.14 foxing) are read directly from the rules but their visual blend is approximate to describe.
• Spacing tokens (xs–xl) are inferred from the Tailwind utility classes actually used (gap, px-6, py-1.5/2), not from a declared scale.
• letterSpacing for label-caps is given as 2.5px (.25em at 10px); the LOW/86'D pills use a tighter .08em and the masthead mono uses .3em/.2em.
• mono-data spans 9-12px across ticker, prices, times and stock; the token records 11px as the representative size.