Data Poster.

A printed editorial page: twelve ruled columns that never move, cells that shift 24px, and one red rule that slides.

Look

As designed

Use Data Poster in the Studio Open full screen

How it moves

Newspaper-annual look on warm paper: a Fraunces serif over Instrument Sans, hairline column rules, an "In this issue" index, a masthead per plate and a running footer. The grid is constant; only the cells rise in with a per-column stagger and a single accent rule floats to a new height on each plate. Every plate is an asymmetric composition with marginalia. Use it for data stories, annual reports and anything that should read like a designed page rather than a slide.

This is the specification the Studio sends to the model, written for Data Poster's own look. Change the look in the Studio and every value follows.

Palette

Background#faf7f1
Text#171310
Muted#6d655c
Accent#c02a1b
Surface#ffffff
Hairlinergba(23,19,16,.16)

Type: Fraunces. Corners: 0px.

Layout

- A printed page on #faf7f1. Radius is 0px everywhere: no rounded corners, no shadows, no filled cards. Two faces: the display face ('Fraunces', 'Iowan Old Style', Georgia, serif) for the masthead title, standfirsts, big numbers and quotations (weights 300 and 600), and the body face ('Instrument Sans', system-ui, sans-serif) for notes, labels and UI. Body font-size clamp(.92rem, 1vw, 1.02rem).

- THE GRID IS CONSTANT. Twelve equal columns run between outer margins of 4.4vw (left and right) and full height, each ruled with a 1px rgba(23,19,16,.16) left border (plus one on the far right). Three horizontal rules: a "top" rule under the masthead (1px #171310, 85% opacity) at my + index height + masthead height from the top, a "base" rule above the running footer (1px rgba(23,19,16,.16)), and a floating rule in #c02a1b (see Motion). Vertical bands, from the top (page margin --my 3.2vh): index strip clamp(1.4rem, 3.2vh, 1.85rem), masthead clamp(3.1rem, 7.4vh, 4.5rem), body 1fr, footer clamp(1.7rem, 3.8vh, 2.2rem). Text sits a --gut (clamp(.5rem, .8vw, .85rem)) inside each column rule.

- "In this issue" index: a fixed top strip on one line: a label in #c02a1b (.58rem caps, tracked .18em) then one button per plate: two-digit tabular number plus title at .62rem caps tracked .1em, #6d655c, preceded by a .3rem square that is rgba(23,19,16,.16) (#6d655c once visited, #c02a1b when active). Active title is #171310 at weight 600. The strip scrolls horizontally with the scrollbar hidden and scrolls the active entry into view.

- Masthead, per plate, on the 12 columns: columns 1-2 a section label (.62rem caps, tracked .2em, #c02a1b, e.g. Cover, Decisions, Results, Method), columns 3-10 the plate title in the display face at weight 600, clamp(1.6rem, 3.3vw, 3.3rem), line-height .95, -0.025em; columns 11-12 the plate number right-aligned in the display face ("03 / 07" with the current number in #c02a1b, the rest #6d655c).

- Body: a 12-column grid, content centred vertically, block padding clamp(.9rem, 2.4vh, 1.9rem). The body is an ASYMMETRIC composition of zones, each declaring its own start column and span (grid-column: --c / span --s). A lead zone (cols 1-8 or 1-6 or 1-7) holds the main statement and object; a sub zone (cols 8-12 or 9-11) holds a secondary object; a marginalia zone (col 12, one column wide) holds 2-3 tiny notes under a "Margin" label with a 1.1rem x 2px #c02a1b tick. Vary the composition per plate; the quotes plate mirrors it with the margin at column 1 and the quotes at 6-12. Editorial type: .stand is a display-face standfirst (weight 300, clamp(1.12rem, 1.8vw, 1.8rem), 32ch; .big is clamp(1.6rem, 3.1vw, 3.1rem), 20ch); .note is .86rem #6d655c; .tag is a .6rem caps label with a 1.1rem x 2px #c02a1b dash before it.

- Objects are re-cut for print: cards, diagram cards, features, compare columns and carousel items lose their background and border and keep only a 1px rgba(23,19,16,.16) top rule (the accent variant a 2px #c02a1b top rule, text unchanged); stats have a 1px top rule and display-face numerals clamp(2rem, 3.7vw, 3.7rem); bars have square #171310-at-12% tracks .55rem tall; the big number is display-face clamp(3.2rem, 7.6vw, 7.6rem) with a 2.2rem x 3px accent bar above; waffle squares are square, filled #c02a1b; journey markers, check bullets, pills and roadmap lanes are square. Check that no text is under 13px on the actual screen.

- Running footer: source line at left (cols 1-3), a masked repeating wordmark in the middle (cols 4-9, #c02a1b square separators, faded at both edges), "Plate 03 / 07" at right (.62rem caps, tabular, current number in #171310). Closing plate is an outlook composition: a roadmap (Q1-Q4 lanes) in the lead zone plus a "Colophon" note in the sub zone; there is no takeover.

Motion

- Only the CELLS move. Each masthead item and zone has class cel with --c (its column) and starts opacity 0. On a plate in the future state cells sit at translateY(24px); on a past plate at translateY(-24px) with a .3s exit. The active plate's cells go to opacity 1 and translateY(0) over .55s cubic-bezier(.22,1,.36,1) with transition-delay (c - 1) x 26ms, so content sweeps in left to right across the columns.

- THE FLOATING RULE: a 1px #c02a1b line across the page whose translateY is --fy vh, set from each slide's data-float (values like 30, 72, 26, 84, 40, 24, 78) so it lands at a different height on every plate; transition transform .55s cubic-bezier(.22,1,.36,1). It is the only part of the grid that moves.

- Set body data-reveal-delay="620" data-animate-delay="620". Under 760px the page becomes a single column: only every third grid rule is drawn, the masthead title spans all columns and the plate number hides, zones stack and scroll vertically, marginalia and the wordmark hide.

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every entry in the index strip is a button and jumps.