3.5 KiB
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
@pageCSS. - 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.