---
version: alpha
name: burr-and-edge-design
description: "A light steel-grey workshop canvas (#e6e8ea) with near-black ink (#22262a), a fourth light palette in the gallery but cooler and more industrial than the cream or stoneware systems built earlier the same batch. Steel blue (#2f6f8f) is the sharpened-edge accent, leather brown (#8a5a2e) marks the strop and nothing else. Chivo carries every headline in a bold grotesque, Hanken Grotesk carries prose and controls. The homepage draws one blade across four real sharpening grits, the edge profile visibly straightening and brightening at each stage."
---

## Brand Positioning

Burr & Edge sharpens knives, and it exists because most sharpening-service sites sell "razor sharp" as a single claim instead of the actual process, four grits in a fixed order, each one undoing what the last one left behind. The bet here is to show the real progression, coarse to strop, and name the technical reason each stage exists, including the strop, which isn't sharpening at all, it's burr removal. If a component doesn't correspond to a real grit, a real stage, or the edge itself, it doesn't belong here.

colors:
  accent: "#2f6f8f"
  accent-alt: "#8a5a2e"
  ink: "#22262a"
  ink-muted: "#585f66"
  canvas: "#e6e8ea"

## Logo / Wordmark System

The mark is a whetstone in profile with a blade edge angled against it, mid-pass. It is not a knife alone, a sharpening steel, or a chef's-hat icon.

```svg
<svg width="22" height="18" viewBox="0 0 22 18" aria-hidden="true">
  <rect x="1" y="12" width="20" height="5" rx="1" fill="var(--border-strong)" stroke="var(--border-ui)" stroke-width="1.2"/>
  <path d="M2 12 L4 5 L18 5 L20 12" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Burr & Edge" in Chivo 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` wide, below that the blade angle and the stone block merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the blade line to anything but `--accent`, it's always the sharpened-edge color. Don't fill the blade shape solid, it stays an open angled line. Don't add a handle or a full knife silhouette, the mark shows the edge meeting the stone, not the whole tool.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#e6e8ea` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, grit cards, table, form card |
| Surface raised | `--raised` | `#eef0f1` | Row hover, cta band |
| Border | `--border` | `#d7dbde` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#c2c8cc` | Decorative-only edges, bench plank |
| Border UI | `--border-ui` | `#767e86` | Every interactive boundary: secondary button, input, select, stone and bench outline |
| Ink | `--ink` | `#22262a` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#585f66` | Labels, meta lines, helper text, dull edge lines |
| Steel | `--accent` | `#2f6f8f` | Primary button, links, the sharpened edge line, mark's blade |
| Leather | `--accent-alt` | `#8a5a2e` | The strop block, second-page status |

Steel blue only appears on an edge once it's actually sharp, the first two (coarse, medium) draw in `--dim`, a dull grey, and only the fine and strop passes draw in `--accent`, so the color itself tracks the real physical change rather than decorating all four equally. Leather brown is the strop's own material color, reserved for that one block and the second page's status use.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 12.40:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 15.23:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 5.27:1 | AA |
| `--dim` on `--panel` | 6.47:1 | AA |
| `--dim` on `--raised` | 5.66:1 | AA |
| `--accent` on `--bg` (links, stage labels) | 4.51:1 | AA |
| `--accent` on `--panel` | 5.54:1 | AA |
| `--accent` on `--raised` | 4.85:1 | AA |
| `--accent-alt` on `--bg` | 4.77:1 | AA |
| `--accent-alt` on `--panel` | 5.86:1 | AA |
| `--accent-alt` on `--raised` | 5.13:1 | AA |
| light label (`#f2f8fb`) on `--accent` fill (primary button) | 5.17:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.35:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 4.12:1 | AA (1.4.11) |

`--border-strong` is kept for decorative-only uses, the bench plank, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Chivo
    fontWeight: 700
  body:
    fontFamily: Hanken Grotesk
    fontWeight: 400

## Type Scale

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

Chivo's bold grotesque reads as stamped and confident, reserved for headlines only. Hanken Grotesk 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, buttons, and inputs. Small and workshop-plain, reading as a bench and a stone block, 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-stones illustration (hand-built SVG). A grit number is always stated in text, never implied by color alone.

## Motion Principles

Scroll draws one blade across four real grits in sequence. Each stage is a fixed-geometry edge-profile path, positioned above its own stone block, 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 paths themselves, not the animation: each stage's zigzag amplitude is drawn smaller than the last, coarse jagged, strop nearly flat, and the stroke color shifts from `--dim` to `--accent` only once the edge is actually sharp (stage three onward), so the color change tracks a real physical fact rather than decorating every stage identically. Each stage's static shelf position and its animated scale live on separate nested groups from the first draft, per the lesson from Center & Pull and Rindwork earlier the same 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 drawn and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Plain, technical, no macho knife-culture posturing. Burr & Edge talks like someone who actually runs the stones, not like a brand selling toughness. In practice:

- **Primary button**: "Book sharpening", not "Unleash razor-sharp precision"
- **Stage one copy**: "Aggressive, only used when the blade actually needs it.", not "Devastatingly sharp"
- **Strop copy**: "The last pass, not a real sharpening step.", stated as a technical fact, not undersold or oversold
- **Turnaround note**: named plainly on the service page (drop-off, pickup window), not implied
- **Status**: "Drop-off open today, most knives ready same day."

The tell that a sentence is off-brand: it reaches for toughness or intensity instead of naming the actual grit, stage, or turnaround time.

## 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 edge-drawing 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-stones graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every stage's grit number, name, and 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 "Service" 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 pale steel `#f2f8fb` label, brightness lift on hover. Once per view, for the real action ("Book sharpening").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and stones (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four stone-and-edge groups, each an outer static-position group wrapping an inner scale-animated edge path.

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

### Service 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 serrated-blade or specialty-edge 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`, `4px` radius, `44px` height, `--raised` fill plus an accent border on focus.

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

## Do's and Don'ts

### Do
- Draw the first two stages in `--dim` and only switch to `--accent` once the edge is actually sharp.
- Shrink each stage's zigzag amplitude from the last, coarse jagged, strop nearly flat.
- State the real grit number behind every stage.
- 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 chef's knife mid-slice or a "razor sharp" cliche.
- Don't write knife-culture bravado copy, name the actual grit and what it does.
- Don't use a cartoon knife mascot or motion-blur sparks as decoration.
- Don't replay the sharpening sequence on every scroll pass, it sharpens once, like a real pass.
- Don't round anything into a pill, a whetstone reads as a block.

### Deliberate exception

The service 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, service). There is no live drop-off queue and no authenticated state. "Book sharpening" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four grits because that's the real progression a standard kitchen knife needs. Specialty edges (serrated, single-bevel) follow a different, out-of-scope sequence, named as an exception on the service 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 sharpening 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 per the lesson from
Center & Pull and Rindwork earlier the same batch, and the mechanical
detector run clean.