v1.16.0 — a non-colour channel for categorical axes

[aicodebar]

v1.15.0 added three categorical colours and documented a hard ceiling: a fourth drops the worst pair to ΔE ≈ 3.0 under simulated red-green colour blindness. This is the channel that scales past it.

The number that settles the fourth-colour question

It was already inside the tokens. Desaturated, cat-indigo and cat-magenta measure L* 40.7 and 40.6 — the same grey.

No colour scheme survives a black-and-white print. The ceiling was never going to move by adding hues, so adding a fourth would have bought a little separation for sighted users on a screen and nothing at all for anyone else.

The design

KindMark splits one distinction across three channels of decreasing coarseness:

1. Silhouette — 4 values, pre-attentive, pure geometry
2. Glyph — separates kinds inside a silhouette
3. Label — always rendered, cannot be suppressed

Colour is one hue per silhouette and fully redundant. Delete it and nothing is lost. That is the test this design had to pass: it must work in greyscale.

A pleasing coincidence rather than a compromise: three categories plus "no category" is four, and four is exactly what the shape channel holds. The two ceilings coincide instead of fighting.

Measured, not asserted

DSSIM = (1−SSIM)×100 on real Chromium rasters, in greyscale. The floor of ≥30 is calibrated on controls rather than picked: circle↔octagon 13.4, square↔squircle 25.4, eye↔eye-slash 26.3, identical glyph 0.

Silhouettes — worst pair 59.0 at 32px/1.5px.

Rejected	Score	Why
octagon	13.4	reads as a circle
squircle	25.4	reads as a square
pentagon	53.2	above floor but falling fast with size
triangle	59.0	separable, but its inscribed square is 30% of the box — it cannot hold a glyph

Size — silhouette holds 55.2 / 59.0 / 68.4 / 55.5 / 37.8 at 40/32/24/16/12px. Gone at 8px (25.2).

Glyph, worst within-family pair — 55.2 (lg, 15px) / 49.6 (md, 12px) / 34.8 (sm, 9px).

Minimum stroke weight binds on contrast, not separation. On --color-bg a 0.5px cat-indigo outline antialiases to 2.17:1 — under WCAG 1.4.11's 3:1 — and only reaches its nominal 5.87:1 at ≥1.25px. Ships at 1.5px silhouette / 1.4px glyph, held constant in device pixels.

Colour — all four clear AA-as-text on white, --color-bg, surface-2 and their own soft (lowest 5.62:1). Distance to severity, normal / worst protan-deutan: indigo↔success 31.2/27.3, purple↔success 27.6/19.3, magenta↔success 34.1/17.9, accent↔danger 28.4/16.1. No severity token is reachable.

Honest degradation

Across all 105 pairs of the 15 complete marks in greyscale the median is 82.6 — and the worst is 6.7: two kinds in the same family, differing only by glyph.

That is reported rather than buried, because it is what a family is, and it is precisely why the label is not optional. A design that claimed 15 mutually distinguishable marks would be lying.

A prerequisite found on the way

The consuming app's 15 kinds ran on 11 glyphs — four pairs each sharing one (code, document, cloud, link all doing double duty). DSSIM 0, i.e. identical. Three new icons (database, chat, chip) exist so that no two kinds share a glyph.

Where it stops scaling

Four families. No fifth silhouette exists — the rejection table above is the whole search.

Inside a family the glyph is roomy: a greedy max-min over the 36-glyph registry holds every pair above 70.0 out to 17 glyphs. But the real limit is not geometric, it is what has to be learned — four silhouettes, taught by KindLegend. That legend is four rows for fifteen kinds and stays four rows for fifty. A legend that grew with the axis would be the admission that the encoding had failed.

Adoption

Deliberately not adopted in the consuming app in this PR — the release isn't out, and a dependency bump would break work in flight there. The app-side change is documented in place and is mechanical once this is tagged: swap KIND_STYLES + ICONS for one per-kind { shape, icon, category }, render <KindMark> in place of the <Icon> + type-label pair, and add <KindLegend> above the canvas.

The existing ceiling comment there is rewritten rather than deleted, because the ceiling moved rather than vanished — it now says the ceiling is four families, not four colours, and explicitly forbids half-adopting. Recolouring to the categorical tier without the silhouettes would remove the severity collision, still fail the greyscale test, and look finished.

Gates

typecheck ✓ · lint ✓ (0 errors; two v-html warnings matching Icon.vue's existing pattern) · build ✓ incl. verify:externals and verify:dev-warnings · build-storybook ✓ · test:ci ✓ 237 passed

🤖 Generated with Claude Code