Values Over Color

"The number is the fact. The color is an opinion. Lead with the fact."

Red and green are not neutral

Open a typical brokerage app and the first thing your eye catches is color: a wall of red, a splash of green. That's not an accident of design — color is the fastest emotional channel a screen has, and leading with it means leading with a feeling before a fact. A big red number says bad, react before your brain has read what it even is. Keep inverts the hierarchy on purpose: values, dates, sources, and staleness come first; color is a quiet, secondary accent. You read what the thing is before you feel how it's doing.

Provenance is part of the number

A price by itself is half a fact. Keep treats every quote as an observation that carries its own paperwork: the market date it's for, the time it was fetched, the source that provided it, and how stale it now is. That metadata isn't fine print — it's shown alongside the value because a number without provenance invites you to trust it more than you should. "$X, from source Y, as of date Z, 4 hours old" is a calm, complete fact. "$X" in flashing green is a nudge.

Display hierarchy is an ethical choice, not just aesthetics. Whatever you render biggest and brightest is what you're telling the user to feel first. Lead with provenance and value, and the user reasons. Lead with red/green urgency, and the user reacts. The CSS is where the ethic gets real.

What this looks like in the resting state

Keep's calm surface — Simple mode, on the Family scope, streaming paused — shows you the durable, well-sourced picture: what you hold, what it was worth at the last completed close, where each number came from, and how fresh it is. There is no ticking, no pulsing, no leaderboard of movers. If you want the live overlay you turn it on deliberately (Track 5), and even then the live tick is measured against a stable baseline rather than screaming a raw delta. The default is a photograph, not a heartbeat monitor.

A quick audit for any data UI: squint at the screen until the text blurs. What's left — the shapes and colors you can still perceive — is what the design is really shouting. If the answer is 'red and green blobs,' the interface is leading with emotion. If it's 'a calm grid of values,' it's leading with fact.

Color still exists — it's just demoted. This isn't a grayscale monk's cell. Red and green are present as a secondary cue for direction; they're simply not the loudest thing on screen and never the first thing you process. Demoted, not deleted — the calm comes from hierarchy, not from removing information.

Code

Provenance rides with the value (illustrative shape)·typescript

// A quote is never a bare number — it carries its paperwork.
type Observation = {
  value: number;        // the price/value itself
  marketDate: string;   // the trading date it applies to
  fetchedAt: string;    // when it was actually retrieved
  source: string;       // which provider gave it
  ageSeconds: number;   // how stale it is right now
};

// The render leads with value + provenance; direction color is a
// muted secondary accent, never the headline.
function render(o: Observation): string {
  return `${o.value}  · ${o.source} · as of ${o.marketDate} · ${fresh(o.ageSeconds)}`;
}

Exercise

Find a dashboard you use and do the squint test: blur your eyes and note what's loudest. Then rewrite its visual hierarchy on paper so the fact leads and the emotional color follows. For one metric, list everything that should travel WITH the number as provenance (source, timestamp, freshness) so it reads as a complete, calm fact instead of a bare figure begging for a reaction.

Hint

If removing all color made the dashboard useless, it was leaning on emotion to carry meaning that the values and labels should have carried themselves. A good data UI is still readable in grayscale — color is an accent on top of an already-complete fact, not the fact itself.

Red and green are not neutral

Provenance is part of the number

What this looks like in the resting state

Code

External links

Exercise

Progress

Comments 0