Skip to content
Site volume
Colourway

Print kit

Proof sheet

Frames on a contact strip with the pick ringed in grease pencil. For work indexes and design rounds.

  • Experimental
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/print
On this page

A proof sheet lays out rounds of work as frames on a film strip or a ruled sheet, and rings the one that was picked. The frames are plates or images; the strip, the pencil ring and the check are art drawn around the pick, never across its label.

Example#

Look of this example
  • Round 1Round 1
  • Round 2Round 2
  • Round 3Round 3 · Pick
Live render of examples/proof-sheet/basic.tsx

Usage#

Use a proof sheet to show options side by side and mark the one that was picked: design rounds, logo options, layout explorations. Frames sit on a film strip or a contact sheet; the pick is ringed in grease pencil.

  • Frames hold any node (plates or images); a frame with href is a link.
  • The pick is named in words ("Pick" or aria-current), never by the ring alone.
  • Strip. film (sprocket holes, default) or sheet; columns sets the grid.

Layer and volume#

Composite: frames are plates or images; the film strip, the ring and the check are art. Quiet marks the pick with a 3 px ink outline and its label; Studio draws the ring on once; Press and Rave add the check.

Anatomy#

  • Round 1Round 1
  • Round 2Round 2
  • Round 3Round 3 · Pick
The parts of examples/proof-sheet/basic.tsx, numbered:
  1. Film stripArt: sprocket holes top and bottom..mk-proof-film
  2. FrameA plate or an image, untouched..mk-proof-frame
  3. Pencil ringAround the pick, never across its label..mk-proof-ring

Volume#

  • Quiet

    • Round 1Round 1
    • Round 2Round 2
    • Round 3Round 3 · Pick

    The pick gets a 3 px ink outline and its label.

  • Studio

    • Round 1Round 1
    • Round 2Round 2
    • Round 3Round 3 · Pick

    The pencil ring draws on once.

  • Press

    • Round 1Round 1
    • Round 2Round 2
    • Round 3Round 3 · Pick

    Plus a check.

  • Rave

    • Round 1Round 1
    • Round 2Round 2
    • Round 3Round 3 · Pick

    The same as Press.

Content#

  • Frame labels say what each option is: "Round 3", "Option b".
  • Name why the pick won in the text around the sheet.

Do and don't#

Do

  • Round 1Round 1
  • Round 2Round 2
  • Round 3Round 3 · Pick

The ring and the word.

Don't

A proof sheet where the pick is only marked by the red ring.

A ring alone.

A circle drawn on a picture is invisible to a screen reader and easy to miss. The pick is also named in words.

Accessibility#

  • The ring is never the only sign of the pick: its label reads "Pick" and a linked pick carries aria-current="true".
  • Frames with href are links with the kit's focus ring.
  • Reduced motion: the ring is drawn at once.

Props#

PropTypeDefaultDescription
frames requiredreadonly ProofFrame[]none
pickstringnoneThe id of the frame the pencil rings.
columnsnumber3Frames per row (default 3; one column under 30 rem).
strip"film" | "sheet"none`film` (default): an ink strip with sprocket holes; `sheet`: frames ruled on the paper.
pickLabelstring"Pick"The pick's word (default "Pick").
childrenundefinednone

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

Tokens#

System tokens (21)

Its own properties (6)

  • --mk-proof-cols
  • --mk-proof-film
  • --mk-proof-filter
  • --mk-proof-gap
  • --mk-proof-pad-x
  • --mk-proof-pad-y

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorfonts, reactEditionNumber, ProofSheet, DieLine, InkDrawdown and SwatchChip (with inkPairs, the ink's sanctioned pairs in a look), and the Halftone photo plate case. Read the whole entry
  • Patchreact, threeCombobox gives its inline list an id and the input's name in the server markup and marks its box as the input's focus-ring host, and a highlighted row's second line prints in --mk-text; the EmptyState and Popover descriptions print in the meta role (16 px, 500, so --mk-text-2 clears the APCA floor); SplashTitle's Quiet heading prints on its own paper plate and wraps inside its cell; the Toast viewport and specimen keep one column no wider than their box; ProofSheet's frame links draw the focus ring. Read the whole entry