Charts
Information design, about the tools.
Family trees, timelines and measured comparisons of the things a design engineer works with. Each one is interactive, sourced in its footer, and comes with a poster. Colour first, then typography, then the browser and the machine.
Colour and perception
01 · SVG, React, CSS Color 4
The family tree of colour spaces
25 colour spaces from Munsell and CIE XYZ to OKLCH and CSS Color 4 on a timeline in six lanes, the derivations drawn in, live ramps in each space, and the poster to download.
02 · First-principles colour maths
Why HSL lies
Twenty-four hues at one nominal lightness in HSL, CIELCH and OKLCH, with the measured luminance under every swatch. The skyline versus the flat line.
06 · CIE 1931 diagram, per-pixel canvas
The gamuts
Every colour you can see as the CIE horseshoe, with sRGB, Display P3, Adobe RGB and Rec. 2020 as triangles, and a check of what your own screen can show.
10 · 148 names, resolved by your browser
Every named CSS colour, in OKLCH
The named colours placed by what they look like: OKLCH hue round the wheel, chroma outward, lightness as dot size. darkgray is lighter than gray, and the wheel shows why the set is lopsided.
14 · WCAG 2 and APCA, first principles
Contrast, two ways that disagree
The same text and background scored by WCAG 2 and by APCA next to the rendered text, and the full grey ramp on white and on black to show where they part company. Orange on white fails one and is a fine heading in the other.
Typography
04 · Lineage tree, live specimens
The typography genome
Latin type as a family tree from Textura to variable fonts, five lanes, every node shown in a live stand-in font. Serif is one unbroken line from Jenson.
18 · 22 families measured live, canvas API
Why 16px is not 16px
font-size is a box and every family fills it differently. Twenty-two families loaded and measured in your browser: x-height, cap height, ascender, descender and line box as fractions of the em, the size each needs to match a reference, and font-size-adjust switched on live.
24 · Hand-placed names, measured metrics
The anatomy of a letter
Four specimens with their parts named, and their horizontal lines measured from the live font in your browser: x-height, cap height, ascender, descender, and the overshoot that makes a round letter look the same height as a flat one.
03 · Scroll timeline, 65 entries
Six centuries of communication and type
Gutenberg to ChatGPT on one spine, inventions on the left and typefaces on the right, so the two histories read against each other.
The browser and the machine
11 · Waterfall from round trips, six knobs
How a URL becomes a page
DNS, the handshakes, the first byte, the HTML, the CSS, the JavaScript and the paint as one waterfall computed from the round-trip time you pick. On a slow link the waiting dwarfs the work.
07 · Pipeline map, 55 properties
What a CSS property costs
Every common CSS property sorted by what changing it forces: layout, paint or composite. Pick one and the pipeline lights up. Two properties live in the cheap column.
08 · Live demos plus a stepper
The event loop, for interfaces
Why the loading label never shows, why the CSS animation survives a busy page and the JavaScript one freezes, measured with real work. Then the rules underneath, stepped through: 1, 4, 3, 2.
09 · Live measured demo plus curves
Big O, in the keystroke
A filtered list that stops keeping up with your typing, measured per keystroke against the 16 ms and 100 ms budgets, and the one line behind it. Then eight classes to scale, log or linear, with the time each takes at a billion operations a second.
13 · Live DOM, computed paint order
Why z-index: 9999 does nothing
A real dropdown on a real card. Toggle transform, opacity, filter or will-change on the card and the menu vanishes under the next section; the panel shows the stacking-context tree the browser built and the order it painted. Two fixes, one of them the start of the next war.
15 · Selectors Level 4 parser, live ranking
Specificity, three columns
Type any selector and see its specificity as three bars, with :is, :where, :not, :has and nth-child-of handled properly. The rules on one button ranked, and the seven cascade steps that get a say before specificity does.
17 · Seven eras of real CSS, live
Thirty years of CSS layout, the same page each way
One page built seven times: tables, floats, inline-block, flexbox, grid, container queries and subgrid, in the real CSS of each era and rendered by your browser. Drag the width and what each era could not do is visible, not described.
19 · Live counts, Intl.Segmenter
The four lengths of a string
Why "family".length lies: graphemes, code points, UTF-16 units and UTF-8 bytes counted live for anything you type, every grapheme with its code points, and what a 20-character limit written three ways does to a name, a flag and a family.
20 · Measured layout, decoded doubles
Floating point, at the pixel
The seam between tiles at a third of the width, the border that goes fuzzy at half a pixel, the basket that says 0.30000000000000004, and the 64 bits of any number you type. Measured with getBoundingClientRect and decoded with a DataView, live.
21 · Generated bundle, measured in-page
What a byte of JavaScript costs
A bundle of the size you choose is generated, gzipped, parsed, compiled and executed in your browser and timed, then laid next to its download on the network you pick and next to the same bytes as an image. The byte is not the cost; the thread is.
22 · Object graph, nine commands stepped
Your commit is not gone
reset --hard rewrote one 40-byte file and your afternoon appeared to vanish. Step nine commands through the object graph, with unreachable commits left drawn because none of these commands deletes anything, and watch a rebase write new objects while a merge keeps every id.
23 · Top layer, anchor positioning, live support
Getting the menu out of the card
The sequel to z-index 9999: the same dropdown three ways inside a scrolling, transformed card. Absolute and clipped, a popover in the top layer positioned by hand on every scroll, and a popover positioned in CSS with anchor-name, with support detected on your browser.
25 · RFC 9111 freshness, five presets
Why they are still seeing the old version
Five sets of caching headers run against the same six visits, with your deploy in the middle: which visits hit memory without asking, which send a conditional request, which get an empty 304, and which users are still looking at yesterday's build.
05 · Latency flow, four knobs
How a keypress becomes a pixel
Twelve hops between a finger and the glass, drawn to their share of the time. The code you write is two of them; the display is three.
35 · Measured frames, six stages to scale
The 16.7ms frame budget
Input, JavaScript, style, layout, paint and composite laid end to end against the 16.7 ms a 60 Hz frame has and the 8.3 ms a 120 Hz one has, with a live meter that measures your own screen as you add work. A frame that fits at 60 drops every other frame at 120.
Motion and interaction
12 · Live physics, recorded from the screen
Easing versus springs
A CSS transition and a spring moving the same card, both sampled from the screen every frame. Interrupt them mid-flight: the spring keeps its velocity, the transition starts a fresh curve. Stiffness, damping, mass, and the settle time a spring has instead of a duration.
37 · Physical size, card-calibrated
Touch targets, to scale
WCAG 2.2's 24 and 44 CSS pixels, Apple's 44 points and Material's 48 dp drawn at their real size on the screen you pick, next to a fingertip. On an iPhone the WCAG minimum is 4 mm; the finger that lands on it is 8 to 10.
Number and symbol
16 · Planetary hours, stepped live
Seven, and why the week is in that order
Step the hours of the week and the seven-pointed star draws itself: 24 mod 7 = 3 is why the days go Sun, Moon, Mars, Mercury, Jupiter, Venus, Saturn. Then the sevens in columns, from Newton's spectrum to the seven spheres of my MA installation.
Perception and consciousness
26 · Two log axes, ISO 21348 bands
The visible spectrum is a sliver
The electromagnetic spectrum from gamma rays to radio on one axis, with the band your eyes respond to at its true width, about 1.6%. Then the stretch around it, where bees and birds see ultraviolet and pit vipers sense heat, and Eagleman's one ten-trillionth worked out.
27 · Flash-lag demo, one ms axis, your reaction time
How long “now” takes
See the brain's delay in a flash-lag demo, then its timings on one axis with the machine's: a 16.7 ms frame, a 44 ms keypress from the keypress chart, the 80 ms the brain waits before it settles what happened, the 100 ms that feels instant. Then your own reaction time, which carries your machine inside it.
28 · Eleven entries on one axis, a who-can-take-it filter
Tests for a mind
The imitation game, the mirror test, the Chinese room, the Voigt-Kampff test from Do Androids Dream of Electric Sheep?, the tennis scanner, PCI, integrated information and more, placed by the evidence each inspects, from what something says and does to whether anyone is there.
29 · Curcio's own data, a blind-spot card
What your eye actually renders
Cone and rod density across the retina from the spreadsheet behind Curcio's 1990 paper, the optic disc where there is nothing to count, and your own blind spot found by hand: a dot that vanishes, a line that mends, stripes that carry on across a hole.
AI engineering
30 · tiktoken counts of my own codebases
A context window, to scale
Five context windows, 8k to a million tokens, against a page, a short story, a novel, my blog and four of my own codebases, each counted with a real tokeniser. The blog fits in 128k. Lunary would need twelve of the million-token windows.
31 · 28 streamed calls, measured
Where an LLM call spends its time
One streamed model call taken apart: connect, queue, model load, prefill, the first token, then the answer a token at a time, measured on my Mac mini. Replayed twice from the recording, behind a spinner and streamed.
32 · Local embeddings, t-SNE
Lunary's grimoire, mapped by meaning
All 1,958 articles in Lunary's grimoire embedded on my Mac mini and laid out by meaning. Half of it is horoscopes, which form a continent of their own. Obsidian sits with the crystals, and two of its ten nearest neighbours are spells.
33 · Four real tokenisers, every token
How text becomes tokens
The same sentences through the tokenisers of GPT-4, GPT-4o, Llama 3 and Gemma 3, every token a chip. A Japanese character split into three byte tokens, a year cut into 202 and 6, and why strawberry hides its r's.
Short-form video
34 · Real analytics, 900 dots
What 900 videos taught me
Every video from six of my TikTok accounts as a dot, engagement against length and format. Eight seconds or less: 13.6% median engagement on my personal account. Over 45 seconds: 1.3%. Then the confound that makes the lesson smaller than it looks.
36 · Your line, timed six ways
How long text needs on screen
A card shows your line for exactly as long as a rule allows, then takes it away. My video app's quarter-second-a-word rule against silent reading at 238 words a minute and the BBC and Netflix subtitle standards. Two seconds is plenty for six words and not enough for twelve.