the system · sheet 09 · every value below is generated, none typed
The color system, published
Nine inks, eleven frozen lightness steps, two chroma columns, 99 published values. Every chroma on this page was clamped into sRGB at build, because oklch will accept a chroma that does not exist and the browser then clips it, and clipping moves lightness. Since every contrast figure this studio prints depends on lightness being frozen, the clamp happens once, here, and the surviving value is what ships.
the color bar
Nine inks on one frozen spine. Changing the hue barely moves the contrast, and here is the residual.
The brand book publishes eleven lightness values and leaves hue open. An ink is those same eleven values at a published hue, in two chroma columns: flat for grounds, solid for everything that has to be seen. Every cell below is a token in the stylesheet, and every chroma was clamped into sRGB at build, because clipping moves lightness and this site prints its contrast figures.
the two columns, at step 06
Solid above, flat below. Flat is the safe column: it passes everything and a page built from it looks like restraint. Solid is the default for anything that is not a ground, which is what stops this being a gray site with a pink accent.
measured against paper #F0F2F6 · steps 01 to 06 carry type · at each step, all nine inks measured · worst nine-way spread is step 4, 10.05:1 to 11.31:1, a spread of 1.26 on a base of 10.05:1, which is 12.5% · wcag 2.1 relative luminance, computed from the clamped sRGB values at build, not sampled from a screenshot
pairs, which is where color craft shows
- adjacent interval 1 sea + slate · quiet. surfaces inside one section, where the visitor’s own content is the subject.
- near interval 2 pine + slate · close harmony. two surfaces that belong to each other.
- third interval 3 sea + olive · the working pair. most sheets use this and nothing else.
- wide interval 5 night + ochre · the loud pair. one per sheet at most.
- opposed interval 8 amber + iris · the two inks either side of the accent gap. reserved for out of tolerance.
Nine hues and a dial would prove one skill once. What a sheet declares is a pair and the interval between its two inks, and that interval is printed in the notation, so the relationship is the thing on show rather than the range.
out of tolerance · amber + iris · interval 8, opposed
Here is where our own system runs out.
A tolerance envelope you cannot see the edge of is a claim, not an envelope. So this is the bench: the rules driven past their limits, each result labeled with the rule that produced it. Everything below is generated at build from the same tokens the rest of the site uses, so if we break something it breaks here first.
01 · the accent, tested on every ground in the system
The sign has two published values, #FB006B for dark grounds and #CD016C for light ones. They are not one hue at two lightnesses: measured in oklch they sit 8.38 degrees apart, which is a thing worth saying on the page rather than leaving in the file. Each cell below was measured against whichever of the two the rule assigns to a ground of that lightness, WCAG 2.1 relative luminance, at the 4.5 to 1 threshold for normal text. 24 clear it. 75 do not, and those are the grounds the sign may never be set on.
hatched where the sign fails 4.5 to 1 · 75 of 99 · every measured ratio is listed below, because a number set eight pixels tall inside a colored cell is not published, it is hidden in plain sight
the 75 grounds the sign may not be set on, with their measured ratios
- amber 03 3.9:1 #FB006B
- amber 04 3.08:1 #FB006B
- amber 05 2.3:1 #FB006B
- amber 06 1.61:1 #FB006B
- amber 07 1.11:1 #FB006B
- amber 08 1.83:1 #CD016C
- amber 09 2.63:1 #CD016C
- amber 10 3.7:1 #CD016C
- ochre 03 3.84:1 #FB006B
- ochre 04 3:1 #FB006B
- ochre 05 2.22:1 #FB006B
- ochre 06 1.54:1 #FB006B
- ochre 07 1.06:1 #FB006B
- ochre 08 1.91:1 #CD016C
- ochre 09 2.7:1 #CD016C
- ochre 10 3.74:1 #CD016C
- olive 03 3.79:1 #FB006B
- olive 04 2.95:1 #FB006B
- olive 05 2.16:1 #FB006B
- olive 06 1.49:1 #FB006B
- olive 07 1.02:1 #FB006B
- olive 08 1.99:1 #CD016C
- olive 09 2.8:1 #CD016C
- olive 10 3.82:1 #CD016C
- moss 02 4.47:1 #FB006B
- moss 03 3.71:1 #FB006B
- moss 04 2.86:1 #FB006B
- moss 05 2.07:1 #FB006B
- moss 06 1.42:1 #FB006B
- moss 07 1.03:1 #FB006B
- moss 08 2.07:1 #CD016C
- moss 09 2.88:1 #CD016C
- moss 10 3.89:1 #CD016C
- pine 02 4.48:1 #FB006B
- pine 03 3.73:1 #FB006B
- pine 04 2.88:1 #FB006B
- pine 05 2.09:1 #FB006B
- pine 06 1.44:1 #FB006B
- pine 07 1.02:1 #FB006B
- pine 08 2.07:1 #CD016C
- pine 09 2.92:1 #CD016C
- pine 10 3.92:1 #CD016C
- sea 02 4.5:1 #FB006B
- sea 03 3.76:1 #FB006B
- sea 04 2.91:1 #FB006B
- sea 05 2.12:1 #FB006B
- sea 06 1.46:1 #FB006B
- sea 07 1:1 #FB006B
- sea 08 2.04:1 #CD016C
- sea 09 2.88:1 #CD016C
- sea 10 3.89:1 #CD016C
- slate 03 3.79:1 #FB006B
- slate 04 2.94:1 #FB006B
- slate 05 2.15:1 #FB006B
- slate 06 1.49:1 #FB006B
- slate 07 1.02:1 #FB006B
- slate 08 1.99:1 #CD016C
- slate 09 2.8:1 #CD016C
- slate 10 3.81:1 #CD016C
- night 03 3.94:1 #FB006B
- night 04 3.13:1 #FB006B
- night 05 2.32:1 #FB006B
- night 06 1.61:1 #FB006B
- night 07 1.09:1 #FB006B
- night 08 1.9:1 #CD016C
- night 09 2.72:1 #CD016C
- night 10 3.76:1 #CD016C
- iris 03 4.01:1 #FB006B
- iris 04 3.22:1 #FB006B
- iris 05 2.41:1 #FB006B
- iris 06 1.68:1 #FB006B
- iris 07 1.14:1 #FB006B
- iris 08 1.82:1 #CD016C
- iris 09 2.63:1 #CD016C
- iris 10 3.7:1 #CD016C
02 · a client name that does not fit
57 characters in the masthead row. The type policy sets the size, the measure and the balance, so a name this long wraps and stays flush rather than shrinking to fit or running off the sheet.
Nordwestdeutsche Klassenlotterie Beteiligungsgesellschaft
03 · diacritics in display type
The masthead sits at a tight negative tracking with the cap height trimmed flush to its rule. Marks above the cap line are where that goes wrong, so they are set here at full size rather than discovered later on a client's own name.
Šiauliai · Kęstutis · Ąžuolynas
04 · the register offset, held
Everywhere else on this site the offset is zero at rest, and the hero is the only place it is ever non-zero, for 1,080 milliseconds. Here it is held open so the misfit can be measured rather than admired. A press artifact resolves. One that keeps moving is a lens effect wearing a printer's costume.
out of register
offset 0.060 em · held · measured, not estimated
the four separations of the masthead
The masthead prints in four ink layers that multiply together. Which four is a solve rather than a preference: the build searches every combination of four inks at every step from 05 to 09, multiplies them in sRGB, and keeps the product closest to the darkest neutral in the system. It also has to satisfy a constraint that is easy to miss, because plate 1 is the real text node and plates 2 to 4 are hidden clones: plate 1 must be readable on its own. It measures 8.16 to 1 on paper.
- plate 1 night 269 · step 05 · #2639AE
- plate 2 iris 300 · step 08 · #AC7CF4
- plate 3 amber 46 · step 09 · #FF9968
- plate 4 slate 237 · step 09 · #5BC3FF
- product #090D44 · 0.0132 from the target dark