Skip to content
Site volume
Colourway

Print kit

Overprint

Inks that print over each other make a third colour: multiply on Bone, screen on Night, normal in Jewel.

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

Where two inks cross, the press prints a third colour. Overprint isolates its art children and blends each one with the look's --mk-blend, so shapes overprint the way they would on a riso. The maths is also exported: overprint(top, under, mode), blendFor(theme, colourway) and thirdColours(inks, mode).

Example#

Look of this example
Live render of examples/overprint/basic.tsx

Usage#

Wrap overlapping art in Overprint and the shapes print over each other like inks on a press: multiply on Bone, screen on Night, so where two inks cross a third colour appears. Covers, the mark's seams and hero art use it.

  • Blend. auto (default) follows the theme through --mk-blend; Jewel prints normal on both papers.
  • Third colours carry no meaning and get no tokens: they are what the press makes.
  • Data helpers. blendFor and thirdColours compute the overlaps for tables such as the colour page's.

Layer and volume#

Art only, at every volume (it is how overlaps print); the ink count per view is the volume budget's job. It never wraps text: a blended word changes colour where it crosses art and breaks the sanctioned pairs.

Anatomy#

The parts of examples/overprint/basic.tsx, numbered:
  1. GroupAn isolated stacking context..mk-overprint
  2. ChildEach child blends with the ones under it..mk-overprint > *

Volume#

  • Quiet

    The same: overlaps print at every volume.

  • Studio

    The same.

  • Press

    The same; the volume budget caps the inks per view.

  • Rave

    The same, with every ink in play.

Content#

  • Art only. Never wrap text in it.

Do and don't#

Do

Shapes that overprint.

Don't

A heading inside Overprint, so its letters change colour where they cross a disc.

Text that blends.

A blended word changes colour as it crosses art, so its contrast is no longer a sanctioned pair (D-B8). Only art overprints.

Accessibility#

  • aria-hidden; third colours carry no meaning and get no tokens.
  • The Process multiply vectors (magenta over aqua, yellow over magenta, yellow over aqua) are tested exactly against the press maths.

Props#

PropTypeDefaultDescription
blend"auto" | "multiply" | "normal" | "screen"none`auto` follows the look's `--mk-blend` (default).
classNamestringnone
children requiredReactNodenoneArt children only (shapes, glyphs, halftone screens); each direct child is blended.

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

Tokens#

System tokens (1)

Its own properties (1)

  • --mk-overprint-blend

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
  • 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).