agentsure.us vs spotify.com
Two design systems side by side, measured from the live sites — colour, type, shape, depth, components, states and responsive behaviour.
Worth knowing
- One side has no named colour roles, which means it predates role-based extraction. Re-generate it for a like-for-like 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.
agentsure.us
Heading on canvas
Body copy in the measured muted role.
Primary actionspotify.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.
agentsure.us
- canvas
#FFFFFF - ink
#000000 - muted
#1A1A1A - hairline
#E6E6E6 - primary
#005032 - on-primary
#FFFFFF
5 more, no measured role
spotify.com
No named roles measured.
17 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.
agentsure.us
h1
72px · 500 · shown smaller
display
72px · 400 · shown smaller
h2
48px · 500 · shown smaller
display
48px · 400 · shown smaller
h3
28px · 500
heading
24px · 500
heading
22px · 500
spotify.com
h2
24px · 700
h1
16px · 700
span
16px · 400
body
14px · 700
Corners
Drawn at the measured radii.
agentsure.us
6px
pill
0px
0px
8px
spotify.com
6px
pill
50px
500px
4px
2px
Spacing
One shared scale across both sides, so the bars are directly comparable.
agentsure.us
48121620242832spotify.com
48121620242832Depth
Shadows cast on each side's own ground.
agentsure.us
No shadows measured.
spotify.com
No shadows measured.
Buttons
Rendered from the measured computed styles.
agentsure.us
spotify.com
The measured values behind the panels above.
At a glance
Colour roles
#005032—#0000EE—#FFFFFF—#000000—#0D1016—#1A1A1A—#E6E6E6—#FFFFFF—Full palette
Every colour each extraction kept, including the ones with no measured role.
Typography
Shape and rhythm
Depth
Components
Interaction states
Read from each site's own stylesheets. An empty side means they were cross-origin and unreadable.
Responsive
Themes
Measured on the live site, not derived.
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.