Measurements
Every number here was measured, not written. tools/measure.html renders
the primitives with the same class strings the components use;
tools/measure.mjs drives headless Chrome over CDP and reads
getBoundingClientRect and getComputedStyle for 89 elements ×
6 modes (light and dark × the three brands);
tools/measurements-to-md.mjs renders this file. Re-run the three and this
file regenerates — do not edit it by hand.
Raw data: tools/measurements.json.
Geometry is identical in every mode
Checked: box, font, size, line-height, tracking, weight, radius, padding and gap are the same in all 6 modes. Only colour changes between themes and brands — which is the system's central claim, measured rather than asserted.
Buttons
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
button/default/default | 1392 × 36 | Inter 500 | 14 / 20 | 6 | 8 16 8 16 | 8 | — |
button/quiet/default | 1392 × 36 | Inter 500 | 14 / 20 | 6 | 8 16 8 16 | 8 | #E8E4DE 1 |
button/ghost/default | 1392 × 36 | Inter 500 | 14 / 20 | 6 | 8 16 8 16 | 8 | — |
button/destructive/default | 1392 × 36 | Inter 500 | 14 / 20 | 6 | 8 16 8 16 | 8 | — |
button/default/sm | 1392 × 32 | Inter 500 | 14 / 20 | 6 | 0 12 0 12 | 4 | — |
button/default/xs | 1392 × 24 | Inter 500 | 12 / 16 | 6 | 0 8 0 8 | 4 | — |
button/default/lg | 1392 × 40 | Inter 500 | 14 / 20 | 6 | 0 24 0 24 | 8 | — |
button/icon/icon | 40 × 40 | Inter 400 | 16 / 24 | 6 | 0 0 0 0 | — | — |
button/icon/icon-sm | 36 × 36 | Inter 400 | 16 / 24 | 6 | 0 0 0 0 | — | #E8E4DE 1 |
button/icon/icon-xs | 32 × 32 | Inter 400 | 16 / 24 | 6 | 0 0 0 0 | — | #E8E4DE 1 |
Height ladder: xs 24 · sm 32 · default 36 · lg 40 px. Icon-only:
icon-xs 32 · icon-sm 36 · icon 40 px square, each with an invisible
44 px pointer target.
Form controls
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
input/default | 1392 × 36 | Inter 400 | 14 / 20 | 6 | 4 12 4 12 | — | #DDD7CE 1 |
select/trigger/default | 77.89 × 36 | Inter 400 | 14 / 20 | 6 | 8 12 8 12 | 8 | #DDD7CE 1 |
select/trigger/sm | 77.89 × 32 | Inter 400 | 14 / 20 | 6 | 8 12 8 12 | 8 | #DDD7CE 1 |
switch/default | 32 × 18.39 | Inter 400 | 16 / 24 | full | 0 0 0 0 | — | #DDD7CE 1 |
switch/thumb | 16 × 16 | Inter 400 | 16 / 24 | full | 0 0 0 0 | — | — |
switch/sm | 24 × 14 | Inter 400 | 16 / 24 | full | 0 0 0 0 | — | #DDD7CE 1 |
badge/default | 53.13 × 22 | Inter 500 | 12 / 16 | full | 2 8 2 8 | 4 | transparent |
badge/ghost-mono | 85.53 × 22.5 | JetBrains Mono 600 | 11 / 16.5 · 0.88 | 8 | 2 8 2 8 | 4 | transparent |
Surfaces
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
card | 1392 × 74 | Inter 400 | 16 / 24 | 8 | 24 0 24 0 | 24 | #E8E4DE 1 |
card/content | 1390 × 24 | Inter 400 | 16 / 24 | 0 | 0 24 0 24 | — | — |
panel | 1392 × 26 | Inter 400 | 16 / 24 | 8 | 0 0 0 0 | — | #E8E4DE 1 |
empty-state | 1392 × 177.5 | Inter 400 | 16 / 24 | 8 | 0 0 0 0 | — | #DDD7CE 1 |
empty-state/medallion | 40 × 40 | Inter 400 | 16 / 24 | full | 0 0 0 0 | — | — |
empty-state/title | 78.05 × 20 | Inter 600 | 14 / 20 · -0.35 | 0 | 0 0 0 0 | — | — |
empty-state/body | 61.13 × 19.5 | Inter 400 | 12 / 19.5 | 0 | 0 0 0 0 | — | — |
alert/warning | 1392 × 46 | Inter 400 | 14 / 20 | 8 | 12 16 12 16 | 12 | #E8E4DE 1 |
stat-tile | 1392 × 131.34 | Inter 400 | 16 / 24 | 8 | 20 0 20 0 | 0 | #E8E4DE 1 |
stat-tile/label | 1350 × 16.5 | JetBrains Mono 600 | 11 / 16.5 · 0.88 | 0 | 0 0 0 0 | — | — |
stat-tile/value | 1350 × 34 | DM Sans 800 | 34 / 34 | 0 | 0 0 0 0 | — | — |
stat-tile/suffix | 15.31 × 18 | DM Sans 700 | 15.3 / 15.3 | 0 | 0 0 0 0 | — | — |
stat-tile/sub | 1350 × 18.84 | Inter 400 | 13 / 18.85 | 0 | 0 0 0 0 | — | — |
Table
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
table/header-row | 1390 × 40 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
table/head | 815.75 × 40 | JetBrains Mono 600 | 11 / 14.3 · 0.88 | 0 | 0 20 0 20 | — | — |
table/head-number | 574.25 × 40 | JetBrains Mono 600 | 11 / 14.3 · 0.88 | 0 | 0 20 0 20 | — | — |
table/row | 1390 × 44 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
table/cell | 815.75 × 44 | Inter 400 | 14 / 20 | 0 | 0 20 0 20 | — | — |
table/cell-number | 574.25 × 44 | JetBrains Mono 400 | 14 / 20 | 0 | 0 20 0 20 | — | — |
table/row-zebra | 1390 × 44 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
table/row-hover | 1390 × 44 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
table/row-selected | 1390 × 44 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
table/row-compact | 1390 × 36 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
Row heights: header 40 px, body 44 px, compact 36 px (the values
viewportMetrics uses to compute a standard table height). Horizontal padding
is 20 px on every cell, header included.
Shell
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
shell/wrapper | 1392 × 306 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | — | — |
shell/rail-expanded | 224 × 306 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | — | — |
shell/rail-header | 224 × 57 | Inter 400 | 16 / 24 | 0 | 0 12 0 12 | — | — |
shell/group-label | 224 × 32 | JetBrains Mono 600 | 11 / 16.5 · 0.88 | 6 | 0 8 0 8 | — | — |
shell/row | 224 × 32 | Inter 400 | 14 / 20 | 6 | 8 8 8 8 | 8 | — |
shell/row-active | 224 × 32 | Inter 500 | 14 / 20 | 6 | 8 8 8 8 | 8 | — |
shell/row-lg | 224 × 48 | Inter 400 | 14 / 20 | 6 | 8 8 8 8 | 8 | — |
shell/switcher-chip | 32 × 32 | Inter 400 | 16 / 24 | 10 | 0 0 0 0 | — | — |
shell/rail-collapsed | 56 × 306 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | — | — |
shell/header | 1112 × 56 | Inter 400 | 16 / 24 | 0 | 0 24 0 16 | 12 | — |
shell/site-header | 1112 × 56 | Inter 400 | 16 / 24 | 0 | 0 24 0 24 | — | — |
screen | 1112 × 194 | Inter 400 | 16 / 24 | 0 | 24 24 80 24 | 40 | — |
Rail 224 px expanded, 56 px collapsed (a 40 px icon rail plus its 16 px inset). Both headers 56 px, so their rules meet across the fold.
Hub tiles
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
hub/tile | 1392 × 99.13 | Inter 400 | 16 / 24 | 16 | 24 24 24 24 | 12 | #E8E4DE 1 |
hub/tile-label | 1342 × 16.5 | JetBrains Mono 600 | 11 / 16.5 · 0.88 | 0 | 0 0 0 0 | — | — |
hub/tile-blurb | 433.67 × 20.63 | Inter 400 | 15 / 20.63 | 0 | 0 0 0 0 | — | — |
hub/tile-exit | 1392 × 58 | Inter 400 | 16 / 24 | 16 | 16 16 16 16 | 8 | #E8E4DE 1 |
Overlays
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
dialog/content | 512 × 74 | Inter 400 | 16 / 24 | 8 | 24 24 24 24 | 16 | #E8E4DE 1 |
sheet/content | 384 × 120 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 16 | — |
popover/content | 200 × 34 | Inter 400 | 16 / 24 | 6 | 4 4 4 4 | — | #E8E4DE 1 |
menu/item | 1392 × 32 | Inter 400 | 14 / 20 | 4 | 6 8 6 8 | 8 | — |
tabs/list-line | 83.94 × 36 | Inter 400 | 16 / 24 | 0 | 4 4 4 4 | 4 | — |
tabs/trigger | 75.94 × 28 | Inter 500 | 14 / 20 | 6 | 4 8 4 8 | 6 | — |
tabs/list-default | 83.92 × 36 | Inter 400 | 16 / 24 | 6 | 4 4 4 4 | — | — |
status-dot | 8 × 8 | Inter 400 | 16 / 24 | full | 0 0 0 0 | — | — |
Dialog 512 px wide at sm and up (max-w-lg), 24 px padding, modal
elevation. Sheet 75% wide, capped at 384 px from the side. Both use the popover
surface, never the page surface.
Prose
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
prose/h2 | 1392 × 32.5 | Inter 600 | 26 / 32.5 | 0 | 0 0 0 0 | — | — |
prose/p | 633.83 × 24 | Inter 400 | 15 / 24 | 0 | 0 0 0 0 | — | — |
prose/link | 37.36 × 18 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | — | — |
prose/code-inline | 65.19 × 21 | JetBrains Mono 400 | 14.72 / 22.08 | 10 | 2 6 2 6 | — | — |
prose/pre | 1392 × 55.13 | JetBrains Mono 400 | 13 / 21.13 | 16 | 16 16 16 16 | — | #E8E4DE 1 |
prose/quote | 633.83 × 64 | Inter 400 | 15 / 24 | 0 | 20 24 20 24 | — | — |
The reading measure is 76 characters; a paragraph at text-body is capped
there in every content surface.
Type tiers
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
type/display | 1064 × 26 | DM Sans 800 | 26 / 26 · -0.65 | 0 | 0 0 0 0 | — | — |
type/body | 633.83 × 24 | Inter 400 | 15 / 24 | 0 | 0 0 0 0 | — | — |
type/section | 1392 × 22.09 | Inter 600 | 17 / 22.1 · -0.17 | 0 | 0 0 0 0 | — | — |
type/caption | 1392 × 18.84 | Inter 400 | 13 / 18.85 | 0 | 0 0 0 0 | — | — |
type/data | 1392 × 18.19 | JetBrains Mono 400 | 14 / 18.2 | 0 | 0 0 0 0 | — | — |
type/eyebrow | 1392 × 16.5 | JetBrains Mono 600 | 11 / 16.5 · 0.88 | 0 | 0 0 0 0 | — | — |
type/stat | 1392 × 34 | DM Sans 800 | 34 / 34 · -1.02 | 0 | 0 0 0 0 | — | — |
type/accent-ink | 1392 × 24 | Inter 400 | 15 / 24 | 0 | 0 0 0 0 | — | — |
Colour — light
| Element | Text | Background | Border | Shadow |
|---|---|---|---|---|
button/default/default | #FFFFFF | #10B981 | — | — |
button/quiet/default | #1C1C1E | #F5F3EF | #E8E4DE 1 | — |
button/destructive/default | #FFFFFF | #A4231C | — | — |
input/default | #1C1C1E | rgba(0, 0, 0, 0) | #DDD7CE 1 | — |
badge/default | #FFFFFF | #10B981 | transparent | — |
card | #1C1C1E | #F5F3EF | #E8E4DE 1 | yes |
table/header-row | #FAF8F5 | #18181B | — | — |
table/row | #1C1C1E | #F5F3EF | — | — |
table/row-zebra | #1C1C1E | #F1EEE8 | — | — |
table/row-hover | #1C1C1E | #DAECE2 | — | — |
table/row-selected | #1C1C1E | #DED8CE | — | yes |
shell/rail-expanded | #1C1C1E | #F1EEE8 | — | — |
shell/row-active | #1C1C1E | rgba(16, 185, 129, 0.12) | — | — |
shell/switcher-chip | #036B4E | rgba(16, 185, 129, 0.12) | — | — |
type/accent-ink | #036B4E | rgba(0, 0, 0, 0) | — | — |
alert/warning | #8A5A00 | oklab(0.507811 0.0310621 0.103448 / 0.1) | #E8E4DE 1 | — |
Colour — dark
| Element | Text | Background | Border | Shadow |
|---|---|---|---|---|
button/default/default | #FFFFFF | #10B981 | — | — |
button/quiet/default | #F5F3EF | #2C2C2E | rgba(255, 255, 255, 0.08) 1 | — |
button/destructive/default | #FFFFFF | #FF5F57 | — | — |
input/default | #F5F3EF | rgba(0, 0, 0, 0) | #48484A 1 | — |
badge/default | #FFFFFF | #10B981 | transparent | — |
card | #F5F3EF | #2C2C2E | rgba(255, 255, 255, 0.08) 1 | yes |
table/header-row | #F5F3EF | #0F0F11 | — | — |
table/row | #F5F3EF | #2C2C2E | — | — |
table/row-zebra | #F5F3EF | #29292B | — | — |
table/row-hover | #F5F3EF | #293D38 | — | — |
table/row-selected | #F5F3EF | #434346 | — | yes |
shell/rail-expanded | #F5F3EF | #0F0F11 | — | — |
shell/row-active | #F5F3EF | rgba(16, 185, 129, 0.12) | — | — |
shell/switcher-chip | #34D399 | rgba(16, 185, 129, 0.12) | — | — |
type/accent-ink | #34D399 | rgba(0, 0, 0, 0) | — | — |
alert/warning | #FEBC2E | oklab(0.834784 0.0255042 0.15919 / 0.1) | rgba(255, 255, 255, 0.08) 1 | — |
What the brand actually changes
| Element | iq (light) | rei (light) | roof (light) |
|---|---|---|---|
button/default/default | #10B981 / #FFFFFF | #0495FE / #FFFFFF | #FF6723 / #FFFFFF |
shell/switcher-chip | rgba(16, 185, 129, 0.12) / #036B4E | rgba(4, 149, 254, 0.12) / #036EBC | rgba(255, 103, 35, 0.12) / #B84A19 |
type/accent-ink | rgba(0, 0, 0, 0) / #036B4E | rgba(0, 0, 0, 0) / #036EBC | rgba(0, 0, 0, 0) / #B84A19 |
shell/row-active | rgba(16, 185, 129, 0.12) / #1C1C1E | rgba(4, 149, 254, 0.12) / #1C1C1E | rgba(255, 103, 35, 0.12) / #1C1C1E |
Background / text. Everything else on those elements — every pixel of geometry — is byte-identical across the three brands.
Everything else measured
| Element | Box (w × h) | Font | Size / line-height | Radius | Padding (t r b l) | Gap | Border |
|---|---|---|---|---|---|---|---|
table | 1390 × 252 | Inter 400 | 14 / 20 | 0 | 0 0 0 0 | — | — |
dash/screen-scroll | 1392 × 260.5 | Inter 400 | 16 / 24 | 0 | 24 24 80 24 | 40 | — |
dash/section | 1344 × 156.5 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 16 | — |
dash/tile-grid-wide | 1344 × 66 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 16 | — |
dash/tile | 210.66 × 66 | Inter 400 | 16 / 24 | 8 | 20 0 20 0 | 0 | #E8E4DE 1 |
dash/tile-grid-kpi | 1344 × 42 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 16 | — |
dash/screen-fill | 1392 × 320 | Inter 400 | 16 / 24 | 0 | 24 24 24 24 | 24 | — |
dash/table-section | 1344 × 272 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 12 | — |
dash/toolbar | 1344 × 18.84 | Inter 400 | 16 / 24 | 0 | 0 0 0 0 | 8 | — |
dash/panel | 1344 × 241.16 | Inter 400 | 16 / 24 | 8 | 0 0 0 0 | — | #E8E4DE 1 |
Tokens, resolved
| Token | light / iq | dark / iq | light / rei | light / roof |
|---|---|---|---|---|
--background | #FAF8F5 | #18181B | #FAF8F5 | #FAF8F5 |
--foreground | #1C1C1E | #F5F3EF | #1C1C1E | #1C1C1E |
--card | #F5F3EF | #2C2C2E | #F5F3EF | #F5F3EF |
--card-foreground | #1C1C1E | #F5F3EF | #1C1C1E | #1C1C1E |
--muted | #f1eee8 | #3A3A3C | #f1eee8 | #f1eee8 |
--muted-foreground | #636366 | rgba(255, 255, 255, 0.60) | #636366 | #636366 |
--border | #E8E4DE | rgba(255, 255, 255, 0.08) | #E8E4DE | #E8E4DE |
--border-strong | #DDD7CE | #48484A | #DDD7CE | #DDD7CE |
--input | #DDD7CE | #48484A | #DDD7CE | #DDD7CE |
--ring | #10B981 | #10B981 | #0495FE | #FF6723 |
--primary | #10B981 | #10B981 | #0495FE | #FF6723 |
--primary-foreground | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF |
--accent | rgba(16, 185, 129, 0.12) | rgba(16, 185, 129, 0.12) | rgba(4, 149, 254, 0.12) | rgba(255, 103, 35, 0.12) |
--accent-ink | #036B4E | #34D399 | #036EBC | #B84A19 |
--brand-accent | #10B981 | #10B981 | #0495FE | #FF6723 |
--brand-accent-text | #059669 | #34D399 | #0495FE | #FF6723 |
--destructive | #a4231c | #FF5F57 | #a4231c | #a4231c |
--positive | #036b4e | #34D399 | #036b4e | #036b4e |
--caution | #8a5a00 | #FEBC2E | #8a5a00 | #8a5a00 |
--row | #F5F3EF | #2C2C2E | #F5F3EF | #F5F3EF |
--row-alt | #f1eee8 | #29292b | #f1eee8 | #f1eee8 |
--row-hover | #daece2 | #293d38 | #daece2 | #daece2 |
--row-selected | #ded8ce | #434346 | #ded8ce | #ded8ce |
--row-header | #18181B | #0F0F11 | #18181B | #18181B |
--row-header-foreground | #FAF8F5 | #F5F3EF | #FAF8F5 | #FAF8F5 |
--sidebar | #f1eee8 | #0F0F11 | #f1eee8 | #f1eee8 |
--sidebar-accent | rgba(16, 185, 129, 0.12) | rgba(16, 185, 129, 0.12) | rgba(4, 149, 254, 0.12) | rgba(255, 103, 35, 0.12) |
--sidebar-border | #DDD7CE | #48484A | #DDD7CE | #DDD7CE |
--radius-card | 16px | 16px | 16px | 16px |
--radius-button | 12px | 12px | 12px | 12px |
--radius-input | 10px | 10px | 10px | 10px |
--radius-badge | 8px | 8px | 8px | 8px |
--shadow-card | 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04) | 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04) | 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04) | 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04) |
--shadow-card-hover | 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06) | 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06) | 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06) | 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06) |
--shadow-modal | 0 24px 80px rgba(0, 0, 0, 0.18) | 0 24px 80px rgba(0, 0, 0, 0.18) | 0 24px 80px rgba(0, 0, 0, 0.18) | 0 24px 80px rgba(0, 0, 0, 0.18) |