Data cover

The cover generator turns a plate (marks per slot, never people) into an SVG on a fixed grid. The grid layout prints a timeline in tiles, layer by layer, so big shapes overprint their neighbours; score prints rows of cells. Halftone means a machine placed it, solid means a person did. generateCover, coverAlt and validatePlate are pure and also power the generators.

Example#

Volume

Paper

Colourway

Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.

PebblepathNo. 014

build
a half circle
design
a triangle
a crescent

Live render of examples/cover/basic.tsx

Usage#

Use a cover to turn a project's data into a printed plate: a timeline in tiles, a score of rows, a stack of layers or a release history. Case studies, cards and posters use the same plates; the generators render them for files.

Layouts. grid (a timeline in tiles), score (rows of cells), stack (layers, bottom first) and releases (a track of releases).
Words. words names what each mark stands for, so coverAlt can describe the cover; legend prints that key in HTML.
Determinism. The same plate always draws the same cover: no clock, seeded marks.
No people. A plate holds marks and short labels, never people's names.

Layer and volume#

Art in a figure. Studio prints one entrance (tiles fade in by layer); Press and Rave print it (70 ms a layer); none at Quiet or under reduced motion. The sheet may tilt only without in-SVG labels (−2.2° at Press and Rave).

Anatomy#

Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.

PebblepathNo. 014

build
a half circle
design
a triangle
a crescent

SheetThe SVG plate, named by its alt text..mk-cover-sheet
TitleIn the caption, square, reading layer..mk-cover-title
NumberThe edition number..mk-cover-no
LegendWhat each mark means, in HTML..mk-cover-legend

Volume#

Quiet
Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
build
a half circle
design
a triangle
a crescent
No entrance.
Studio
Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
build
a half circle
design
a triangle
a crescent
Tiles fade in once, by layer.
Press
Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
build
a half circle
design
a triangle
a crescent
The print: tiles stagger by layer; an unlabelled sheet may tilt −2.2°.
Rave
Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
build
a half circle
design
a triangle
a crescent
The same as Press.

Content#

Labels are 22 characters at most (12 on releases, 6 for row labels).
The legend and the alt text say what the marks mean; the cover never holds the only copy of a fact.

Do and don't#

Pebblepath, a 6-week build, as a cover: design in weeks 1 to 2, a half circle in week 2, build in weeks 3 to 4, a triangle in week 5, a crescent in week 6.

PebblepathNo. 014

build
a half circle
design
a triangle
a crescent

Marks for phases, a legend for meaning.

Don't

A cover whose tiles are labelled with the team members' names.

People on a plate.

Covers are about the work. Names in tiny SVG labels cannot be read well and should not be printed as decoration.

Accessibility#

The sheet is role="img", named by a visually hidden coverAlt (what each mark stands for and when, never people).
The title, number and legend are reading-layer HTML in the figcaption; the cover never holds the only copy of a fact.

Props#

Prop	Type	Default	Description
`plate` required	`CoverPlate`	none
`words`	`CoverWords`	none
`legend`	`boolean`	none	An HTML legend of the marks in the figcaption.
`size`	`string`	`min(100%, 21.25rem)`	CSS size of the sheet (default `min(100%, 21.25rem)`).
`labels`	`boolean`	`true`	Row slugs, crop marks and the registration target inside the sheet (default true; off when tilted).
`tilt`	`number`	none	Degrees; only without labels; clamped to ±`--mk-v-tilt-max`.
`tape`	`boolean`	none	Two strips of masking tape on the sheet's top corners.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from CoverProps in packages/overprint-react/src/cover/cover.tsx.

Tokens#

System tokens (27)

Its own properties (9)

--mk-cover-dur
--mk-cover-from
--mk-cover-size
--mk-cover-stagger
--mk-cover-tilt
--mk-i
--mk-now-col
--mk-now-frac
--mk-now-row

Scanned from its CSS at build and checked against its registry entry; 20 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).