---
version: alpha
name: snap-test-design
description: "A deep cacao-brown canvas (#20130e) with warm cream ink (#f2e8dc), gold (#d4a838) as the working accent and the literal sheen of properly tempered chocolate, raspberry (#d05f80) as a pairing-note secondary. Prata carries every headline in an elegant display serif, Nunito carries prose and controls. The homepage tempers one batch through four real stages, each chocolate sample on the slab genuinely different in texture and form."
---

## Brand Positioning

Snap Test makes chocolate, and it exists because most chocolatier sites sell "indulgent" and "decadent" as if those words explained anything, and skip the actual craft: tempering, the four-stage process that decides whether a bar snaps clean or crumbles dull. The bet here is to show the real process and name the specific technical reason each stage exists. If a component doesn't correspond to a real stage, a real technique, or the slab itself, it doesn't belong here.

colors:
  accent: "#d4a838"
  accent-alt: "#d05f80"
  ink: "#f2e8dc"
  ink-muted: "#c2a68c"
  canvas: "#20130e"

## Logo / Wordmark System

The mark is a chocolate bar broken in half, one clean straight break line down the middle, the near half in outline, the far half filled gold to suggest the visible sheen a good temper produces. It is not a cocoa bean, a drizzle, or a heart shape.

```svg
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
  <rect x="1" y="4" width="8" height="14" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.3"/>
  <rect x="11" y="4" width="8" height="14" fill="var(--accent)" stroke="var(--border-ui)" stroke-width="1.3"/>
  <line x1="10" y1="4" x2="10" y2="18" stroke="var(--border-ui)" stroke-width="1" stroke-dasharray="2 2"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Snap Test" in Prata, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px`, below that the two halves and the break line merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the filled half to anything but `--accent`. Don't close the dashed break line into a solid seam, it stays a break, a bar snapped in half, not a whole bar. Don't add a drizzle or a bite mark.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#20130e` | Page background |
| Surface | `--panel` | `#2a1912` | Nav, stage cards, table, form card |
| Surface raised | `--raised` | `#331f16` | Row hover, cta band |
| Border | `--border` | `#35251b` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#493426` | Decorative-only edges, slab plank |
| Border UI | `--border-ui` | `#8a7060` | Every interactive boundary: secondary button, input, select, chocolate outlines |
| Ink | `--ink` | `#f2e8dc` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#c2a68c` | Labels, meta lines, helper text |
| Gold | `--accent` | `#d4a838` | Primary button, mark's filled half, seed crystals, the finished tempered bar |
| Raspberry | `--accent-alt` | `#d05f80` | Second-page status, pairing notes |

Gold only fills a chocolate sample once it's actually finished and tempered, stages one through three keep the chocolate in a plain cacao brown, so the color change on the slab marks a genuine milestone rather than decorating four identical shapes. The gold seed-crystal dots in stage two are the same token deliberately, they're the literal already-tempered chocolate being stirred in, the same material the finished bar becomes.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 14.95:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 13.92:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 7.86:1 | AAA |
| `--dim` on `--panel` | 7.31:1 | AAA |
| `--dim` on `--raised` | 6.77:1 | AAA |
| `--accent` on `--bg` (links, mark's filled half) | 8.15:1 | AAA |
| `--accent` on `--panel` | 7.59:1 | AAA |
| `--accent` on `--raised` | 7.01:1 | AAA |
| `--accent-alt` on `--bg` (status, pairing notes) | 4.85:1 | AA |
| `--accent-alt` on `--panel` | 4.52:1 | AA |
| `--accent-alt` on `--raised` (large text and UI only) | 4.18:1 | AA (large/UI only) |
| dark label (`#1f1503`) on `--accent` fill (primary button) | 8.11:1 | AAA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.93:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.66:1 | AA (1.4.11) |

`--accent-alt` on `--raised` clears large-text and non-text UI use (4.18:1) but falls short of the small-text 4.5:1 minimum, so the cta band, which sits on `--raised`, keeps its heading and body copy in `--ink` and `--dim`, never small raspberry text there. `--border-strong` is kept for decorative-only uses, the slab plank, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Prata
    fontWeight: 400
  body:
    fontFamily: Nunito
    fontWeight: 400

## Type Scale

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

Prata's elegant display serif reads as considered without being fussy, reserved for headlines only. Nunito 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 clean, reading as a snapped bar's own edge, not a decorative rounding choice.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own slab-and-chocolate illustration (hand-built SVG). A stage's real technique and temperature is always stated in text, never implied by color alone.

## Motion Principles

Scroll tempers one batch of chocolate through four real stages, laid out left to right on a marble slab. Each stage is a fixed-geometry chocolate sample, positioned at a fixed slab 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 loose glossy pool, stage two adds gold seed-crystal dots stirred in, stage three shows worked ribbon strokes from tabling, stage four is a clean rectangular bar with a visible sheen highlight, so each sample is genuinely different, not the same blob recolored four times. 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 tempered and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise, a little proud of the craft, no dessert-menu flowery language. Snap Test talks like a chocolatier who's actually tempered a thousand batches, not a menu selling indulgence. In practice:

- **Primary button**: "Shop bars", not "Indulge in decadence"
- **Melting copy**: "You can't build a good structure on a bad one.", a direct technical claim
- **Tabling copy**: "The actual test that the temper is taking.", stated as a real diagnostic step
- **Molding copy**: "Fast cooling ruins the snap.", a plain cause-and-effect fact
- **Status**: "Tempering today, bars ready by afternoon."

The tell that a sentence is off-brand: it reaches for "indulgent," "decadent," or "irresistible" instead of naming the actual technique or temperature.

## 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 tempering 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 slab-and-chocolate 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 technique 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 "Shop" 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 `#1f1503` label, brightness lift on hover. Once per view, for the real action ("Shop bars").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The slab and chocolate (signature)
Documented in full under Motion Principles. Structurally: a static slab plank and four chocolate-sample groups, each a fixed-position 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 technique name, then a real one-sentence technical description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Shop 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 bloom-versus-untempered explanation. 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 shop 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 chocolate sample gold only once it's actually finished and tempered.
- Draw a genuinely different sample per stage, not the same blob recolored.
- State the real technical reason a stage matters, not a flavor adjective.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of chocolate drizzled in slow motion or "indulgent" copy.
- Don't write vague flavor adjectives without a technique behind them, name the actual stage.
- Don't use a cartoon cocoa-bean mascot or steam/swirl decoration.
- Don't replay the tempering sequence on every scroll pass, it tempers once, like a real batch.
- Don't round anything into a pill, tempered chocolate reads precise.
- Don't set small `--accent-alt` text on `--raised`, the pairing falls short of the small-text minimum.

### Deliberate exception

The shop 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, shop). There is no live inventory count and no authenticated state. "Shop bars" produces a client-side confirmation only, this is a concept demo.
- The slab shows exactly four stages because that's the real tempering sequence every bar here follows. Enrobing (coating a filled center) is a separate, later process, out of scope for this hero, which covers the base chocolate only.
- 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 slab and the four tempering stages) rather than a template, the
scroll-trigger distance computed from real measured scroll room with a
safety margin from the outset, and the mechanical detector run clean.