WI-046: A point of view

WI-045 made the values consistent. It did not make them good — the app was still grey-on-white with no identity, which is what “painful to look at” meant.

Two constraints, which turned out to help

The bundle had 48KB of headroom against its tripwire, so there is no icon set and no web font. And the deployed surface is react-native-web, so nothing may rely on a native-only style.

That leaves type, colour, space and shape. It is a narrow brief, and a narrow brief is easier to do well than a wide one.

What changed

Warm, not blue. Every grey was a blue-grey, which reads as software. Board games are warm physical objects, so the neutrals are warm — #2a2521 rather than #1f2933, paper #f7f4ef rather than #f5f7fa.

A card-table green (#2f6b4f) for anything that acts. Before, the primary button was near-black and links were a stock blue; nothing said what the app was about.

Line heights, everywhere. Every previous text style left it to the platform default. Dense text looked cramped and headings looked adrift, and that is the most common reason an interface reads as unfinished rather than merely plain. This is the single biggest change on the screen.

Ten font sizes became five. 11, 12, 13, 14, 15, 16, 17, 22, 24 and 26 collapse onto label / meta / body / title / display. The two that sat between steps — 14 and 16 — were each used a handful of times without earning one.

Cards sit on the page rather than being drawn on it: a faint shadow, a softer radius. Deliberately faint, because a heavy shadow on every card is the other way to look unfinished. Both elevation and the shadow properties are set — the first is Android-only, the second is what react-native-web turns into a box-shadow.

Inputs and unselected chips are recessed, on a sunken tone rather than white-on-white, so a form reads as a form.

Nothing behaves differently

452 tests still pass, unchanged. No copy was edited and no logic was touched, which is the point: if a test had broken, this pass would have changed something it had no business changing.

Definition of done

Warm neutrals and an accent with intent, all from theme.ts.
Every text style has a line height.
Five font sizes, not ten.
Cards, inputs and chips read as distinct surfaces.
A one-off colour or an eleventh font size fails the build.
No behaviour change: the whole suite passes untouched.
Each check proven able to fail.
Gate green.

Verification

pnpm --filter @tabletop/mobile test
pnpm --filter @tabletop/mobile build
pnpm gate

Seeded failures

Seed	Bit
An eleventh font size	✅
A one-off colour	✅
`theme.ts` itself (must stay quiet)	✅ quiet

Spacing is deliberately not enforced: a layout occasionally needs a value between two steps, and being wrong costs a few points of padding. A one-off grey or a tenth font size is never needed, and both are what made this look unfinished.

What this still is not

Honest limits, since “visual design” can mean more than this does:

No imagery. Game covers would transform the catalogue, and the harvest has no image URLs. Wikidata has them (P18) under Commons licensing, which is a separate item with its own attribution obligation.
No custom typography. A typeface is a download, and there were 48KB.
Bottom tabs on desktop web remain a phone convention on a large screen.
No dark mode.