---
version: alpha
name: crumb-and-crust-design
description: "A warm flour-cream canvas (#f5efe2) with near-black ink (#2e2318), crust-brown (#7a3e1f) as the working accent and the literal color of a baked crust, wheat-gold (#82631a) marking scoring and status. Besley carries every headline in a warm slab-adjacent serif, Jost carries prose and controls. The homepage bakes one loaf through four real stages, the dough genuinely taller and more developed at each one, height itself carrying the meaning."
---

## Brand Positioning

Crumb & Crust bakes bread, and it exists because most bakery sites sell "rustic" and "artisan" as a mood, flour dust in golden light, and skip the actual reason a real loaf takes most of a day: hours of unattended fermentation are where the flavor and structure actually happen, not a delay before the oven. The bet here is to show the real four-stage timeline, and let the loaf's own height carry the meaning, since a proofing loaf genuinely does get taller at each stage. If a component doesn't correspond to a real stage, a real timing, or the loaf itself, it doesn't belong here.

colors:
  accent: "#7a3e1f"
  accent-alt: "#82631a"
  ink: "#2e2318"
  ink-muted: "#6b5d48"
  canvas: "#f5efe2"

## Logo / Wordmark System

The mark is a loaf in profile with two scoring slashes across the top, the real cuts a baker makes before the loaf goes in the oven. It is not a wheat stalk, a rolling pin, or a chef's hat.

```svg
<svg width="22" height="18" viewBox="0 0 22 18" aria-hidden="true">
  <path d="M2 16 Q1 6 11 4 Q21 6 20 16 Z" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.4"/>
  <path d="M8 5 L10 12 M14 5 L12 12" stroke="var(--accent)" stroke-width="1.3" stroke-linecap="round"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Crumb & Crust" in Besley 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` wide, below that the two score lines merge into one.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the score lines to anything but `--accent`. Don't fill the loaf solid, it stays an outline, unbaked. Don't add steam lines or a wheat sheaf.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#f5efe2` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, stage cards, table, form card |
| Surface raised | `--raised` | `#faf6ec` | Row hover, cta band |
| Border | `--border` | `#e8ddc7` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#d4c39f` | Decorative-only edges, bench plank, unbaked seam line |
| Border UI | `--border-ui` | `#8f8067` | Every interactive boundary: secondary button, input, select, loaf outlines |
| Ink | `--ink` | `#2e2318` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6b5d48` | Labels, meta lines, helper text |
| Crust-brown | `--accent` | `#7a3e1f` | Primary button, mark's score lines, the finished baked-crust fill |
| Wheat-gold | `--accent-alt` | `#82631a` | Second-page status |

Crust-brown only fills the loaf once it's actually baked, stages one through three keep the dough in a pale unbaked cream, so the color change on the bench marks the one moment that actually matters, going into the oven. Wheat-gold is held to the second page's status use, kept separate from the crust color so a reader never confuses "in stock" with "baked."

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 13.38:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 15.33:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 5.58:1 | AA |
| `--dim` on `--panel` | 6.79:1 | AA |
| `--dim` on `--raised` | 5.92:1 | AA |
| `--accent` on `--bg` (links, mark's score lines) | 7.23:1 | AAA |
| `--accent` on `--panel` | 8.28:1 | AAA |
| `--accent` on `--raised` | 7.67:1 | AAA |
| `--accent-alt` on `--bg` (status) | 4.89:1 | AA |
| `--accent-alt` on `--panel` | 5.60:1 | AA |
| `--accent-alt` on `--raised` | 5.19:1 | AA |
| light label (`#fbf3ec`) on `--accent` fill (primary button) | 7.54:1 | AAA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.36:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.85:1 | AA (1.4.11) |

`--accent-alt` was darkened from an initial `#9c7a1f`, which measured only 3.51:1 to 4.03:1, short of the small-text 4.5:1 minimum, before this system shipped, not after. `--border-strong` is kept for decorative-only uses, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Besley
    fontWeight: 600
  body:
    fontFamily: Jost
    fontWeight: 400

## Type Scale

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

Besley's warm slab-adjacent serif carries real weight without leaning decorative, reserved for headlines only. Jost 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 warm, reading as a baked edge, 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-loaves illustration (hand-built SVG). A stage's real timing is always stated in text, never implied by loaf height alone.

## Motion Principles

Scroll bakes one loaf through four real stages, laid out left to right on a bench. Each stage is a dough shape scaling vertically from `0` to its own fixed final height, bottom-anchored, so the loaf visibly rises as its own scroll segment completes, the same one-shot settle this gallery's other "N items arrive in sequence" systems use, with a domain-specific twist: each stage's final height is genuinely taller than the last (12px through 35px measured on the built page), because a proofing loaf actually does get taller, this isn't decoration standing in for progress, it's the real physical fact the whole brand is built around. Stage three adds a visible seam line where the dough was shaped, stage four fills the loaf crust-brown with two scoring slashes cut through to a lighter crumb color. 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 baked and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Unhurried, precise about time, no rustic-farmhouse posturing. Crumb & Crust talks like a baker who's actually timed a thousand bulk ferments, not a brand selling nostalgia for a farmhouse kitchen. In practice:

- **Primary button**: "Order ahead", not "Taste the rustic tradition"
- **Autolyse copy**: "So the dough starts developing structure on its own.", a plain technical fact
- **Bulk-fermentation copy**: "This is where the actual flavor develops, not in the oven.", a direct correction of the common assumption
- **Baking copy**: "So the crust stays soft long enough for the loaf to keep rising in the oven.", a real cause-and-effect explanation
- **Status**: "Baking today, fresh loaves out by 10am."

The tell that a sentence is off-brand: it reaches for "rustic" or "farmhouse" nostalgia instead of naming the actual timing or technique.

## 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 loaf-rising 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-loaves 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 "Menu" 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 warm off-white `#fbf3ec` label, brightness lift on hover. Once per view, for the real action ("Order ahead").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and loaves (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four dough groups, each scaling to a genuinely taller final height per stage, with a seam line and scoring detail added at the later stages.

### 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 timing or technique description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Menu 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 same-day-versus-preorder note. 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 bakery is fictional, and a link list back to the other page and the gallery. No invented legal text.

## Do's and Don'ts

### Do
- Let each stage's loaf end up genuinely taller than the last, height is the real signal.
- Fill the loaf crust-brown only at the finished, baked stage.
- State the real timing behind a stage, not a vague "slow and steady" claim.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of flour dust in golden light or a "rustic farmhouse" cliche.
- Don't write vague artisan copy, name the actual technique and timing.
- Don't use a cartoon bread mascot or steam-swirl decoration.
- Don't replay the rising sequence on every scroll pass, it rises once, like a real bake.
- Don't round anything into a pill, a baked crust reads structural.

### Deliberate exception

The menu 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, menu). There is no live order queue and no authenticated state. "Order ahead" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a naturally leavened loaf follows here. An enriched or laminated dough (brioche, croissant) follows a different sequence, out of scope for 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 rising 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.