Draft 3 · the name is settled

flowfin

A design system for eleven clients, whose most important property is not visible: nothing waits, nothing jumps, nothing hangs. Everything else gives way to that: the colour, the type, even how much design there is.

Both rows take effect at once and combine freely. In an app they belong in the settings, brightness above and colour vision below it.

Colour

The content is the only colour

Ground, surfaces and type are neutral. Film posters are colourful, loud and all different from each other; every colour in the interface competes with them and loses. It is also why Apple and Netflix are grey and black at the core.

That leaves one colour, and it has exactly one job: to show what the focus is on. Nowhere else.

Why blue and not something else. Blue is the only hue that stays distinguishable under every common form of colour vision deficiency. Red and green are precisely the pair that most often collapses into one, which is why there is no red "error" and no green "good" here either.

States are told apart by shape and text, and colour only reinforces them. Anyone who cannot see the hue loses no information by it.

ground#121216 / #FAFAFA
raise#1C1C22 / #FFFFFF
raise-2#26262E / #F0F0F2
ink#ECECEF / #0E0E11
ink-2#9C9CA6 / #63636B
ink-3#8C8C9A / #6D6D73
sel, focus only#5B9CFF / #0A6CE8

What the three ink steps mean. Every one of them clears 4.5:1 against ground, raise and raise-2, in both brightness schemes, and that is checked rather than eyeballed. So the scale is an order of attention and not a fade: ink is what is read first, ink-2 is read after the thing it belongs to, ink-3 is a label or a unit or a year. The step from ink-2 to ink-3 is under one and a quarter of contrast ratio at its widest, so a reader will not see ink-3 recede. Text that is genuinely secondary is made so by size, position and wording; there is no ink step that will do it with colour.

Colour vision

Not "colour removed", but the hue this eye sees best

Which hue works well depends on which cone type is missing. There can be no single "accessible" colour for that reason, and taking black or white is the right answer for exactly one case, namely when no colour is perceived at all. For everyone else it is a step backwards: it removes a signal this eye could have read perfectly well.

Hence a choice in the settings rather than a switch. The presets above take effect at once; step through them and look at the focus row further down.

PresetWhat is missingFocus colourWhy this one
Standardnothing#5B9CFF Blue, because even with no preset chosen it still carries under the most common deficiencies.
ProtanopiaL cones · red#46B8E8 Red looks dark and dull. A blue with cyan in it has the highest luminance for this eye.
DeuteranopiaM cones · green#8AA0FF The most common form. Green and red collapse together, blue stays clear, and the violet cast separates it further from grey.
TritanopiaS cones · blue#FF6F7D Here blue would be wrong, because it collapses with green. Red is the hue that is left.
Achromatopsiaall colour#FFFFFF Only here does pure brightness carry, and only here does the ring get thicker: 4 dp instead of 3.

Whichever preset is chosen, the rule stands: no state hangs on the hue alone. The selection also carries size and a ring, and an error carries text. The preset makes it easier to read; it is not the only safeguard.

A free colour picker belongs in the settings alongside these. The five are good starting points, but colour vision deficiency is a spectrum and not a set of drawers: anomalous trichromacy sits between "normal" and the cases above, and only the person concerned knows where.

Type

The system's own, in two worlds of size

No bundled typeface. SF Pro on Apple, Roboto on Android, Segoe on Windows. An embedded font is the first thing an eye notices when it is not looking at a native app, and it costs load time, which is exactly what there is least of to spend here.

Television · from 3 m

display 56/700Continue watching
shelf 32/640Recently added
tile 24/540Journey to Ixtlan
meta 20/4001974 · 2 hr 4 min

Phone · from 35 cm

display 28/700Continue watching
shelf 19/640Recently added
tile 14/540Journey to Ixtlan
meta 12/4001974 · 2 hr 4 min
The tile

Three states, and the third one decides

The Shaft
2019 · 1 hr 34
Northern Light
2021 · 2 hr 06
Cold Coast
loading …
Journey to Ixtlan
Journey to Ixtlan
1974 · no artwork
Half Moon
2017 · 1 hr 52
Summer Guests
2003 · 2 hr 18

Loaded: the image carries it and the text is small

The title sits under the tile, not on it. Text on artwork needs a gradient, and a gradient costs an extra layer to draw.

Loading: a BlurHash instead of a spinner

Jellyfin ships a BlurHash with every image: a tiny gradient that looks like the picture on its way. It is already in the API, it costs nothing, and it is the largest part of the impression that nothing is waiting.

No artwork: a readable substitute, not a grey hole

Netflix curates its imagery; your library has whatever was there at the time. A wall of tiles with three grey holes in it looks worse than a list. The empty tile takes the title as its subject, which makes it look deliberate rather than broken.

Focus

The only place with colour in it

Move with ← →, or click. Switch the colour vision preset above and look at the same focus again.

The selling point, as numbers

A budget, not an intention

"Fast and stable" only becomes a promise once it has a number that can be missed. These five hold for every app and are measured against today's clients before the first line of code, so that "better" means something anybody can check.

WhatTargetWhy this number
Focus change< 80 msKey press to the first moved scanline. Above that the remote feels sluggish.
Dropped frames0 at 60 fpsScrolled across a row of 200 tiles. A single drop is visible.
First picture< 1.2 sApp start to the first usable tile, from a cold start.
Layout shiftsnoneThe tile's size is fixed before the image arrives.
Playback start< 2 sSelection to picture, on direct play over the local network.
Rules

What this system forbids

Colour shows the focus and nothing else

No coloured buttons, no coloured headings, no red for an error and no green for success. States carry shape and text. That is exactly why the focus colour can change with the colour vision setting without risk: it is the only place where it means anything.

No bundled typeface

The system's own, on every platform. An exception needs a reason stronger than "it looks better".

Nothing waits visibly

No spinner in a tile, no layout shift, nothing sliding into place. Whatever is not there yet already has its size.

Missing artwork is a design case

Not an error case. Every view has to still look good with a library that has no images. It is where image-heavy designs otherwise fall over.

No decoration that costs frame rate

No blur over scrolling surfaces, no shadows on moving elements, no gradients over artwork. Where an ornament and a number from the budget come into conflict, the number wins.

Television and phone share no layout

The same colours, type, motion and image handling. Arrangement, density and navigation belong to the platform.