---
version: alpha
name: bezel-and-bench-design
description: "A near-black graphite canvas (#19191c) with soft white ink (#efeef0), platinum (#c8c9cd) as the metal-work accent and the finished-metal fill, sapphire (#5c8ac2) as the gemstone accent and the only color the primary button's focus ring can safely use. Marcellus carries every headline in a refined classical serif, Sora carries prose and controls. The homepage forges one ring through four real jewelry-making stages, each cross-section genuinely more complete than the last."
---

## Brand Positioning

Bezel & Bench makes and repairs jewelry, and it exists because most jewelry sites sell a diamond sparkling on black velvet and skip the actual craft: casting, filing, setting, polishing, four real stages that determine whether a stone stays in the ring. The bet here is to show the real build and name the specific reason a hand-cut bezel holds a stone more securely than a catalog prong setting. If a component doesn't correspond to a real stage, a real technique, or the ring itself, it doesn't belong here.

colors:
  accent: "#c8c9cd"
  accent-alt: "#5c8ac2"
  ink: "#efeef0"
  ink-muted: "#a0a0a5"
  canvas: "#19191c"

## Logo / Wordmark System

The mark is a ring band with a faceted stone sitting above it, drawn as a simple geometric gem shape in the sapphire accent. It is not a diamond alone, a hand, or a jewelry box.

```svg
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
  <circle cx="10" cy="12" r="7" fill="none" stroke="var(--border-ui)" stroke-width="1.6"/>
  <path d="M6 5 L10 1 L14 5 L11 8 L9 8 Z" fill="var(--accent-alt)" stroke="var(--border-ui)" stroke-width="1"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Bezel & Bench" in Marcellus, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px`, below that the facet lines on the stone blur together.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the stone to anything but `--accent-alt`, it's this brand's one gemstone color. Don't fill the band solid, it stays an outline, a ring in profile, not a filled disc. Don't add sparkle lines radiating from the stone.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#19191c` | Page background |
| Surface | `--panel` | `#212023` | Nav, stage cards, table, form card |
| Surface raised | `--raised` | `#282629` | Row hover, cta band |
| Border | `--border` | `#2c2a2e` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#3d3a40` | Decorative-only edges, rough-cast sprue mark |
| Border UI | `--border-ui` | `#7c7c82` | Every interactive boundary: secondary button, input, select, ring outline |
| Ink | `--ink` | `#efeef0` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#a0a0a5` | Labels, meta lines, helper text |
| Platinum | `--accent` | `#c8c9cd` | Primary button, mark's implicit metal tone, the finished ring band |
| Sapphire | `--accent-alt` | `#5c8ac2` | The set stone, the focus ring, second-page status |

Platinum and sapphire split by material, not decoration: platinum is every metal surface, the ring itself and the primary button. Sapphire is the one gemstone color and, deliberately, the focus ring, because platinum measures close enough in luminance to itself that a platinum ring on a platinum-filled primary button would nearly vanish, the same class of problem this gallery has already solved elsewhere by picking a focus-ring color that survives landing on the accent-filled button, not just the color that matches the brand palette by default.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 15.17:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.02:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 6.74:1 | AAA |
| `--dim` on `--panel` | 6.24:1 | AA |
| `--dim` on `--raised` | 5.76:1 | AA |
| `--accent` on `--bg` (mark, decorative) | 10.60:1 | AAA |
| `--accent` on `--panel` | 9.80:1 | AAA |
| `--accent` on `--raised` | 9.07:1 | AAA |
| `--accent-alt` on `--bg` (the set stone, status) | 4.90:1 | AA |
| `--accent-alt` on `--panel` | 4.53:1 | AA |
| `--accent-alt` on `--raised` (large text and UI only) | 4.19:1 | AA (large/UI only) |
| dark label (`#16161a`) on `--accent` fill (primary button) | 10.91:1 | AAA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 4.23:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.91:1 | AA (1.4.11) |

`--accent-alt` on `--raised` clears large-text and non-text UI use (4.19: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 sapphire text there. `--border-strong` is kept for decorative-only uses, the rough-cast sprue mark, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Marcellus
    fontWeight: 400
  body:
    fontFamily: Sora
    fontWeight: 400

## Type Scale

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

Marcellus is a single-weight classical serif with real quiet confidence, reserved for headlines only. Sora 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: 3px` on cards and buttons, `--radius-sm: 2px` on inputs. Small and precise, reading as a machined bench 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-rings illustration (hand-built SVG). A stage's real technique is always stated in text, never implied by the ring shape alone.

## Motion Principles

Scroll forges one ring through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry ring cross-section, 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 rough cast band with a visible sprue mark, stage two is a clean filed band with no stone, stage three adds the bezel and the set stone, stage four adds a polish highlight across the band, so each ring is genuinely more complete, not the same loop 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 forged and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise, quietly confident, explains why hand-setting holds a stone better. Bezel & Bench talks like a jeweler who's actually set a thousand stones, not a brand selling a proposal moment. In practice:

- **Primary button**: "Start a commission", not "Make it forever"
- **Setting copy**: "Then the metal pushed over the edge by hand, not glued.", a direct structural claim
- **Filing copy**: "Not a pre-sized blank pulled off a shelf.", stated as an honest process fact
- **Polishing copy**: "A true reflection, not just a shine.", a real technical distinction
- **Status**: "Bench open today, most rings take about two weeks."

The tell that a sentence is off-brand: it reaches for proposal-marketing sentiment instead of naming the actual metal, stone, or technique.

## Accessibility Baseline

- **Focus ring**: `2px solid var(--accent-alt)` at `2px` offset via `:focus-visible` on every link, button, input, and select, never removed. Sapphire, not platinum, because platinum on platinum, the primary button's own fill color, would be effectively invisible.
- **Reduced motion**: honored on the ring-forging 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-rings 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 "Commissions" link and exactly one primary button. Below 480px the first nav link drops, the primary button stays.

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

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

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

### Commission 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 the bezel-versus-prong distinction. 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`, `2px` radius, `44px` height, `--raised` fill plus an accent-alt border on focus.

### Footer
Two-part row: an honest note that the studio 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 a genuinely different ring cross-section per stage, not the same loop recolored.
- Reserve sapphire for the set stone and the focus ring, platinum's own vanishing-on-vanishing problem.
- State the real structural reason a technique matters, not proposal sentiment.
- 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 diamond sparkling on black velvet or a "forever" cliche.
- Don't write proposal-marketing copy, name the actual technique and metal.
- Don't use a cartoon jeweler mascot or a sparkle-burst decoration.
- Don't replay the forging sequence on every scroll pass, it forms once, like a real commission.
- Don't round anything into a pill, jewelry work reads precise.
- Don't set small `--accent-alt` text on `--raised`, the pairing falls short of the small-text minimum.

### Deliberate exception

The commissions 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, commissions). There is no live order queue and no authenticated state. "Start a commission" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a cast-and-set ring follows. A forged (non-cast) band follows a different first stage, named as an exception on the commissions 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 ring-forging 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, a focus-ring color
chosen specifically to survive landing on the accent-filled button rather
than defaulting to the primary accent, and the mechanical detector run
clean.