Design system
Style guide
Clear labels, readable numbers, and plain links come first. Color is never the only way to tell two kinds of numbers apart.
Type and spacing
System fonts make the page quick to load. Headings lead the eye. Body text stays readable at narrow widths and large zoom.
Color tokens
Ink --ink, paper --paper, canvas --canvas, link --link, focus --focus.
Number labels
In the budget
The badge text explains the kind of number.
Adds up exactly
The badge text explains the kind of number.
Government estimate
The badge text explains the kind of number.
Paid so far
The badge text explains the kind of number.
Our estimate
Our own estimate, marked with a dashed border.
Leftover
A leftover amount, marked with dots.
Adjustment
A balancing amount, marked with hatching.
Box and list views
Every linked tile also belongs in a table with full names, exact amounts and column headings.