---
version: alpha
name: broadside-press-design
description: "A warm ink-black canvas (#14110d) with paper-cream ink (#f2ead9), a true neutral-dark palette distinct from the green of the terrarium system and the cream of the trade-shop system built the same day. Proof red (#e2584a) and indigo (#6f8ed4) are the two ink accents, both genuine spot-color letterpress inks, not decoration. Bitter carries every headline, Archivo carries prose and controls. The homepage prints a small ornament in four registered passes: the platen lowers once per color, and ink only appears at the moment of contact."
---

## Brand Positioning

Broadside Press runs a letterpress shop, and it exists because most print-shop sites either drown the craft in "handcrafted with love" sentiment or hide the actual mechanics of the trade behind a portfolio grid. Broadside Press's bet: show a real four-color job actually being printed, one pass at a time, in registration, and price every color honestly, because a second ink color on a letterpress job is a second physical run through the press, not a checkbox. If a component doesn't correspond to a real ink pass, a real cost, or the platen itself, it doesn't belong here.

colors:
  accent: "#e2584a"
  accent-alt: "#6f8ed4"
  ink: "#f2ead9"
  ink-muted: "#a89a83"
  canvas: "#14110d"

## Logo / Wordmark System

The mark is a platen press in profile: a rectangular bed below, a small plate above it, connected by a short arm, mid-impression, with a proof-red diamond caught between them at the point of contact. It is not a printing-press cartoon, an ink blot, or a quill. It is a miniature reading of the same press the homepage runs.

```svg
<svg width="20" height="24" viewBox="0 0 20 24" aria-hidden="true">
  <rect x="1" y="14" width="18" height="9" rx="1" fill="none" stroke="var(--border-ui)" stroke-width="1.5"/>
  <rect x="4" y="3" width="12" height="8" rx="1" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.5"/>
  <path d="M10 15 L13 18 L10 21 L7 18 Z" fill="var(--accent)"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Broadside Press" in Bitter 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` tall, below that the bed, plate, and diamond merge.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the diamond to anything but `--accent`, it marks the point of contact, always in the same ink the hero's first color pass uses. Don't close the gap between the bed and plate, the mark shows a press mid-impression, not a closed box. Don't add a quill, an ink blot, or a printing-press mascot anywhere near it.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#14110d` | Page background |
| Surface | `--panel` | `#1c1812` | Nav, color cards, table, form card, the platen and sheet in the hero graphic |
| Surface raised | `--raised` | `#241f17` | Row hover, cta band, input focus fill |
| Border | `--border` | `#2a2419` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#3a3125` | Decorative-only edges, swatch outline |
| Border UI | `--border-ui` | `#7d6d54` | Every interactive boundary: secondary button, input, select, the platen and sheet outline |
| Ink | `--ink` | `#f2ead9` | Headlines, body copy, table cells, the black ink pass in the hero mark |
| Ink muted | `--dim` | `#a89a83` | Labels, meta lines, helper text |
| Proof red | `--accent` | `#e2584a` | Primary button, mark's contact diamond, second ink pass, links |
| Indigo | `--accent-alt` | `#6f8ed4` | Third ink pass, "running today" status, the "PRINTED" readout |

Proof red and indigo are both genuine letterpress spot-color inks, not a decorative pair, they're two of the four colors an actual job on this press can run. The hero's black pass reuses `--ink` rather than a fifth token, because letterpress black and this interface's text color are, honestly, the same near-black. Gold, the fourth ink, is illustrative only, a real metallic ink color, not a system token, the same exception every material-specific fill in this gallery already establishes.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 15.73:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.76:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 6.83:1 | AA |
| `--dim` on `--panel` (meta lines, footer) | 6.41:1 | AA |
| `--dim` on `--raised` | 5.93:1 | AA |
| `--accent` on `--bg` (links, red text) | 5.13:1 | AA |
| `--accent` on `--panel` | 4.82:1 | AA |
| `--accent` on `--raised` (cta band, not used for small text there) | 4.46:1 | AA (large/UI only) |
| `--accent-alt` on `--bg` (indigo text, printed readout) | 5.82:1 | AA |
| `--accent-alt` on `--panel` | 5.46:1 | AA |
| `--accent-alt` on `--raised` | 5.06:1 | AA |
| dark label (`#1a0a07`) on `--accent` fill (primary button) | 5.25:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.75:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.26:1 | AA (1.4.11) |

`--accent` on `--raised` clears large-text and non-text UI use (4.46:1) but falls short of the small-text 4.5:1 minimum by a hair, so the cta band, which sits on `--raised`, keeps its heading and body copy in `--ink` and `--dim`, and never sets small red text there. `--border-strong` is kept for decorative-only uses, a swatch chip's outline, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Bitter
    fontWeight: 600
  body:
    fontFamily: Archivo
    fontWeight: 400

## Type Scale

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

Bitter is a slab serif with real weight on the page, letterpress historically ran slab and wood-type faces because they held ink and pressure better than a thin hairline face, reserved for headlines only. Archivo carries every sentence and every control at 400 for prose and 700 for labels, chosen for a grotesque that reads clean at small sizes against a dark canvas.

## 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, buttons, inputs, and the table wrap. `--radius-sm: 2px` on badges. Small and mostly square, reading as a metal plate and a printed sheet, not the soft glass-and-stone rounding of the terrarium system or the pill warmth of the candy systems elsewhere in the gallery. No shadows, no glows. Depth is a 1px hairline and a background step from `--bg` to `--panel` to `--raised`.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own platen-and-sheet illustration (hand-built SVG). Color status is a solid dot paired with the word "Running today", never a checkmark.

