The numbers page
Every number in goodtabs UI has a formula.
-0.0223em
-1.4px per glyph at 64px
-0.0223 + 0.185·e^(-0.1745z)
Hero tracking is -0.022em at 64px.
Inter's dynamic metrics give tracking at any size as a + b·e^(cz). By display sizes the exponential has died away and only a is left, -0.0223em. The value is the font's own maths, and tracking-tight is within 0.003em of it. Every plate on this page is recomputed in your browser: move a control and the result changes, leave it alone and you are looking at the value that ships.
inner = outer - gap
Radii 12, 10, 8. Nothing was invented.
Two rounded shapes stay parallel only if they share a centre, so the inner radius is the outer radius minus the gap. A 2px inset gives 10, a 4px gap gives 8.
8px
12 - 2 = 10, 12 - 4 = 8
result = α·fg + (1 - α)·bg
Border #ffffff14. One token, the right grey on every surface.
The hairline is white at 7.8 percent, composited over whatever sits under it: #1b1c1d on the page, #232425 on a card. An opaque grey would be right on one surface and wrong on the rest.
Page
#08090a
#1b1c1d
Card
#101112
#232425
Popover
#161718
#28292a
Muted
#1c1c1f
#2e2e31
Accent
#232326
#343437
#ffffff14
#1b1c1d on the page, #232425 on a card
L = 0.139, 0.177, 0.204, 0.228, 0.257
Surfaces #08090a to #232326.
Measured in OKLCH, each surface sits 0.024 to 0.038 lightness above the last. That is the smallest step that reads as a new surface on near black. Try a smaller one.
Shipped, OKLCH lightness
0.139
0.177
0.204
0.228
0.257
Your step
0.139
0.169
0.199
0.229
0.259
0.139 to 0.257
+0.024 to +0.038 a step
(L1 + 0.05) / (L2 + 0.05)
Brand #5e6ad2 on dark. 4.24:1.
It fails 4.5 for text and passes 3 for marks. So brand indigo is the New dot, the saved bookmark and the focus ring, and never a sentence. The marks-only rule is a number.
4.24:1
Text 4.5: fails. Marks 3: passes.
(L1 + 0.05) / (L2 + 0.05)
Link #828fff on dark. 6.95:1.
Links are text, so they need the floor that brand misses. That is why they are a lighter indigo than brand. Walk from one to the other and watch the ratio cross 4.5.
Text clears 4.5:1 at 13 percent of the way.
6.95:1
#828fff on #08090a
dx = d·cos 90deg = 0
Every shadow is 0 y blur. One light, from the top.
A light straight above the page has no sideways component, so no shadow on the site has an x offset. Move the light and the card stops belonging to the same page as everything else.
0px 7px 32px
dx = 7·cos 90deg = 0px
floor((W - 297) / 250)
Resource grid minmax(250px, 1fr).
Take the 297px of sidebar, gutters and border off the viewport and divide by the cell. 2 columns at 1024, 3 at 1280, 4 at 1536. The cells below are a real auto-fill grid, so the browser gets a vote too.
3 columns
2 at 1024, 3 at 1280, 4 at 1536
The same numbers, on the live component. 11 component pages carry a blueprint: press the ruler and every label is read from the rendered element.