StudioBelleau
Lab 01—05

Lab

Things I make between projects to try out an idea. Each one runs on this page.

01

Poster

Type a line and it is set as a poster on a twelve-column grid. Tap the poster for a new layout, and save the one you like as an image.

Made
May 2026
With
Canvas, a variable font, under 200 lines of JavaScript

02

Wordmark

Type a business name to see it set six ways in the two typefaces this site uses, from wide and light to narrow and black. Each is a starting point for a logo, not a logo.

Made
April 2026
With
Two typefaces, CSS, under 60 lines of JavaScript

  1. 01 Wide, light wdth 125 · wght 250

  2. 02 Narrow, black wdth 75 · wght 900

  3. 03 Sans and serif Mona Sans · Instrument Serif

  4. 04 Stacked wdth 88 · wght 700

  5. 05 Construction cap height · x-height · baseline

  6. 06 Lowercase wght 720 · a blue full stop

03

Axes

This site is set in Mona Sans, a single font file that can change both its width and its weight. Move across the box or drag the sliders to see both change, and click the word to type your own.

Made
March 2026
With
A variable font, CSS, under 40 lines of JavaScript
Belleau

04

Palette

Pick one brand colour and get the eleven shades a design system needs, from near-white to near-black. Each shows whether white or black text on it passes the WCAG 2 accessibility guidelines, and the set copies as CSS.

Made
February 2026
With
OKLCH colour maths, the WCAG 2 formula, under 90 lines of JavaScript
  1. 50 Your colourYours Aa Aa
  2. 100 Your colourYours Aa Aa
  3. 200 Your colourYours Aa Aa
  4. 300 Your colourYours Aa Aa
  5. 400 Your colourYours Aa Aa
  6. 500 Your colourYours Aa Aa
  7. 600 Your colourYours Aa Aa
  8. 700 Your colourYours Aa Aa
  9. 800 Your colourYours Aa Aa
  10. 900 Your colourYours Aa Aa
  11. 950 Your colourYours Aa Aa

05

Contrast

Pick a text colour and a background to see whether the pair has enough contrast to pass the WCAG 2 accessibility guidelines. The ratio updates as you change either colour.

Made
January 2026
With
The WCAG 2 luminance formula, under 50 lines of JavaScript

Can you read this?

Body text at seventeen pixels needs a ratio of at least 4.5 to 1 to pass AA. Large text, from 24 pixels or 19 bold, needs 3 to 1.

9.2 : 1

  • AA body
  • AA large
  • AAA body
  • AAA large