Foundations
Two stacks, and a short list of rules.
Type in these products does two jobs: it names things, and it presents numbers people are going to compare. Both are worse when the type is trying to be interesting, so the model is deliberately small.
The two-stack model
A display face carries headings and figures; a body face carries everything that is read rather than scanned. The split is functional, not decorative — the display face is set tight and balanced because a heading is an object to be composed, and the body face is set loose and ragged because a paragraph is a column to be read.
Runway to March
Tight tracking, balanced wrapping, weight 700. Used for headings and for any figure that is the answer to the question a view asks.
Every recurring item is projected forward from the day it last occurred, so the forecast reflects what is scheduled rather than what was typed.
Normal tracking, generous leading, weights 400 and 500 only.
The label rule
Secondary labels — the words above a figure, the head of a column, the name of a section in a rail — all take one treatment: small, medium weight, widely tracked, uppercase, in a muted colour. One treatment, used everywhere, so a label never has to compete with the thing it labels.
Uppercase at that size is doing real work. It makes a label legible as a category at a glance without needing the size or weight that would make it read as a heading.
Projected balance
$4,182
on 14 March
The label recedes; the figure is unmistakably the content.
Projected balance
$4,182
on 14 March
A label set as a heading competes with its own value, and the eye has to decide which one to read first.
Money is always tabular
Proportional numerals are set to look good in a sentence, which means each digit takes the width it needs. In a column of currency that is a defect: the decimal points wander, and comparing two figures stops being a glance and becomes a task.
Every monetary value, every measured ratio, every duration in these products and on this site is set with tabular numerals. It is a one-line rule that costs nothing and is immediately visible when it is missing.
The decimals no longer line up, so the column cannot be scanned.
Measure and shell
Reading columns are capped by character count rather than pixels, because the thing that makes a paragraph hard to read is how far the eye travels between lines, not how wide the window is. Body copy sits around 62 to 68 characters.
The application shell is a persistent rail beside a bounded content column. It is token-driven like everything else — the rail's width and the content's maximum are values in the package, not numbers in a stylesheet.
- --content-max
72rem - --content-max-narrow
52rem - --sidebar-width
16rem - Mobile is the floor, not an adaptation. Every surface is designed to work at 375px first; the rail becomes a strip rather than collapsing behind a menu.