# Design System Mapping — Wedding Newspaper Generator

> Classic broadsheet design system (NFR8/US6: black ink on white/cream, serif
> headlines/body, column rules). This maps the intended design tokens and
> patterns; there is no heavy UI framework — the output is self-contained
> HTML5 + CSS (NFR6). Component specs live in `interaction-spec.md`.

## Design principles

- **Print-first**: every design decision is made for A4 ink. Elegance on paper,
  legibility at arm's length, clean column flow.
- **Classic, not modern**: black ink on white/cream, serif display + text,
  hairline rule lines. No modern tabloid color-blocking (Q5=A, NFR8).
- **Honest content**: never fabricate images (FR7.4) or generic-sounding copy;
  the funnies are built from the couple's content (Q5=X).

## Colour tokens

| Token | Value | Use |
|---|---|---|
| `--ink` | #111827 (near-black) | Body text, rules, headings |
| `--paper` | #FBF8F1 (cream/off-white) | Page background |
| `--rule` | #d1c9ba (hairline) | Column rules, borders |
| `--muted` | #6b7280 | Byline/credit/meta text |
| `--accent` | optional (default none) | Minor masthead accent (kept neutral by default per NFR8) |

## Typography

| Role | Face style | Notes |
|---|---|---|
| Masthead title | Large serif display (e.g. a Georgia/Playfair-like serif) | Full-height banner |
| Headlines | Bold serif | Clear hierarchy, page-1 lead largest |
| Body | Serif text | Good A4 legibility |
| Small text | Serif, smaller | Bylines, captions, credits, fine print |

No web fonts are fetched; type relies on local system serifs so the page is
zero-network (NFR4) and prints with the fonts actually on the machine.

## Spacing & grid

- **A4 sheet**: 210×297mm; margins ~15–20mm; page defined via `@page` CSS.
- **Columns**: 3–6 per page depending on width (broadsheet-style multi-column
  flow), with hairline column rules.
- **Automatic pagination**: content flows across sheets with breaks at
  article/section boundaries where possible (US1/FR1, NFR2).

## Components (mapped to interaction-spec.md)

| Component | Where specified | Design role |
|---|---|---|
| Masthead | interaction-spec.md § Masthead | Header / H1, full sheet width |
| Article column | (page layout) | Serif body, byline + headline group |
| Pull quote / sidebar / fact box | (callout styles, FR3.3) | Boxed off from running text |
| Schedule / events table | (FR3.4) | Clearly formatted table |
| Photo embed | interaction-spec.md § Photo embed | Auto-balanced into column |
| Crossword / find-a-word | interaction-spec.md § Funnies | Bounded, A4-printable |
| Comic strip | interaction-spec.md § Funnies | Panels with art + dialogue |
| Review card | interaction-spec.md § review page | On-screen authoring (approved/edit/replace) |

## States

Per-mockup states (empty / loading / error / success / partial) are captured in
`mockups.md` § M5 and in each component's States table in
`interaction-spec.md`. On the generated page, the primary states are default
(full render) and empty (guided first-run, US10/Q7=A).

## Responsive behaviour

The printed artifact is A4 by definition (NFR1, C5). The on-screen generation
tooling (CLI text + review page) adapts: review cards stack on narrow widths,
span wider on large screens.

## Accessibility baseline

Per Q6=C there is no formal WCAG requirement (printed keepsake). A practical
baseline is kept: semantic HTML structure (`<header>`, H1, article sections),
alt/caption text on figures, and clear contrast (ink on cream). See
`accessibility-checklist.md`.