---
version: alpha
name: last-and-sole-design
description: "A cognac-leather canvas (#241a12) with warm cream ink (#f2e9d8), the gallery's second true leather-brown palette but darker and more saturated than the trade-shop cream system built earlier the same batch. Brass (#c98a3a) is the working accent and the color a finished, burnished sole actually turns, dye-red (#d4695c) marks the welt stitch line and status. Domine carries every headline in a sturdy book-trade serif, Rubik carries prose and controls. The homepage resoles one shoe through four real stages, each cross-section genuinely more complete than the last."
---

## Brand Positioning

Last & Sole repairs shoes, and it exists because most cobbler sites either skip the actual craft entirely or lean on a vague "we love shoes" sentiment instead of explaining the one fact that actually matters: why a resole holds. The bet here is to show the real four-stage sequence and name the specific reason a stitched welt outlasts a glued sole. If a component doesn't correspond to a real stage, a real construction detail, or the shoe itself, it doesn't belong here.

colors:
  accent: "#c98a3a"
  accent-alt: "#d4695c"
  ink: "#f2e9d8"
  ink-muted: "#c4ab8a"
  canvas: "#241a12"

## Logo / Wordmark System

The mark is a shoe last in profile, the real foot-shaped form a cobbler works on, not a finished shoe. It is not a boot, a sneaker, or a heel icon.

```svg
<svg width="24" height="16" viewBox="0 0 24 16" aria-hidden="true">
  <path d="M1 14 L1 8 Q3 4 8 4 L14 4 L20 8 L23 8 L23 14 Z" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.4"/>
  <line x1="1" y1="14" x2="23" y2="14" stroke="var(--accent)" stroke-width="1.6"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Last & Sole" in Domine 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `20px` wide, below that the toe curve flattens unreadably.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the sole line to anything but `--accent`, it's the brass a finished sole edge actually turns after burnishing. Don't add laces or a heel to the mark, it's a last, not a shoe. Don't fill the mark solid, the outline is what reads as a wooden form.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#241a12` | Page background |
| Surface | `--panel` | `#2c2117` | Nav, stage cards, table, form card, shoe upper fill |
| Surface raised | `--raised` | `#332619` | Row hover, cta band |
| Border | `--border` | `#3a2c1c` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#4d3a24` | Decorative-only edges, unfinished sole fill |
| Border UI | `--border-ui` | `#8a7458` | Every interactive boundary: secondary button, input, select, shoe outline |
| Ink | `--ink` | `#f2e9d8` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#c4ab8a` | Labels, meta lines, helper text |
| Brass | `--accent` | `#c98a3a` | Primary button, mark's sole line, the finished burnished sole fill |
| Welt-thread | `--accent-alt` | `#d4695c` | The welt stitch line, second-page status |

Brass only fills the sole once the shoe is actually finished, stages one through three keep the sole area neutral or in a plain grey, so the color change on the bench marks a genuine milestone rather than decorating four identical shoes. Welt-thread red appears exactly where real stitching happens, stage two's dashed line, and nowhere else.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 14.15:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 13.03:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 7.75:1 | AAA |
| `--dim` on `--panel` | 7.11:1 | AAA |
| `--dim` on `--raised` | 6.66:1 | AAA |
| `--accent` on `--bg` (links, mark's sole line) | 5.83:1 | AA |
| `--accent` on `--panel` | 5.37:1 | AA |
| `--accent` on `--raised` | 5.01:1 | AA |
| `--accent-alt` on `--bg` (welt line, status) | 4.85:1 | AA |
| `--accent-alt` on `--panel` (large text and UI only, see below) | 4.47:1 | AA (large/UI only) |
| `--accent-alt` on `--raised` | 4.17:1 | AA (large/UI only) |
| dark label (`#211703`) on `--accent` fill (primary button) | 6.04:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.83:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.53:1 | AA (1.4.11) |

`--accent-alt` was brightened from an initial `#a8433a`, which measured only 2.87:1 on canvas, badly short of even the large-text minimum, before this system shipped, not after. It still falls short of the small-text 4.5:1 minimum on `--panel` and `--raised`, so status text and the welt line label stay on `--bg` or use large type, never small red text on a card. `--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: Domine
    fontWeight: 600
  body:
    fontFamily: Rubik
    fontWeight: 400

## Type Scale

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

Domine is a sturdy book-trade serif that reads as built rather than typeset, reserved for headlines only. Rubik 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 leather 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-shoes illustration (hand-built SVG). A stage's real technique is always stated in text, never implied by the shoe shape alone.

## Motion Principles

Scroll resoles one shoe through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry shoe 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 has a bare sole edge, stage two adds a dashed welt-stitch line, stage three adds a plain grey sole block, stage four fills that sole brass, so each shape is genuinely more complete, not the same silhouette 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 resoled and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Plain, trade-competent, explains why glue alone fails. Last & Sole talks like a cobbler who actually stitches welts, not a brand selling nostalgia for craftsmanship. In practice:

- **Primary button**: "Start a resole", not "We love shoes"
- **Welt-prep copy**: "This is what actually holds a resole together, not glue.", a direct structural claim
- **Stripping copy**: "A rushed strip damages the upper you're trying to save.", stated as a real risk, not a boast
- **Burnishing copy**: "Until it looks like it was never touched.", the actual craft standard, not a vague promise
- **Status**: "Bench open today, most resoles take about three days."

The tell that a sentence is off-brand: it expresses affection for shoes in general instead of naming the actual construction detail that makes a repair last.

## 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 shoe-resoling 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-shoes 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 "Repairs" 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 `#211703` label, brightness lift on hover. Once per view, for the real action ("Start a resole").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and shoes (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four shoe 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`, `4px` radius. Leads with a stage number, then the technique name, then a real one-sentence structural description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Repair 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 construction-type 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 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 the sole brass only at the finished, burnished stage.
- Draw a genuinely different shoe cross-section per stage, not the same shape recolored.
- State the real structural reason a technique matters, not general shoe affection.
- 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 cobbler's bench with tools scattered artfully.
- Don't write "we love shoes" copy, name the actual construction and technique.
- Don't use a cartoon shoe mascot or sparkle-shine decoration.
- Don't replay the resoling sequence on every scroll pass, it resoles once, like a real job.
- Don't round anything into a pill, a resoled shoe reads structural.
- Don't set small `--accent-alt` text on `--panel` or `--raised`, the pairing falls short of the small-text minimum on both.

### Deliberate exception

The repairs 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, repairs). There is no live queue and no authenticated state. "Start a resole" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a Goodyear-welted resole follows. A cemented-construction shoe follows a different, shorter sequence, named as an exception on the repairs 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 resoling 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.