Skip to content
Site volume
Colourway

Print kit

Ink drawdown

An ink pulled down a test card to show its strength and its opacity over black. For colourways and client colours.

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

A drawdown is how a printer checks an ink: a stroke of it pulled down a white card across a black band. It takes a role or any colour, so the client-colourway helper can show a client's ink next to the system's.

Example#

Look of this example
Live render of examples/ink-drawdown/basic.tsx

Usage#

Use an ink drawdown to show an ink the way a printer tests it: a card with a black band, the ink pulled down across it so its opacity shows. Colour pages and the brand book use it beside SwatchChip.

  • ink is a line ink or any colour string.
  • The card stays white and black on Night: it is a physical object.

Layer and volume#

Art: aria-hidden, hidden at Quiet. The card is a physical object, so it stays white and black on Night.

Anatomy#

The parts of examples/ink-drawdown/basic.tsx, numbered:
  1. CardWhite test card..mk-ink-drawdown-card
  2. Black bandShows the ink's opacity..mk-ink-drawdown-band
  3. DrawdownThe ink, thinning as it is pulled..mk-ink-drawdown-ink

Volume#

  • Quiet

    Hidden.

  • Studio

    Shown.

  • Press

    Shown.

  • Rave

    Shown.

Content#

  • Name the ink beside it, with its swatch chip; the drawdown itself has no words.

Do and don't#

Do

Illustrates an ink.

Don't

A drawdown standing in for a colour value in a spec table.

Replaces the numbers.

A drawdown is a picture of an ink. Printers and developers need the values; put them beside it in a SwatchChip or a table.

Accessibility#

  • Always aria-hidden: pair it with a swatch chip that names the ink and its values.

Props#

PropTypeDefaultDescription
ink requiredstringnoneA role or any CSS colour ("#2E7D5B").
seednumbernone
childrenundefinednone

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

Tokens#

System tokens (4)

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

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