stripe.com vs webflow.com

Two design systems side by side, measured from the live sites — colour, type, shape, depth, components, states and responsive behaviour.

stripe.com

stripe.com· read 2026-08-09

webflow.com

webflow.com· read 2026-08-09

Worth knowing

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.

stripe.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.

webflow.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.

stripe.com

No named roles measured.

14 more, no measured role

webflow.com

No named roles measured.

2 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.

stripe.com

48px · 300 · shown smaller

32px · 700

32px · 300

26px · 500

26px · 300

18px · 500

list-item

16px · 300

webflow.com

32px · 700

Corners

Drawn at the measured radii.

stripe.com

4px

8px

6px

17px

5px

2px

webflow.com

No radii measured.

Spacing

One shared scale across both sides, so the bars are directly comparable.

stripe.com

4

8

12

16

20

24

32

36

webflow.com

No spacing measured.

Depth

Shadows cast on each side's own ground.

stripe.com

webflow.com

No shadows measured.

Buttons

Rendered from the measured computed styles.

stripe.com

default

webflow.com

No buttons measured.

The measured values behind the panels above.

stripe.comwebflow.com

At a glance

CornersRounded—

Display size48px32px

Spacing base4px—

Accent colours90

Type families11

Components40

Full palette

Every colour each extraction kept, including the ones with no measured role.

All colours#533AFD#425466#0A2540#3C4F69#061B31#0073E6#64748D#0000EE#000000#FFFFFF#F6F9FC#E5EDF5#F8FAFD#15BE53#000000#808080

SemanticSuccess #15BE53—

Typography

Familiessohne-varTimes New Roman

h132px · 700 · normal · sohne-var32px · 700 · normal · Times New Roman

h226px · 500 · 36px · sohne-var—

h326px · 300 · 29.12px · sohne-var—

list-item16px · 300 · normal · sohne-var—

h416px · 400 · 22.4px · sohne-var—

button14px · 400 · 14px · sohne-var—

body14px · 300 · 19.6px · sohne-var—

Shape and rhythm

Radius2px4px5px6px8px16.5px—

Spacing4px8px12px16px20px24px32px36px40px48px72px164px—

Border widths1px1px

Depth

Strategy——

Shadowsrgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30pxrgba(0, 0, 0, 0.1) 0px 18px 36px -18px, rgba(50, 50, 93, 0.25) 0px 30px 45px -30pxrgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8pxrgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px—

Gradients——

Opacity0.150.500.200.850.100.40—

Z-indexbase 1base 2base 3dropdown 99sticky 100sticky 999toast 999999—

Components

Shared——

Only herebuttoncardnavigationlink—

Signature——

How this was measured

Differences here are ours, not the brands'.

Pages read6—

Extracted2026-08-092026-08-09

Stylesheets——

Roles unassigned——

Measured by DesignMD from the live sites. Compare two others. Generate a DESIGN.md for your own site.