Tokens, components and rules

Design system

The colours, type, components and rules this site is built from. Every specimen below uses the live stylesheet and current data, so it always matches the site.

What it is built on

Four rules decide almost every choice

The data steps
A rate holds, then jumpsCharts draw steps. The interface eases, a data cursor never does.
Colour
One job eachDirection colour sits on small marks, never on a whole card.
Type
Inter and Geist MonoA number in a sentence stays in Inter. Mono is for numbers that stand alone.
Findings
Answer firstEach card asks a question, states the finding, then shows the evidence.

What each colour means

One job per colour, so colour is never decoration

Roles

Neutrals

Select a swatch to copy its CSS variable. Values follow the theme and palette chosen above.

How type is used

Inter for words and the numbers inside them, Geist Mono for numbers that stand alone

Value76 on 80, 650, −0.05em
5.50%
Lede17 on 27, 400

The RBI raised the policy repo rate by 25 bps to 5.50% on 7 Oct 2026, its first hike since February 2023, after ten months unchanged at 5.25%.

Finding17 on 25, 600

Lower than on 72% of days since 2004

Body14 on 22, 400, ink-2

Policy rates are step functions: the value holds until the next documented record date, then jumps.

Label12 on 16, 500, ink-3

The question a card answers

Number in a sentenceInter, tabular figures

The rate is now 5.50%, up 25 bps on the move before.

Number that stands aloneGeist Mono 500, 14 on 20
5.50%
Do notMono inside a sentence

The rate is now 5.50%, set in mono, which breaks the line of reading.

How surfaces are built

Hairlines and one card radius, with shadow only on things that float

Radius

16 pxCards and tiles
20 pxThe canvas and phone cards
18 pxPalette and prompt
14 pxResults and tooltips
12 pxInputs and list rows
PillControls and chips

Elevation

Hairline and restCards sit on a border and a faint shadow
PopoverPalette, prompt and the decision stamp
TooltipThe inverted chart readout

Cards are separated by 16 px with a 28 px page gutter and 24 px of card padding. Phones use 14, 16 and 18 px.

How things move

The interface eases; the data steps

EaseHover, press and sliding thumbs, 100 to 300 ms
SpringThe brand mark, stamps, flags and markers only
StepData cursors, scrubbing and filters never ease
With reduced motion on, everything jumps to its final state.

How direction is shown

Colour sits on small marks, never on a card

HikeCutHoldFramework change +25

A hike and a cut also differ by glyph, sign and bar direction, so colour is never the only cue.

What controls look like

Pills at one height per kind, with a visible response on every hover

World view ⌘K Decision day
₹

How a rate is drawn

A rate holds, then jumps, so the line is a step and never a curve

4%4.5%5%5.5%6%6.5%20192020202120222023202420252026
HikeCutFramework changeLevel
India, policy repo rate. Each marker is a documented record date.

What keeps it cohesive

Eleven rules that every page follows

Do

  • Draw policy rates as steps, with both endpoints for a range and no midpoint.
  • Keep one finding and one visual per card on a phone.
  • Use real circular flags for countries.
  • Give every list row a visible hover response.
  • Write amounts in full locale format, such as ₹50,00,000.

Do not

  • Tint a card, row or heading by direction.
  • Add status pills such as “verified against”. Provenance is a footnote.
  • Nest a card in a card, or leave a dead area beside a taller neighbour.
  • Use gradients, glows or glass.
  • Use en or em dashes in copy.
  • Flash the page on a country switch. Only the data changes.
The same rules, in a file an agent can read.DESIGN.md
Design