---
version: alpha
name: heart-cut-design
description: "A warm near-black canvas (#181512) with warm cream ink (#f0ebe0), copper (#c07a3f) as the working accent, the literal color of a still, botanical green (#8a9a6f) marking only the kept 'hearts' fraction and nothing else. Vollkorn carries every headline in a sturdy trade serif, Work Sans carries prose and controls. The homepage runs one batch through four real distilling stages, each vessel on the bench genuinely different geometry."
---

## Brand Positioning

Heart Cut runs a distillery, and it exists because most craft-spirits sites sell romance, a backlit copper still, "smooth as silk" copy, instead of the actual decision that defines the product: which third of the run gets kept. The bet here is to show the real four-stage process and name the specific reason heads and tails get poured out instead of blended back in. If a component doesn't correspond to a real stage, a real cut, or the still itself, it doesn't belong here.

colors:
  accent: "#c07a3f"
  accent-alt: "#8a9a6f"
  ink: "#f0ebe0"
  ink-muted: "#b0a493"
  canvas: "#181512"

## Logo / Wordmark System

The mark is a pot still in profile, a bulbous body narrowing into a swan-neck, with the accent color marking the collection point at its base, where the hearts cut is actually taken. It is not a barrel, a bottle, or a cocktail glass.

```svg
<svg width="18" height="24" viewBox="0 0 18 24" aria-hidden="true">
  <path d="M6 2 L12 2 L12 10 Q17 16 12 20 Q9 22 6 20 Q1 16 6 10 Z" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.4"/>
  <rect x="7" y="14" width="4" height="6" fill="var(--accent)"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Heart Cut" in Vollkorn 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px` tall, below that the neck and body merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the collection-point rectangle to anything but `--accent`, it marks where the hearts cut is taken. Don't add a flame or steam wisps to the mark. Don't fill the whole still body solid, it stays an outline, the collection point is the only fill.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#181512` | Page background |
| Surface | `--panel` | `#201c17` | Nav, stage cards, table, form card, vessel outlines |
| Surface raised | `--raised` | `#282219` | Row hover, cta band |
| Border | `--border` | `#2c2620` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#3d3527` | Decorative-only edges, discarded heads/tails bands |
| Border UI | `--border-ui` | `#7d7264` | Every interactive boundary: secondary button, input, select, vessel outline |
| Ink | `--ink` | `#f0ebe0` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#b0a493` | Labels, meta lines, helper text |
| Copper | `--accent` | `#c07a3f` | Primary button, mark's collection point, barrel and bottle fill, the kept hearts band |
| Botanical | `--accent-alt` | `#8a9a6f` | The bottle label, second-page status |

Copper only fills a vessel once its contents are actually the kept fraction: the hearts band in stage two, the barrel in stage three, the finished bottle in stage four. Stage one's mash tank stays neutral, because a wash isn't spirit yet. The discarded heads and tails bands in stage two stay in the neutral `--border-strong`, never colored, because they never reach the bottle.

