# Poster authoring vocabulary

Read this before writing a poster. Slides-style rules apply: fixed-geometry
canvas, fixed px type scale, everything brand comes from
`collateral/brand/tokens.css`.

## Page skeleton

```html
<link rel="stylesheet" href="../brand/tokens.css" />
<link rel="stylesheet" href="../shared/collateral.css" />
...
<div class="board">
  <section class="poster" data-title="01 - Human title">…</section>
</div>
<script src="../shared/collateral.js"></script>
```

`data-title="NN - Title"` drives the review-board caption **and** the export
filename (`nn-title.png`). Campaign-specific one-off components live in that
campaign's own `<style>` block — never in `shared/`.

## Formats

| Class | Size | Use |
| --- | --- | --- |
| `.poster` | 1080x1350 (4:5) | Instagram/LinkedIn feed — the default |
| `.poster.sq` | 1080x1080 (1:1) | Square feed, chat forwards |
| `.poster.story` | 1080x1920 (9:16) | Stories, reels covers, status |
| `.poster.wide` | 1920x1080 (16:9) | Banners, YouTube, screens at events |

1:1/4:5/9:16 share the 1080px width, so the type scale transfers directly.
`.wide` is landscape: favour fewer, bigger blocks (3-up `.cols`, one `h2`,
a foot) — don't pour a portrait layout into it.

## Registers and textures

- `.poster.dark` — ink register (`--dark-*` tokens).
- `.poster.has-grid` — faint 72px grid (`--grid-line`) for announcements
  and dividers.
- Full-bleed art: `.poster-bg > img` + `.poster-scrim`. Content children
  auto-lift above.

## Components

| Class | What |
| --- | --- |
| `.kicker` (+ `.num`) | Tracked-uppercase eyebrow in the primary colour |
| `h1` / `h2` (+ `em`) | Display face; `em` renders in the primary colour, no italics |
| `.lede` (+ `.wide`) | Standfirst, 32ch measure by default |
| `.chips` > `.chip` (+ `.c-2/3/4`) | Meta row: date, venue, audience |
| `.steps` > `.step` (`.sn`/`.st`/`.sd`) | Numbered how-it-works |
| `.cols` / `.rows` > `.card` (+ `.acc`/`.acc-2/3/4`/`.feature`, `.ck`, `h3`) | Card grids |
| `.stats` > `.stat` (`.v`/`.l`) | Stat tiles (3-up default) |
| `.cta` (`.ct`/`.cd`/`.cu`) | Dark call-to-action block |
| `ul.clean` | Dotted list |
| `.foot` > `.foot-lockup` (img + `.rule` + `.wordmark` + `i`) + `.foot-url` | Brand foot |
| `.tbd` | Loud dashed placeholder — grep before shipping |

## Skin extras

A skin may add a small number of signature components of its own — a
two-colour rule, a scrim tuned to the brand's photography, a texture that
only makes sense on that org's imagery. The pattern:

- They live **with the skin or the campaign** (a `<style>` block next to
  `tokens.css`, or in the campaign page), never in `collateral/shared/`.
- They consume **only tokens** — no new colour, font, or radius literals.
- They are documented where they are defined, and used sparingly: one skin
  extra per poster is a good ceiling.

The engine never learns them, so every campaign still renders correctly on
the neutral starter skin.

## Rules

- Fixed px type — never add responsive units or new px font sizes; tune
  per-poster with inline styles (`max-width` in `ch`, margin overrides).
- No emoji, no gradients on type, no decorative shadows, no pill CTAs.
- Every fact from the knowledge base, logs, or the user; `.tbd` everything
  else.
- Review: open the board, click posters to 100%. Export view: append `?flat`.