Skip to content
Site volume
Colourway

Print kit

Grain

Paper tooth, speck and fibre on art and covers, never on a plate under words.

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

Grain gives art the tooth of real stock. <Grain /> is an overlay inside an art host; the utility class mk-grain adds the tooth to any element marked data-mk-layer="art". Tooth follows the theme (dark specks on Bone, light on Night); speck and fibre come from the pulp stock.

Example#

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

Usage#

Use grain to give art the tooth of real paper: covers, art plates, gutters at Press. It is an overlay of a fine texture tile inside an art host.

  • Kinds. tooth (default, a paper surface), speck (ink specks) and fibre (for Kraft and pulp stocks).
  • Amount scales the opacity; keep it subtle.
  • Art hosts only. The .mk-grain class on an element with text in it fails check:brand: grain never sits on a plate.

Layer and volume#

Art only, never on a plate. Quiet: none. Studio: art plates and covers. Press: plus gutters. Rave: any surface except plates. None under more contrast.

Anatomy#

The parts of examples/grain/basic.tsx, numbered:
  1. Art hostPositioned, aria-hidden.[data-mk-layer="art"]
  2. GrainThe tile, over the host..mk-grain-layer

Volume#

  • Quiet

    None.

  • Studio

    Art plates and covers.

  • Press

    Plus gutters.

  • Rave

    Any surface except plates.

Content#

  • Grain carries no words and changes no meaning; it is texture.

Do and don't#

Do

Texture on art.

Don't

Grain over a form's white plate, so the field labels sit on speckles.

Texture under labels.

Specks under letters read as dirt, and they change contrast across a word. Plates stay flat (audit L5).

Accessibility#

  • aria-hidden; texture never sits behind words.

Props#

PropTypeDefaultDescription
kindGrainKindnone
amountnumber10 to 2, scales the volume's strength (default 1).
childrenundefinednone

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

Tokens#

System tokens (1)

Its own properties (8)

  • --mk-grain-amount
  • --mk-grain-tile
  • --mk-t-bone
  • --mk-t-night
  • --mk-tile-fibre
  • --mk-tile-grain-dark
  • --mk-tile-grain-light
  • --mk-tile-speck

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

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).