---
version: alpha
name: quire-design
description: "A midnight navy-black canvas (#1c1a24) with warm cream ink (#efe6d6), the gallery's first true blue-black neutral, distinct from the warm browns and greens built earlier the same batch. Gold leaf (#c9a227) is the working accent, a real bookbinding material color, not decoration, brightened terracotta-red (#d97462) marks thread and status. Spectral carries every headline in a reading-optimized serif, Work Sans carries prose and controls. The homepage binds one book through four real stages, each spine cross-section visibly more complete than the last."
---

## Brand Positioning

Quire hand-binds books, and it exists because most bindery sites sell a mood, leather spines on a shelf, a quill-and-ink graphic, instead of the actual reason a hand-sewn book is worth paying for: it opens flat and survives being read for decades, where a perfect-bound paperback cracks within a year. The bet here is to show the real four-stage process, in order, and let the difference speak for itself. If a component doesn't correspond to a real stage, a real technique, or the spine itself, it doesn't belong here.

colors:
  accent: "#c9a227"
  accent-alt: "#d97462"
  ink: "#efe6d6"
  ink-muted: "#a89ab0"
  canvas: "#1c1a24"

## Logo / Wordmark System

The mark is a book's spine in cross-section: three vertical signature lines between two curved endpapers, gold at top and bottom where real gilding would sit. It is not a closed book, a quill, or an open-book icon.

```svg
<svg width="18" height="22" viewBox="0 0 18 22" aria-hidden="true">
  <path d="M2 2 L2 20 M9 2 L9 20 M16 2 L16 20" stroke="var(--border-ui)" stroke-width="1.3"/>
  <path d="M2 2 Q9 -1 16 2 M2 20 Q9 23 16 20" fill="none" stroke="var(--accent)" stroke-width="1.4"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Quire" in Spectral 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px` tall, below that the three signature lines merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the curved top and bottom lines to anything but `--accent`, they represent real gilt edges. Don't close the mark into a solid book shape, it stays an open cross-section. Don't add a quill or a bookmark ribbon.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#1c1a24` | Page background |
| Surface | `--panel` | `#242230` | Nav, stage cards, table, form card, spine fill |
| Surface raised | `--raised` | `#2b2838` | Row hover, cta band |
| Border | `--border` | `#322e40` | Card edges, table rules, dividers, signature fold lines |
| Border strong | `--border-strong` | `#423c56` | Decorative-only edges, cover foot |
| Border UI | `--border-ui` | `#7d7291` | Every interactive boundary: secondary button, input, select, spine outline |
| Ink | `--ink` | `#efe6d6` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#a89ab0` | Labels, meta lines, helper text |
| Gold leaf | `--accent` | `#c9a227` | Primary button, mark's gilt lines, the finished cover fill |
| Thread | `--accent-alt` | `#d97462` | Sewing-station thread lines, status |

Gold leaf only fills the spine once it's actually a finished, cased-in book, the earlier three stages stay neutral, so the color change on the shelf marks a genuine milestone rather than decorating every stage identically. Thread red only appears where actual stitching happens, stages two and three, and nowhere else.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 13.87:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 12.60:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 6.47:1 | AA |
| `--dim` on `--panel` | 5.75:1 | AA |
| `--dim` on `--raised` | 5.41:1 | AA |
| `--accent` on `--bg` (links, mark's gilt lines) | 7.10:1 | AAA |
| `--accent` on `--panel` | 6.45:1 | AA |
| `--accent` on `--raised` | 5.93:1 | AA |
| `--accent-alt` on `--bg` (thread lines, status) | 5.42:1 | AA |
| `--accent-alt` on `--panel` | 4.92:1 | AA |
| `--accent-alt` on `--raised` | 4.53:1 | AA |
| dark label (`#211a04`) on `--accent` fill (primary button) | 7.15:1 | AAA |
| `--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.48:1 | AA (1.4.11) |

`--accent-alt` was brightened from an initial `#8b2e2e`, a true oxblood that measured only 2.07:1 on canvas, badly short of even the large-text minimum, before this system shipped, not after, a dark leather red simply cannot carry text on a dark canvas. `--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: Spectral
    fontWeight: 600
  body:
    fontFamily: Work Sans
    fontWeight: 400

## Type Scale

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

Spectral was designed specifically for long-form reading, a fitting choice for a bindery, reserved for headlines only. Work 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 and badges. Small and precise, reading as a bound book's own square corner, 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-spines illustration (hand-built SVG). A stage's technique is always stated in text, never implied by the spine shape alone.

## Motion Principles

Scroll binds one book through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry spine 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 itself: stage one is a loose folded signature with no thread, stage two adds a zigzag thread line, stage three rounds the spine into a curve and adds backing marks, stage four fills the whole spine gold and adds a cover foot, so each shape is a genuinely different, more complete object, not the same icon 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 bound and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise about craft, no romanticized "old world" posturing. Quire talks like a binder explaining a real structural reason, not a brand selling nostalgia. In practice:

- **Primary button**: "Start a binding", not "Discover the timeless art of bookbinding"
- **Sewing copy**: "One continuous thread, not glue holding loose sheets.", not "Lovingly hand-stitched"
- **Rounding copy**: "So the book opens flat instead of springing shut on its own.", stated as a mechanical fact
- **Casing-in copy**: "The last step, and the only one a cheap binding actually does.", a direct comparison, not a boast
- **Status**: "Bench open today, most bindings take about a week."

The tell that a sentence is off-brand: it reaches for "timeless," "old world," or "artisanal" instead of naming the actual structural reason a hand-sewn binding holds up.

## 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 spine-binding 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-spines 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 "Binding" 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 `#211a04` label, brightness lift on hover. Once per view, for the real action ("Start a binding").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and spines (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four spine 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 an italicized 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.

### Binding 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 material or timeline 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`, `2px` radius, `44px` height, `--raised` fill plus an accent border on focus.

### Footer
Two-part row: an honest note that the bindery 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 spine shape per stage, not the same icon recolored.
- Fill the spine gold only at the finished, cased-in stage.
- State the real structural reason a technique matters, not a craft platitude.
- 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 leather-bound books on a shelf or a quill-and-ink cliche.
- Don't write "timeless art" or "old world craft" copy, name the actual technique and stage.
- Don't use a cartoon book mascot or page-flutter decoration.
- Don't replay the binding sequence on every scroll pass, it binds once, like a real order.
- Don't round anything into a pill, a sewn spine reads structural.

### Deliberate exception

The binding 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, binding). There is no live order queue and no authenticated state. "Start a binding" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a hand-sewn case binding follows. A paperback rebind or a simple pamphlet stitch follows a shorter, different sequence, named as an exception on the binding 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 binding 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.