Border
Width, and only width. The colour of a border is a colour token, and its corner is a radius token.
The base is 1px and a step is 1px × N, which makes the name the value: --border-2 is 2px, with no arithmetic and nothing to look up. Border, radius and spacing all read as base × N — one rule across three categories rather than three scales to memorise.
Splitting width from colour is what lets one width read differently in each mode without a second scale: var(--border-1) solid var(--color-border-subtle) is a single line that already handles both.
Widths
Six widths on one doubling chain, and one of them does nearly all the work.
| Token | Value | Preview |
|---|---|---|
| --border-0 | … | |
| --border-0-5 | … | |
| --border-1 | … | |
| --border-2 | … | |
| --border-4 | … | |
| --border-8 | … |
The set is deliberately sparse — a doubling chain rather than every integer. The difference between 1px and 2px is obvious; between 7px and 8px it is not. So the steps grow with the values they separate, and the preview column is where you can check that rather than take it on trust.
The floor is the display, not taste. A line can only be drawn in whole device pixels, and a CSS pixel is not a screen pixel — at 2× it is two of them. So --border-1 is exact at every density, one, two or three whole pixels, which is why it carries nearly every rule in this codebase. --border-0-5 lands on exactly one device pixel at 2× and draws the crispest line a retina screen can make; at 1× and 3× there is no half pixel to use, so the browser antialiases and paints the same line fainter.
The ceiling is the technique. Past roughly 8px a border stops being a border and becomes a block of colour — and it is the wrong mechanism for one, because it cannot take its own radius, cannot be positioned, and inflates the box model. That job wants padding and a background, or a pseudo-element.