Style and design

The three grounds

Every surface is one of three. There is no fourth. The rhythm across a seven-slide starter is loud, quiet, working — and never two strand-coloured slides in a row.

The palette

Each strand has two values and they are not interchangeable. Bright is a ground and a graphic. Deep is ink. All five brights fail as text on cream, which is why the deeps exist — the same hues darkened until they clear 4.5:1.

Contrast, measured

WCAG relative luminance, computed from the live tokens. 4.5:1 is the bar for body text, 3:1 for large text and non-text graphics.

Typography

Hierarchy is made by size and weight, never colour — on a strand ground there is only one usable ink, so a label is separated from a headline by being small, uppercase and letterspaced against something five times its size.

The marks

Nineteen SVGs, generated by AiAd27/make-marks.js: five strand icons, five posters, seven lockups and two chamfer shapes. Regenerate rather than hand-edit — the generator reads the strand colours straight out of css/aiad27.css, so a colour can only be changed in the place that paints with it. Not everything the campaign draws is a file; see the glyph marks below.

The lockup

Twelve files, one drawing — each shown on the ground it is for

Two coloured sets, because the contrast table gives each one a ground and neither covers both. Deep on cream (the brights fail there, 1.53–2.50:1). Bright on ink (the deeps go muddy there, 2.32–2.61:1) — and bright beats plain white on dark, because it still says which strand it is. Every card below carries its measured ratio; swapping a set onto the other ground is the one way to get an inaccessible lockup out of this kit.

Strand icons — 24×24, filled with the strand's bright

Poster graphics — 480×490, chamfered panel plus the strand symbol

The chamfer — the one structural motif, at the two sizes it is used

Both files are fill="currentColor". The panel cuts two opposite corners so the block reads as sheared rather than clipped; the 76px ballot tile cuts one, because at that size two cuts read as a hexagon instead of a signature. The two cuts are the same intended angle expressed twice — keep them within a point of each other.

The header and the closing rule — the furniture every slide carries

The pad is a flex column: header at 40px, footer at 32px with margin-top:auto, body taking whatever is left. That one rule is why the closing line sits on the same baseline on all thirty-five slides no matter how much copy is above it — nothing positions it, the column pushes it down. Shown at true 1280×720 proportions.

The row lattice — what a block's height is allowed to be

The stage divides once and the body divides evenly inside it, so a block's boundary always has a line to land on:

A slot is what you place; a row is what its boundary lands on. Every composition is two or three top-level slots and every slot is a whole number of rows — because a slot's height must not depend on its wording. A heading that grows by a line would otherwise push everything below it off the lattice; a heading in a two-row box does not. Spacing lives in boxes, not margins.

Spans round up. A span contains its block, so 275px of heading does not fit seven rows of 36 — it needs eight. Overflow becomes impossible by construction rather than by luck.

Two exceptions, for different reasons. The cover headline is the one variable slot: four of the five covers are two lines and take five rows, Smart is three lines and takes eight, and forcing three into five would mean dropping the type to about 72px against the 88px the campaign set. And word motion is not an exception at all — it animates with transform, opacity, blur and clip-path, none of which consume layout space, and it attaches to the discussion statement rather than the cover. A slot box never constrains it.

What each item costs — rows per item, measured across 520 Library slides

So that adding something can bring its measurements with it. These are medians from real slides, rounded up to whole rows, because a span has to contain its block.

Columns — the same idea across the page

Rows answer "how tall"; columns answer "how wide, and how far apart". The usable width is 1176px (1280 less the two 52px edges), and it divides as 12 columns of 65px with 36px gutters — the gutter is the row pitch, so both axes share one unit.

This is also the answer to moving an image closer to the text. That is not a freeform drag, it is a change of column span: an image on columns 8–12 dragged to 7–12 gets wider and closer, and still lands flush. Snapping in the second axis does the job people reach for freeform to do, without leaving the grid.

The comparison table — two claimed columns, no box

The campaign's only table, and it does not look like one. There is no outer border and no grid — a single hairline under each row and one down the middle. The work is done by the two headers: the left is the strand bright as a ground, the right is solid ink, so each column is visibly claimed by a side before a word is read. It sits on cream, the working ground.

The numbered row — index, title, supporting line

The campaign's densest pattern, and the one place three type sizes meet. A 105px fixed first column holds the index, so every title starts at the same x however many rules there are; a 1px rule separates the rows rather than a box around each. Shown on ink, which is the ground the rules slide uses.

The index set on its own. Tabular, two digits always — 01, never 1 — so the column stays the same width from the first row to the last and the titles never shift.

Marks that are not files — glyphs, set as type

These are set by the renderer as type, because they want the typeface's weight and optical size and they take their colour from the ground. Do not replace them with SVG — but note that ↔ and ↗ are not in every fallback stack, and at 130–230px a substituted glyph is not subtle. If Uncut Sans is not certain, draw them as paths.

A warning about the name. .cp-action-number never holds a number. It is hard-coded to ↗ in src/render/compositions.js and always has been — the class is named for the slot, not its contents. Read the renderer, not the class, before assuming what a mark is.

The rules

1. Three grounds: cream, ink, strand colour.
2. Bright is a ground. Deep is ink. Never swap them.
3. On a strand colour, type is black. Nothing light survives it — Responsible reversed out in white is 1.68:1.
4. On ink, use cream or the bright — never the deep, which was built for cream and goes muddy on black.
5. One typeface. Hierarchy by size and weight, never by colour.
6. The chamfer is the signature — the poster panel and the ballot letter tile, nowhere else.
7. Never two loud grounds in a row. The colour stops meaning anything.

One documented exception. The decks set the small label above a headline in white on the strand ground, at 24px/700. It fails the table above — worst case 1.68:1 on Responsible. It is a deliberate choice, legible at that size on a bright screen, and carries nothing that appears nowhere else. Do not extend it to body copy and do not assume it survives print.