Skip to content
Site volume
Colourway

Comic kit

Newsprint

The newsprint stock as art: pulp for the old comic, cool for an accent, with fibre, speck and a vignette.

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

Newsprint fills a gutter or an art region with the newsprint stock. Pulp is the old comic's paper with fibre, speck and a warm vignette; cool is the newsprint accent. Words on it sit on flat plates scoped to that stock.

Example#

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

Usage#

Use newsprint as a stock for gutters and art regions: the warm pulp of an old comic, or the cool newsprint stock. Reading plates on it become pulp or newsprint stock scopes, with their own flat plate and ink ladder.

  • Tones. pulp (the old comic, default at Press) and cool.
  • Texture. fibre, speck and vignette (pulp default on).

Layer and volume#

Art stock for gutters and art regions. Quiet and more contrast print the flat colour; Studio allows it as a section accent; at Press (the old register) it is the default gutter.

Anatomy#

The parts of examples/newsprint/basic.tsx, numbered:
  1. StockPaper colour, fibre and specks..mk-newsprint

Volume#

  • Quiet

    Flat colour, no texture.

  • Studio

    A section accent.

  • Press

    The default gutter in the old register.

  • Rave

    Allowed anywhere art goes.

Content#

  • None: newsprint is a stock. Words on it sit on its plates.

Do and don't#

Do

A stock for gutters and art.

Don't

Body text printed straight on the fibre texture.

Text on the texture.

Fibres and specks under letters read as dirt. Reading text goes on the stock's flat plate.

Accessibility#

  • Always aria-hidden; reading plates on it carry data-mk-stock="pulp" or "newsprint".

Props#

PropTypeDefaultDescription
tone"cool" | "pulp"none
fibrebooleannone
speckbooleannone
vignettebooleanon for pulpA warm vignette at the edges (default on for pulp).
childrenundefinednone

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

Tokens#

System tokens (4)

Its own properties (5)

  • --mk-cx-vignette
  • --mk-newsprint-stock
  • --mk-newsprint-tex
  • --mk-tile-fibre
  • --mk-tile-speck

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

0.1.024 October 2026

  • Minortokensconsumer/mk-selector, raw-colour, token-exists, mono, uppercase, glow, loop); --mk-on-control-2 (placeholder ink on the control face); the label role at 14 px / 600 (floor Lc 90, printed in --mk-text); pair rows for display text, the control's second ink and the accent stocks (White, Newsprint, Pulp, Kraft, read on the stock's own ladder via a row's stock); generated/ts/pairs.ts (PAIRS, STOCK_LADDERS, re-exported by ./hex). Read the whole entry