---
version: alpha
name: full-canvas-design
description: "A deep wool-navy canvas (#12161f) with chalk-white ink (#e8e6e0), the gallery's first true navy suiting palette. Chalk-stripe silver (#c9c3b0) is the working accent, literally the color of a chalk-stripe fabric pattern, lining burgundy (#d4667a) marks the pad-stitch thread and status. Crimson Pro carries every headline in a refined literary serif, Public Sans carries prose and controls. The homepage builds one jacket lapel through four real construction stages, each cross-section genuinely more complete than the last."
---

## Brand Positioning

Full Canvas is a bespoke tailor, and it exists because the entire category of "luxury tailoring" sites sells atmosphere, a tape measure around a shoulder, warm lighting, and skips the one fact that actually separates a real jacket from an expensive one: canvas construction versus fused. The bet here is to show the real four-stage build and name the specific reason a fused jacket fails within a year. If a component doesn't correspond to a real stage, a real technique, or the lapel itself, it doesn't belong here.

colors:
  accent: "#c9c3b0"
  accent-alt: "#d4667a"
  ink: "#e8e6e0"
  ink-muted: "#9aa0ac"
  canvas: "#12161f"

## Logo / Wordmark System

The mark is a lapel notch in profile, a simple V drawn as a line, with a small curved roll at the collar point where the accent color sits. It is not a suit jacket, a bow tie, or a tape measure.

```svg
<svg width="20" height="22" viewBox="0 0 20 22" aria-hidden="true">
  <path d="M2 2 L9 6 L9 20 M9 6 L2 20" fill="none" stroke="var(--border-ui)" stroke-width="1.4"/>
  <path d="M9 6 Q13 2 18 2" fill="none" stroke="var(--accent)" stroke-width="1.6"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Full Canvas" in Crimson Pro 600, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px` tall, below that the notch and the collar roll merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the collar roll to anything but `--accent`, it's the same chalk-stripe silver every lapel's finished roll uses. Don't close the V into a full lapel shape, the mark stays a notch. Don't add buttons or a full jacket outline.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#12161f` | Page background |
| Surface | `--panel` | `#1a1f2c` | Nav, stage cards, table, form card, wool fill |
| Surface raised | `--raised` | `#212739` | Row hover, cta band |
| Border | `--border` | `#232838` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#303a4f` | Decorative-only edges, bench plank |
| Border UI | `--border-ui` | `#6b7180` | Every interactive boundary: secondary button, input, select, lapel outline |
| Ink | `--ink` | `#e8e6e0` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#9aa0ac` | Labels, meta lines, helper text |
| Chalk | `--accent` | `#c9c3b0` | Primary button, mark's collar roll, the finished, pressed lapel fill |
| Lining-red | `--accent-alt` | `#d4667a` | Basting and pad-stitch lines, second-page status |

Chalk only fills the lapel once it's actually pressed and finished, stages one through three keep the wool a plain dark fill, so the color change on the bench marks a genuine milestone rather than decorating four identical shapes. Lining-red only appears where real thread runs, the basting line in stage two and the pad-stitch ticks in stage three, and nowhere else.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 14.50:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 13.18:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 6.89:1 | AAA |
| `--dim` on `--panel` | 6.27:1 | AA |
| `--dim` on `--raised` | 5.66:1 | AA |
| `--accent` on `--bg` (links, mark's roll) | 10.27:1 | AAA |
| `--accent` on `--panel` | 9.34:1 | AAA |
| `--accent` on `--raised` | 8.43:1 | AAA |
| `--accent-alt` on `--bg` (stitch lines, status) | 5.15:1 | AA |
| `--accent-alt` on `--panel` | 4.69:1 | AA |
| `--accent-alt` on `--raised` (large text and UI only) | 4.23:1 | AA (large/UI only) |
| dark label (`#14181f`) on `--accent` fill (primary button) | 10.10:1 | AAA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.71:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.37:1 | AA (1.4.11) |

`--accent-alt` was brightened from an initial `#a8394a`, which measured only 2.89: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 `--raised`, so the cta band, which sits on `--raised`, keeps its heading and body copy in `--ink` and `--dim`, never small burgundy text there. `--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: Crimson Pro
    fontWeight: 600
  body:
    fontFamily: Public Sans
    fontWeight: 400

## Type Scale

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

Crimson Pro's refined literary serif reads as considered rather than mass-produced, reserved for headlines only. Public Sans 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 pressed wool 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-lapels illustration (hand-built SVG). A stage's real technique is always stated in text, never implied by the lapel shape alone.

## Motion Principles

Scroll builds one jacket lapel through four real construction stages, laid out left to right on a bench. Each stage is a fixed-geometry lapel 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 flat, unshaped wool panel, stage two adds a dashed basting line, stage three curves the shape and adds pad-stitch ticks, stage four fills the whole finished roll in chalk with a boutonniere hole, so each shape is genuinely more complete, not the same panel 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 built and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise, quietly confident, explains the fused-vs-canvas distinction plainly. Full Canvas talks like a tailor who's actually pad-stitched a thousand lapels, not a brand selling atmosphere. In practice:

- **Primary button**: "Book a fitting", not "Experience the art of bespoke"
- **Basting copy**: "Fused jackets skip this step entirely, and it shows the first time you dry-clean one.", a direct, checkable claim
- **Pad-stitching copy**: "A roll a machine can't reproduce.", stated as a mechanical fact
- **Fitting copy**: "The only stage a made-to-measure jacket also gets.", an honest comparison, not a boast
- **Status**: "Fittings open today, most orders take about four weeks."

The tell that a sentence is off-brand: it reaches for "art," "luxury," or atmosphere instead of naming the actual construction stage and why it matters.

## 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 lapel-building 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-lapels 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: an "Orders" 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 `#14181f` label, brightness lift on hover. Once per view, for the real action ("Book a fitting").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and lapels (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four lapel 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 structural description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Order 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 fused-vs-canvas pinch test. 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 border on focus.

### Footer
Two-part row: an honest note that the tailor 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 lapel chalk only at the finished, pressed stage.
- Draw a genuinely different lapel cross-section per stage, not the same panel recolored.
- State the real construction reason a technique matters, not a luxury abstraction.
- 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 tape measure around a shoulder or a "gentleman's club" cliche.
- Don't write vague luxury copy, name the actual construction stage and technique.
- Don't use a cartoon tailor mascot or thread-spool decoration.
- Don't replay the build sequence on every scroll pass, it builds once, like a real jacket.
- Don't round anything into a pill, tailoring reads precise.
- Don't set small `--accent-alt` text on `--raised`, the pairing falls short of the small-text minimum.

### Deliberate exception

The orders 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, orders). There is no live order queue and no authenticated state. "Book a fitting" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a full-canvas jacket follows. A fused jacket skips stages one through three entirely, named as the direct comparison on the orders 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 lapel construction 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.