D · 4 / 26

D — Duotone

Any image, two inks.

Inks
The style

Two plates, one picture.

Duotone began on the press. A photograph is screened into halftone dots twice and printed from two plates in two inks, classically black and one colour, so a single image gains a depth or a tint that one ink cannot give. Photo books and posters have used it for generations.

Around 2015 it came back on screens, and louder. The second ink stopped being a quiet warm grey and turned electric: blue against pink, green against violet. Spotify’s 2015 Year in Music campaign, built on the identity the studio Collins made for the brand, is the example most often cited.

The method is simple. Drop the colour, keep the tone, then map the darkest pixels to one ink and the lightest to the other. Here that is an SVG filter: a feColorMatrix makes the picture grey, a feComponentTransfer spreads the greys between two inks. It makes unrelated pictures belong together, as our own screens do below. It fails when the pair has no contrast, or when text sits on the picture without a solid ground.

Our own screens: designn, Granpedra, HalalPin and NOVA, in one pair of inks.
In use

A music app in two inks.

A playlist screen, working: pick a mix and the whole screen re-inks, covers included. Play, skip, shuffle and save all work.

Mixes4 mixes · 20 songs
Mix

Night Shift

Late, slow, mostly synths · 5 songs, 20 min

Brushed SteelHalden
1:044:14
  1. 01One pair per playlistEach mix brings its own two inks. The header, every cover and the controls take them, so covers shot by different people still read as one set.
  2. 02Text never sits on the pictureThe title is set on a solid band of the dark ink, the list on the light one. The pictures carry no type at all.
  3. 03The chosen row is the dark inkThe playing track turns solid, light ink on dark, with the bars moving beside its time. No third colour is needed to say “now”.
  4. 04Tone firstEach photograph is lifted or firmed up before the inks go on, so a dark picture still spends some of the light ink.
The kit

Every part, every state.

Three things to print with: the dark ink, the light ink and the paper. Chosen is the dark ink set solid; the light ink is a plate printed 4px off register. Switch the inks above and the kit follows.

Button

The light ink is a second plate, set 4px off registerPressed puts the plates back in registerDisabled drops the plate and dashes the rule

Text field

Error fills the field with the light ink and says why

Select

Switch, checkbox, radio

Two-colour proof
Print to the edge
Halftone screen
On is the dark ink, and the knob’s side says it too

Slider

Too flat and only one ink prints; too hard and the mids vanish

Progress

Light plate64%
68%Inking the plates
The track is the light ink, the progress the dark

Segments and tabs

Both plates, as the press will print them.

Separations: each plate alone, then both together

List rows

Ink pair for the page
Choosing a row re-inks the whole page

Card and loading

Steel, in two inks

Proof 3 · uncoated · 500 copies

Type sits on the paper, never on the pictureLoading is a halftone screen, drifting

Toast

Set solid in the dark ink, with the plate behind

Modal

The page behind fades to half; the dialog keeps its plate

Steps

  1. Picture (done)
  2. 2Inks
  3. 3Tone
  4. 4Export
Done is solid, now has the plate, next is dashed

Badges and avatars

Two inksProofNewDraft
3
Avatars take the pair too, so a team reads as one set
Signature

Duotone your own picture.

Drop a photograph, pick a pair or mix two inks, and download the result as a PNG. It all runs on a canvas in your browser; nothing is uploaded.

Picture

Or drop a picture on the preview.

Inks

3.3:1 apart.Enough for a picture, not for text between them.

Tone, before the inks
3 × 2 px
Tokens

The system, in two inks.

Ink switch

Every picture on the page is stacked once per pair. Switch the pair and the layers cross-fade; the type re-inks with them.

Typeface · Familjen Grotesk
  • Two inks, one picture.Weight 700
  • Two inks, one picture.Weight 600
  • Two inks, one picture.Weight 500
  • Two inks, one picture.Weight 400
Palette
  • Ultramarine#1b1fdcPink#ff5ea8
  • Green#00603fViolet#b98cff
  • Navy#14215eOrange#ff8a2b
  • Paper #f5f2ec
  • Black, on light ink #121216
Type scale
  • Display
    104 / 700    Two inks
  • Heading
    60 / 700    Two inks
  • Lead
    22 / 400    Two inks
  • Body
    18 / 400    Two inks
  • Label
    13 / 400    Two inks
Rules of the press
Rule
2px
Every border, the ink’s own weight
Corners
0
Cut paper, not moulded plastic
Plate
4px 4px
The light ink, set off register
Focus
3px at 4px
Dark ink outline, 6.8:1 or more
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
:root {
  --paper: #f5f2ec;
  --black: #121216; /* text on the light ink */

  /* The pair. Swap both together, never one. */
  --ink-shadow: #1b1fdc;
  --ink-light: #ff5ea8;
  /* or Green / Violet: #00603f / #b98cff */
  /* or Navy / Orange: #14215e / #ff8a2b */

  --rule: 2px solid var(--ink-shadow);
  --plate: 4px 4px 0 var(--ink-light);
  --focus: 3px solid var(--ink-shadow);
  --focus-offset: 4px;
  --radius: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* Pictures: an inline SVG filter does the inking.
   <filter id="duotone" color-interpolation-filters="sRGB">
     <feColorMatrix type="saturate" values="0" />
     <feComponentTransfer>
       <feFuncR type="table" tableValues="shadow-r light-r" />
       <feFuncG type="table" tableValues="shadow-g light-g" />
       <feFuncB type="table" tableValues="shadow-b light-b" />
     </feComponentTransfer>
   </filter> */
.duotone {
  filter: contrast(1.2) url(#duotone);
}

Do

  • Pick two inks far apart in value. The dark one carries the shadows, the light one the highlights.
  • Set the tone before the colour: lift dark pictures and firm up pale ones, so both inks get used.
  • Keep one pair across a set. That is what makes pictures that never belonged together match.
  • Never set text on the picture itself. Give it the paper or a solid ink.

Don’t

  • Inks too close in value

    Violet and pink, 1.6:1 apart. The picture turns to mush: no shadow, no highlight, just a tint.

  • Text set on the picture

    Over the light areas it vanishes, over the dark ones it shouts. Give it the paper or a solid ink instead.

  • A pair per picture

    Four pictures in four pairs. The set falls apart, which is the one thing duotone was there to stop.

In the wild

Where the style shows up outside this page.

  1. Anna Atkins · 1843

    Photographs of British Algae

    Cyanotypes: one Prussian blue and the paper, the oldest two-tone pictures in print.
  2. Reid Miles · 1956–1967

    Blue Note sleeves

    Francis Wolff’s photographs tinted one colour, set hard against big type.
  3. Jim Fitzpatrick · 1968

    Viva Che

    Korda’s photograph cut to black on red, the two-tone poster everyone copied.
  4. Collins · 2015

    Spotify identity

    Artist photos mapped to two bright colours, so any picture fits the brand.