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. A day that did not move is never the headline.

What each colour means

One job per colour, so colour is never decoration

Roles

Neutrals

Does it drift?

Measured in the browser against the live stylesheet.

Select a swatch to copy its CSS variable. Values and contrast 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: ₹1,00,920/ sovereign
Lede17 on 27, 400: The latest move was −₹640 on Sat 14 Nov.
Finding17 on 25, 600: The biggest move was −₹1,600 on Thu 12 Nov.
Body14 on 22, 400, ink-2: A rate is a step function: the value holds until the next recorded day, then jumps.
Label12 on 16, 500, ink-3: The question a card answers
Number in a sentenceInter, tabular figures: A sovereign of 22K costs ₹1,00,920 today.
Number that stands aloneGeist Mono 500, 14 on 20: ₹1,00,920
Do notMono inside a sentence: A sovereign of 22K costs ₹1,00,920 today, 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 pxThe metal switcher

14 pxTooltips

12 pxList rows and day cells

PillControls and chips

Elevation

Hairline and restCards sit on a border and a faint shadow

PopoverThe metal switcher

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, discs and chart markers only

StepData cursors, scrubbing and keyboard stepping 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

RoseFellGoldSilver −0.6%±0A day that did not move

A rise and a fall also differ by glyph, sign and bar direction, so colour is never the only cue. A day with no change is printed quietly and never leads a card.

What controls look like

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

Today’s rates ⌘K

How a rate is drawn

A rate holds, then jumps, so the line is a step and never a curve, with no fill under it

GoldSilverRoseFellThe day you point at

22K gold per gram. Each marker is a day the rate moved.

What keeps it cohesive

Eleven rules that every page follows

Do

Draw rates as steps, with a marker on every day that moved.
Lead with the last real move. A day that did not move is never the headline.
Keep one finding and one visual per card on a phone.
Give every list row a visible hover response.
Write amounts in full, with Indian grouping: ₹1,00,920.

Do not

Tint a card, row or heading by direction.
Fill under a line whose baseline is not zero.
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 metal switch. Only the data changes.

The same rules, in a file an agent can read.design.md