Industry
Fintech / Payments
Client
PayPal
Confidentiality
NDA (details limited)
Rebuilt PayPal's consumer app design system so AI tools could actually use it.
The Problem
PayPal's design system worked for humans, but AI tools saw naming collisions, undocumented intent, and tokens that described colors instead of meaning. As AI entered the workflow, the system became a liability.
The Pattern
A three-tier token system
An illustrative example of the primitive → semantic → component pattern used to rebuild the system. (Actual token names are confidential.)
Primitive
blue.60
gray.10
gray.90
Semantic
color-background-brand
from blue.60
color-text-primary
from gray.90
color-border-subtle
from gray.10
Component
button-background-primary
from color-background-brand
card-border-default
from color-border-subtle
The Anatomy
How one component maps to tokens
Continue
01 Container
radius.md (8px), fill: button-background-primary
02 Label
type.label.md, color: color-text-on-brand
03 States
hover, pressed, and disabled all map to their own background token
04 Spacing
space.400 horizontal, space.200 vertical