### Contrast (computed from the hex values above via WCAG relative luminance)

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 15.30:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.25:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 7.43:1 | AAA |
| `--dim` on `--panel` | 6.92:1 | AAA |
| `--dim` on `--raised` | 6.43:1 | AA |
| `--accent` on `--bg` (links, mark's collection point) | 5.28:1 | AA |
| `--accent` on `--panel` | 4.92:1 | AA |
| `--accent` on `--raised` | 4.57:1 | AA |
| `--accent-alt` on `--bg` (bottle label, status) | 6.00:1 | AA |
| `--accent-alt` on `--panel` | 5.59:1 | AA |
| `--accent-alt` on `--raised` | 5.20:1 | AA |
| dark label (`#1c0f04`) on `--accent` fill (primary button) | 5.45:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.86:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.60:1 | AA (1.4.11) |

`--border-strong` is kept for decorative-only uses, the discarded heads and tails bands, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Vollkorn
    fontWeight: 600
  body:
    fontFamily: Work Sans
    fontWeight: 400

## Type Scale

| Token | Size | Weight | Family | Line-height | Letter-spacing | Used for |
|---|---|---|---|---|---|---|
| `--text-display` | `clamp(2.1rem, 5vw, 3.4rem)` | 600 | Vollkorn | 1.15 | 0 | Homepage H1 |
| `--text-page-h1` | `clamp(1.9rem, 4vw, 2.6rem)` | 600 | Vollkorn | 1.15 | 0 | Second-page H1 |
| `--text-h2` | `1.5rem` | 600 | Vollkorn | 1.2 | 0 | Section headings |
| `--text-h3` | `1.1rem` | 600 | Vollkorn | 1.2 | 0 | Stage names |
| `--text-body` | `1rem` | 400 | Work Sans | 1.6 | 0 | Paragraph copy |
| `--text-small` | `0.88rem` | 400 | Work Sans | 1.55 | 0 | Table cells, footer, meta lines |
| `--text-label` | `0.78rem` | 700 | Work Sans | 1 | 0.05em, uppercase | Form labels, table headers, stage numbers |

Vollkorn's sturdy serif reads as trade-built rather than typeset, reserved for headlines only. Work Sans carries every sentence and every control at 400 for prose and 700 for labels.

## Spacing Scale

Base unit `8px`. Tokens in use: `--space-2: .5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`.

## Shape

`--radius: 4px` on cards and buttons, `--radius-sm: 3px` on inputs. Small and workshop-plain, reading as a bench and a collection vessel, not a decorative rounding choice.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own bench-and-vessels illustration (hand-built SVG). A cut or stage is always named in text, never implied by color alone.

## Motion Principles

Scroll runs one batch through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry vessel, positioned at a fixed bench location, scaling from `0` to `1` with a slight overshoot as its own scroll segment completes, the same one-shot settle this gallery's other "N items arrive in sequence" systems use. The domain-specific detail is in the geometry: stage one is a plain fermenter tank, stage two is a graduated cylinder with three bands where only the middle "hearts" band is colored, stage three is a rounded barrel, stage four is a labeled bottle, so each vessel is genuinely a different real object, not the same shape recolored four times. Each stage's static bench position and its animated scale live on separate nested groups from the first draft, per the lesson carried forward from earlier systems this batch. One-shot sequence: nothing loops, and every stage is written out in the card grid regardless of scroll or script state.

The scroll trigger measures the page's real available scroll room below the stage at load, minus a `16px` safety margin, and caps the distance at that figure (never more than `520px`). A viewport tall enough to leave under `20px` of room, or a `prefers-reduced-motion` visitor, gets all four stages already run and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Plain, technical, explains why the cut matters without romanticizing. Heart Cut talks like a distiller who's actually made the cut call a thousand times, not a brand selling whiskey-ad nostalgia. In practice:

- **Primary button**: "Book a tasting", not "Experience the spirit of craft"
- **The-cut copy**: "The rest is discarded, not blended back in to stretch the batch.", a direct, checkable claim about practice
- **Aging copy**: "The barrel does more to the final flavor than the still does.", stated as a real proportional fact
- **Bottling copy**: "The last step, not a shortcut past the first three.", a plain sequencing statement
- **Status**: "Still is running today, tasting room opens hourly."

The tell that a sentence is off-brand: it reaches for whiskey-ad romance ("smooth," "legacy," "crafted") instead of naming the actual process step and why it exists.

## Accessibility Baseline

- **Focus ring**: `2px solid var(--accent)` at `2px` offset via `:focus-visible` on every link, button, input, and select, never removed.
- **Reduced motion**: honored on the vessel-reveal sequence, as described under Motion Principles. No scroll listener is attached at all when reduce is set, or when there's no real scroll room to attach one to meaningfully.
- **The bench-and-vessels graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every stage's name and process description is in the card grid below in plain markup at all times.
- **Tap targets**: `44px` minimum height on every button, nav link, and form control.
- **Structure**: one `<h1>` per page, headings in order, `nav` / `main` / `footer` landmarks, `aria-current="page"` on the active nav link.

## Components

### Navigation
Single line, `64px`, `--panel` with a `--border` bottom hairline, sticky. Left: the mark plus wordmark lockup. Right: a "Spirits" link and exactly one primary button. Below 480px the first nav link drops, the primary button stays.

### Buttons
Two variants, `4px` radius, `44px` minimum height:
- **Primary**: `--accent` fill, a near-black `#1c0f04` label, brightness lift on hover. Once per view, for the real action ("Book a tasting").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and vessels (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four vessel groups, each an outer static-position group wrapping an inner scale-animated shape that's genuinely different geometry per stage.

### Stage card
A flat panel: `--panel` background, `1px solid --border`, `4px` radius. Leads with a stage number, then the process name, then a real one-sentence description of what happens and why. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Spirits table (second page)
`--raised` header row in `--text-label`, `--panel` body rows, one `--border` rule between rows, a `<caption>` naming the order.

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying a note on why heads and tails aren't safe to drink. Square, matching the rest of this batch's own resolution for the same accent-bordered notice pattern.

### Form
Label above control in `--text-label`. Select and input share `--bg` fill, `1px solid --border-ui`, `3px` radius, `44px` height, `--raised` fill plus an accent border on focus.

### Footer
Two-part row: an honest note that the distillery is fictional, and a link list back to the other page and the gallery. No invented legal text.

## Do's and Don'ts

### Do
- Fill a vessel copper only once its contents are actually the kept hearts fraction.
- Draw a genuinely different vessel per stage, not the same shape recolored.
- State the real process reason a stage exists, not whiskey-ad romance.
- Keep each stage's static position and animated scale on separate nested groups, never the same element.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of a backlit copper still or a "smooth as silk" cliche.
- Don't write romanticized whiskey-ad copy, name the actual process and cut.
- Don't use a cartoon still mascot or splash decoration.
- Don't replay the run sequence on every scroll pass, it runs once, like a real batch.
- Don't round anything into a pill, a still reads industrial.
- Don't color the discarded heads or tails bands, they never reach the bottle.

### Deliberate exception

The spirits page's `.notice` element carries a `3px` `--accent-alt` top rule on `border-radius: 0`, the same square-plate treatment every other system built this batch reached for its own accent-bordered notice. The static-HTML pass of the mechanical detector still reports `border-accent-on-rounded` on that `border-top` declaration, because its regex engine matches the property text alone and can't see the resolved `border-radius: 0`, the same documented false positive every one of this batch's notices produces. The element is square, confirmed by reading the resolved CSS rule directly.

## Known Constraints

- Two routes exist (home, spirits). There is no live batch tracker and no authenticated state. "Book a tasting" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence every spirit here follows. Gin, which is redistilled with botanicals rather than aged, follows a shorter variant, named as an exception on the spirits page rather than folded into this hero.
- Responsive behavior is two breakpoints (900px, 700px, 480px) plus fluid type. There is no tablet-specific layout beyond the table's restack point.

## Process

Built through the impeccable-audited anti-slop workflow: never-list written
before any HTML, page structure derived from the signature interaction
(the bench and the four distilling stages) rather than a template, the
scroll-trigger distance computed from real measured scroll room with a
safety margin from the outset, static-position-versus-animated-transform
composition handled correctly from the first draft, and the mechanical
detector run clean.