Skip to content
Site volume
Colourway

Print kit

Swatch chip

An ink's reference chip: a solid block, its code and name, its value and, on request, its sanctioned pairs with their contrast.

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

A swatch chip names an ink. With pairs it lists the pairs that ink is sanctioned for in a look, with the WCAG ratio and the APCA Lc from the tokens' pair data, so a colour page shows what each ink may carry.

Example#

Look of this example
MAKR 806Process magenta
on-m on ink-m-solid
5.3:1, Lc 80
on-m on ink-m-hover
6.1:1, Lc 83
on-m on ink-m
5.3:1, Lc 80
ink on ink-m-tint
15.2:1, Lc 92
ink-2 on ink-m-tint
6.7:1, Lc 75
ink on ink-m-tint-hover
16.7:1, Lc 99
Live render of examples/swatch-chip/basic.tsx

Usage#

Use a swatch chip to specify an ink: a solid block with its name, common name and hex, and, with pairs, the sanctioned text pairs with their WCAG ratio and APCA Lc. The colour pages, the brand book and the client-colourway helper use it.

  • Props. ink, name, code (a reference such as "MAKR 806"), hex and pairs.
  • look pins the look the values are read in; maxPairs caps the list.

Layer and volume#

Composite: the ink block is an art-free plate and the label a plate. Identical at every volume (reference content).

Anatomy#

MAKR 806Process magenta
on-m on ink-m-solid
5.3:1, Lc 80
on-m on ink-m-hover
6.1:1, Lc 83
on-m on ink-m
5.3:1, Lc 80
ink on ink-m-tint
15.2:1, Lc 92
ink-2 on ink-m-tint
6.7:1, Lc 75
ink on ink-m-tint-hover
16.7:1, Lc 99
The parts of examples/swatch-chip/basic.tsx, numbered:
  1. Ink blockSolid, no texture..mk-swatch-chip-ink
  2. NameAnybody 900..mk-swatch-chip-name
  3. CodeThe house reference and the hex, tabular..mk-swatch-chip-code
  4. PairsText pairs with WCAG and Lc..mk-swatch-chip-pairs

Volume#

  • Quiet

    MAKR 806Process magenta
    on-m on ink-m-solid
    5.3:1, Lc 80
    on-m on ink-m-hover
    6.1:1, Lc 83
    on-m on ink-m
    5.3:1, Lc 80
    ink on ink-m-tint
    15.2:1, Lc 92
    ink-2 on ink-m-tint
    6.7:1, Lc 75
    ink on ink-m-tint-hover
    16.7:1, Lc 99

    Identical: reference content.

  • Studio

    MAKR 806Process magenta
    on-m on ink-m-solid
    5.3:1, Lc 80
    on-m on ink-m-hover
    6.1:1, Lc 83
    on-m on ink-m
    5.3:1, Lc 80
    ink on ink-m-tint
    15.2:1, Lc 92
    ink-2 on ink-m-tint
    6.7:1, Lc 75
    ink on ink-m-tint-hover
    16.7:1, Lc 99

    Identical.

  • Press

    MAKR 806Process magenta
    on-m on ink-m-solid
    5.3:1, Lc 80
    on-m on ink-m-hover
    6.1:1, Lc 83
    on-m on ink-m
    5.3:1, Lc 80
    ink on ink-m-tint
    15.2:1, Lc 92
    ink-2 on ink-m-tint
    6.7:1, Lc 75
    ink on ink-m-tint-hover
    16.7:1, Lc 99

    Identical.

  • Rave

    MAKR 806Process magenta
    on-m on ink-m-solid
    5.3:1, Lc 80
    on-m on ink-m-hover
    6.1:1, Lc 83
    on-m on ink-m
    5.3:1, Lc 80
    ink on ink-m-tint
    15.2:1, Lc 92
    ink-2 on ink-m-tint
    6.7:1, Lc 75
    ink on ink-m-tint-hover
    16.7:1, Lc 99

    Identical.

Content#

  • The name is the ink's print name; the code is the house reference.
  • Values come from the tokens, never typed by hand.

Do and don't#

Do

MAKR 806Process magenta

Values from the tokens.

Don't

A swatch with a hex copied by hand from a screenshot.

A typed value that drifts.

A swatch is a spec. Read from the tokens, it is right in every look and every release.

Accessibility#

  • The name, value and pairs are reading text; the block is decoration beside them.

Props#

PropTypeDefaultDescription
ink requiredstringnoneA role or any CSS colour (a client's ink).
name requiredstringnoneThe common name ("Process magenta", "Fernlight green").
codestringnoneThe ink's code ("MAKR 806"); printed large when given, else the name is.
hexstringnoneThe value to print ("#C31A9D").
pairsbooleannoneLists the ink's sanctioned pairs in `look` (role inks only).
lookLookSelectorProcess, Studio, Bone, normal contrastThe look the pairs are read in (default Process, Studio, Bone, normal contrast).
maxPairsnumber6At most this many pairs (default 6).
childrenundefinednone

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

Tokens#

System tokens (15)

Its own properties (5)

  • --mk-swatch
  • --mk-swatch-code-leading
  • --mk-swatch-code-size
  • --mk-swatch-code-wdth
  • --mk-swatch-line-gap

Scanned from its CSS at build and checked against its registry entry; 10 read but not declared there.

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