Lab

Colour, then type.

Pick a base colour or a project palette. The lab builds five colours, tests every text and background pair, and lets you take the values with you.

A Pantone colour fan deck spread open on a table
Library photo, not the studio. A printer’s colour fan.

Palette lab

Contrast uses the WCAG 2.x relative luminance formula. AA is 4.5:1 and AAA is 7:1 for normal text. Large text is noted separately (3:1 and 4.5:1).

FIELD NOTESHeldsteady.A short line of type, set in theworking colour.Halcyon
UI CARDBookingTuesday, by appointment.A sentence at body size.Request a time
Button pair passes AA for text.

Every text and background pair

Deep as background

Aa

1.00

Deep on Deep

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.59

Shade on Deep

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

2.48

Base on Deep

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

6.18

Tint on Deep

Pass AAFail AAA

Large text passes AA, passes AAA

Aa

11.49

Pale on Deep

Pass AAPass AAA

Large text passes AA, passes AAA

Shade as background

Aa

1.59

Deep on Shade

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.00

Shade on Shade

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.56

Base on Shade

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

3.90

Tint on Shade

Fail AAFail AAA

Large text passes AA, fails AAA

Aa

7.25

Pale on Shade

Pass AAPass AAA

Large text passes AA, passes AAA

Base as background

Aa

2.48

Deep on Base

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.56

Shade on Base

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.00

Base on Base

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

2.50

Tint on Base

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

4.64

Pale on Base

Pass AAFail AAA

Large text passes AA, passes AAA

Tint as background

Aa

6.18

Deep on Tint

Pass AAFail AAA

Large text passes AA, passes AAA

Aa

3.90

Shade on Tint

Fail AAFail AAA

Large text passes AA, fails AAA

Aa

2.50

Base on Tint

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.00

Tint on Tint

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.86

Pale on Tint

Fail AAFail AAA

Large text fails AA, fails AAA

Pale as background

Aa

11.49

Deep on Pale

Pass AAPass AAA

Large text passes AA, passes AAA

Aa

7.25

Shade on Pale

Pass AAPass AAA

Large text passes AA, passes AAA

Aa

4.64

Base on Pale

Pass AAFail AAA

Large text passes AA, passes AAA

Aa

1.86

Tint on Pale

Fail AAFail AAA

Large text fails AA, fails AAA

Aa

1.00

Pale on Pale

Fail AAFail AAA

Large text fails AA, fails AAA

Type

Type playground

Three pairings used across the case studies. Edit the sample, move the sliders, copy the CSS.

A steadier kind of recognition.

Body text sits in a clean sans, at a size you can read for a while. The pairing should feel inevitable, not fashionable.

Bricolage Grotesque & Outfit · 72px · weight 560 · tracking -0.030em · leading 1.02

/* Studio pairing */
.display {
  font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
  font-size: 72px;
  font-weight: 560;
  letter-spacing: -0.030em;
  line-height: 1.02;
}
.body {
  font-family: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}