## Motion Principles

Scroll runs four ink passes across the same sheet. The platen, a plate on a short arm above a static paper sheet, descends and lifts once per pass, a triangle motion within each pass's own scroll segment, down for the first half, up for the second. Ink only appears at the bottom of that motion, the moment of contact, not before, so the sequence reads as cause and effect rather than four things happening near a press. Each pass builds one piece of a small printer's ornament directly on the sheet: pass one outlines a diamond in black, pass two fills a smaller red diamond inside it, pass three sets four indigo dots at the outer diamond's points, pass four sets a single gold center dot. Once the fourth pass lifts, a "PRINTED" readout fades in. One-shot run: nothing loops, and every color is written out in the card grid and the table 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 run distance at that figure (never more than `560px`). The margin exists because scrolling to the page's true maximum can land a few pixels short of an unpadded measurement, layout can still settle slightly after the measurement runs, this was caught here first, on this system, when the "PRINTED" badge and the platen's resting position failed to complete at two ordinary desktop viewport heights despite every ink layer and card correctly showing as complete, a residual few pixels of progress short of `1`, forever. The fix, subtracting a small margin from the clamp, was then back-ported into Keyway and Understory the same day. A viewport tall enough to leave under `20px` of room, or a `prefers-reduced-motion` visitor, gets the finished print immediately with no scroll listener attached at all.

## Voice & Tone

Precise, trade-proud, explains the real cost of a color pass. Broadside Press talks like a printer who wants you to understand what you're paying for, not like a shop selling nostalgia. In practice:

- **Primary button**: "Start a run", not "Handcrafted with love, just for you"
- **Color description**: "One extra pass through the press, its own plate, its own registration check.", not "Add a pop of color!"
- **Why colors cost extra**: "Every color is a separate run through the press, in registration with the one before it. That's why a color costs what it costs, not a markup, an actual second pass.", not "Premium color options available"
- **Gold ink note**: "Metallic ink runs slower and needs longer to dry between passes.", not "Luxurious metallic finish"
- **Status**: "Running today, proofs by end of day."

The tell that a sentence is off-brand: it romanticizes the craft instead of explaining the actual mechanical reason something costs what it costs or takes as long as it takes.

## 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 platen and every ink pass, 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 press graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every color's name, cost, and status is in the card grid below in plain markup at all times, and again in the second page's table.
- **Tap targets**: `44px` minimum height on every button, nav link, and form control.
- **Color is never the only signal**: every status pairs a dot with the word "Running today", not left as color alone.
- **Focus is never dropped**: on a successful run request, focus moves to the confirmation message, and the email field is set `readonly` rather than `disabled`.
- **Structure**: one `<h1>` per page, headings in order, `nav` / `main` / `footer` landmarks, a real `<caption>` on the color table, `scope="col"` on every header cell, `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 "Runs" 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 `#1a0a07` label, brightness lift on hover. Once per view, for the real action ("Start a run", "Send request").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The press (signature)
Documented in full under Motion Principles. Structurally: a static paper sheet, a clip-free ornament built from four SVG groups fading and scaling in at the moment of contact, and a platen group that translates down and back up on a triangle wave once per pass.

### Color card
A flat panel: `--panel` background, `1px solid --border`, `3px` radius. Holds a round ink swatch, the color's name, a real cost or process description, the price, and a status badge. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Color table (second page)
`--raised` header row in `--text-label`, `--panel` body rows, one `--border` rule between rows, a `<caption>` naming the order. Below 700px the table restacks into one bordered block per color, never hidden behind horizontal scroll.

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying the paper-stock explanation. Square, matching Keyway and Understory's own resolution for the same accent-bordered notice pattern, never a rounded card with a side or top accent stripe thick enough to read as a slop tell.

### 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. Helper text sits below at a reserved minimum height so validating doesn't shift the layout.

### 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
- Let ink appear at the moment of contact, not before the platen reaches the sheet.
- Price a color by the pass, and say so in the copy, not just the price.
- Keep the press graphic `aria-hidden` and write every fact it shows in plain text nearby.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.
- Reuse `--ink` for the black pass rather than inventing a fifth text-adjacent token.

### Don't
- Don't use a stock photo of "hipster" printing equipment or a hand pulling a lever.
- Don't write "handcrafted with love" or any sentiment that skips the actual mechanical reason for a cost.
- Don't use a printing-press mascot or ink-splatter decoration anywhere.
- Don't replay the print run on every scroll pass, it prints once, like a real sheet being run.
- Don't round buttons into a pill, a plate press reads square.
- Don't set small `--accent` text on `--raised`, the pairing falls just under the small-text minimum.

### Deliberate exception

The runs page's `.notice` element carries a `3px` `--accent-alt` top rule on `border-radius: 0`, the same square-plate treatment Keyway and Understory both reached the same day for their own accent-bordered notices. 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 both of those systems' notices produce. The element is square, confirmed by reading the resolved CSS rule directly.

## Known Constraints

- Two routes exist (home, runs). There is no finished-product storefront and no authenticated state. "Send request" produces a client-side confirmation only, this is a concept demo.
- The press runs exactly four colors because that's the shop's current ink inventory. A fifth color would need a fifth pass, not a relabeled existing one.
- 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 platen and the sheet) rather than a template, the scroll-trigger
distance computed from real measured scroll room from the outset, and the
mechanical detector run clean. Surfaced the residual near-miss-progress bug
that Keyway and Understory both carried unnoticed, and its fix, a small
safety margin subtracted from the measured clamp, was back-ported into both
the same day.