anthropic.com vs www.brex.com
Two design systems side by side, measured from the live sites — colour, type, shape, depth, components, states and responsive behaviour.
Worth knowing
- Extraction depth differs: 2 pages against 6. The deeper read will usually show more tokens.
- Neither side has named colour roles, so both predate role-based extraction. Re-generating either one fills in the palette comparison.
- Interaction states are missing on at least one side — that site's stylesheets were cross-origin and could not be read.
Ground and ink
Each side painted in its own measured canvas, ink, muted and primary roles.
anthropic.com
No colour roles measured on this side, so there is no ground to paint. The palette below is still real; re-extracting the site fills this in.
www.brex.com
No colour roles measured on this side, so there is no ground to paint. The palette below is still real; re-extracting the site fills this in.
Palette
Named roles first, then every colour measured without one.
anthropic.com
No named roles measured.
16 more, no measured role
www.brex.com
No named roles measured.
20 more, no measured role
Type scale
Set at the measured size, weight, tracking and leading. Brand typefaces are not loaded, so the metrics are real and the letterforms are not.
anthropic.com
h1
104px · 300 · shown smaller
h1
61px · 700 · shown smaller
h2
61px · 400 · shown smaller
h3
24px · 600
body
24px · 400
list-item
20px · 400
link
18px · 600
www.brex.com
h1
72px · 500 · shown smaller
h1
48px · 500 · shown smaller
h2
36px · 500
h2
30px · 500
h4
24px · 500
h2
20px · 500
button
16px · 400
Corners
Drawn at the measured radii.
anthropic.com
8px
8px
0px
www.brex.com
6px
10px
50px
8px
Spacing
One shared scale across both sides, so the bars are directly comparable.
anthropic.com
48121620243248www.brex.com
48121620243240Depth
Shadows cast on each side's own ground.
anthropic.com
sm
www.brex.com
No shadows measured.
Buttons
Rendered from the measured computed styles.
anthropic.com
www.brex.com
The measured values behind the panels above.
At a glance
Full palette
Every colour each extraction kept, including the ones with no measured role.
Typography
Shape and rhythm
Depth
Components
How this was measured
Differences here are ours, not the brands'.
Measured by DesignMD from the live sites. Compare two others. Generate a DESIGN.md for your own site.