● Same page · two real design systems

One HTML page. Two real design systems.

Tokens pulled from OpenDesign's 1,486-system library — real computed styles from Stripe and Linear, not approximations. Toggle the theme and watch the same content change character.

See the difference Token breakdown

What changes between systems

Color

Stripe: white + #533AFD purple, ink #061B31. Linear: near-black #08090A, ink #F7F8F8 — inverted world.

Radii

Stripe rounds to 8px (md). Linear trims to 6px. Small differences, big character shift.

Elevation

Stripe lifts with soft ambient shadows. Linear glows with accent-tinted halos.

Motion

Stripe eases with cubic-bezier(0.25,1,0.5,1). Linear snaps with a tighter curve. Feel changes.

Surfaces

Stripe: solid white cards on #F8FAFD. Linear: translucent rgba(255,255,255,0.02) on void.

Type

Stripe: grotesque display, light weights, wide tracking. Linear: geometric, denser, precise.

1,486design systems
11layers per spec
2shown here
100%real tokens
"AI's default output is the mean of all training data — no brand recognizable. Grounding in one real system protects identity instead of diluting it."
— OpenDesign skill.md, Principle of Real over Remembered