Skip to content
Site volume
Colourway

Print kit

Printer's marks

Crop marks, registration targets, a colour bar and a slug that frame art like a press sheet.

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

The press sheet's furniture as decoration: crop marks at the four corners, registration targets on the sides, a colour bar and a short slug under the sheet. They draw in the host's margin, so leave at least margin of space around it. CropMarks, RegistrationTarget and ColourBar are also exported on their own, and printerMarksNode gives the generators the same marks as data.

Example#

Look of this example
Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
Live render of examples/printer-marks/basic.tsx

Usage#

Use printer's marks to frame a printed object as a proof: a cover, a poster, a one-pager, a spec sheet. Crop marks sit at the corners, registration targets on chosen sides, a colour bar and a slug line along the edge.

  • Space. The marks draw outside the host's box, so the host needs a free margin of at least margin (18 px) around it.
  • Parts. crop, registration (the sides that get a target), colourBar (true or "tints") and a slug of 40 characters or fewer.
  • Single marks are exported too: CropMarks, RegistrationTarget, ColourBar.

Layer and volume#

Art in the host's margin. Quiet keeps the crop marks only (no targets, no bar, no slug); Studio and up print everything.

Anatomy#

Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014
The parts of examples/printer-marks/basic.tsx, numbered:
  1. HostThe object being proofed..mk-printer-marks
  2. Registration targetOn the chosen sides..mk-registration-target
  3. Colour barThe inks, with tints..mk-colour-bar
  4. SlugDecorative job line, 12 px or more..mk-printer-marks-slug

Volume#

  • Quiet

    Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
    PebblepathNo. 014

    Crop marks only.

  • Studio

    Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
    PebblepathNo. 014

    Crop marks, targets, the bar and the slug.

  • Press

    Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
    PebblepathNo. 014

    Everything.

  • Rave

    Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
    PebblepathNo. 014

    Everything.

Content#

  • The slug reads like a job ticket: "MAKR Labs · K-01 · 4 inks". It is decorative and hidden from assistive tech, so nothing important goes in it.

Do and don't#

Do

Pebblepath as a cover: a disc in weeks 1 to 2, a half circle in week 2, stripes in weeks 3 to 4, a triangle in week 5, a crescent in week 6.
PebblepathNo. 014

Marks around a printed object.

Don't

Crop marks around a paragraph of body text.

Marks around reading text.

Printer's marks say this is a print. Around running text they are noise that crowds the measure.

Accessibility#

  • Every mark is aria-hidden; the slug is decorative (≤ 40 characters, Schibsted 550 at 12 px with tabular numerals).
  • No fact lives only in a slug.

Props#

PropTypeDefaultDescription
cropbooleantrueCrop marks at the four corners (default true).
registrationreadonly MarkSide[]top and rightRegistration targets, centred on these sides (default top and right).
colourBar"tints" | booleannoneA colour bar under the bottom-left corner; `"tints"` adds 50 % and 20 %.
slugstringnoneA decorative slug under the bottom-right corner, ≤ 40 characters ("MAKR Labs · K-01 · 4 inks").
marginnumber18Space the marks need around the host, px (default 18).
children requiredReactNodenoneThe host: the art, cover or plate the marks frame.

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

Tokens#

System tokens (8)

Its own properties (4)

  • --mk-colour-bar-cell
  • --mk-crop-margin
  • --mk-printer-marks-slug-leading
  • --mk-printer-marks-slug-size

Scanned from its CSS at build and checked against its registry entry; 1 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).