Gift Genie

A colour budget, not a palette

Most design systems list colours. This one rations them. Cool tones — deep blue, bright blue, turquoise — carry structure, action and state, the colours a user sees constantly. Warm tones, sun and coral, appear only where a gift is delivered, earned or celebrated, and are capped at roughly five per cent of any screen.

The target proportion is written down: sixty per cent neutral surface, twenty-five blues, ten turquoise, five warm. And so is the test — if a screen feels warm, something is being over-celebrated. That turns a subjective argument about tone into something two people can check.

The rule that lost to the product

The brand book was explicit: a selected chip must be turquoise, never bright blue, "which reads as an action". A clean separation between what you can do and what is currently true.

It did not survive contact. Around sixty hand-written chip classes across twenty-two files were already painting selection blue, so the documented rule was false in the product long before anyone noticed. Asked to choose, the client kept blue and the action/state split was retired.

What makes this worth showing is what happened next. Every call-to-action had also gone stadium-shaped, so a selected chip and a primary button now shared both colour and shape. Rather than reinstate a distinction nobody had followed, the system worked out what was actually separating them — a button is 52px tall and owns its line, a chip is 40px and sits in a row of siblings — and wrote that down instead. It also corrected its own earlier claim that font weight was doing the work. It is not: both are semibold, because the type scale left no weight to spend.

A heading that moved three ways

App bar alignment flipped twice. Centred won once, as the iOS-native treatment. Then the screens were put side by side and left won, because the tab pages that draw their own in-body header had been left-aligned the whole time — so a centred bar made the page title jump horizontally as you moved between tabs.

Alignment was only one of three ways the same word moved. The bar was set two points larger than the in-body header, enough to make one word read as a different level of heading depending on which screen drew it, and not enough for anyone to catch in a diff. And the bar's default height put the title seven points lower than a page that drew its own.

The fix derives both values from one line box so they cannot drift apart again, and a test fails the build if a screen sets its own title style. Thirteen screens were doing exactly that.

Accessibility as a bar, not an aspiration

Every decision is judged at 44px, on a phone, in daylight. Tap targets never go below 44. Layouts have to survive text scaled to 1.3×. Colour is never the only signal. Every control carries a semantics label.

The colour rules fall out of contrast rather than taste: warm accents always take ink labels, because white on sun and white on coral both fail. Coral is too light to be readable as text at all, so error copy uses a separate darker token while the coral swatch is left to do fills and borders.