stripe.com
Accent #533afd · sohne-var — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.
stripe.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(83, 58, 253) as the high-saturation accent for primary actions. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside sohne-var as the primary typeface. A layered elevation system (10 distinct shadows) building a clear front-to-back hierarchy. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.
Color — roles, semantics & the full census
115 colors measured · click any swatch to copy
2 semantic roles found.
115 colors mined from the live renderexpand
Type — the ladder, in the real face
7 roles · rendered live in the real sohne-var (captured woff2) · lines are editable, click any spec to copy
Spacing & radius, made spatial
9 spacing steps · 7 radii · bars are exact px widths
0px
4px
8px
16px
20px
32px
9999px
Depth — elevation is extracted, not invented
10 box-shadows measured on the live page · click a tile to copy its raw value
Motion — easings, transitions & live keyframes
3 easing curves · 0 keyframes · hover a tile to preview
Transitions only — no @keyframes animation on this page. Motion lives entirely in the easing curves on the left.
Components — the closed vocabulary
18 component families · 111 variants counted on the live DOM
| Component | Variants found |
|---|---|
| buttons | ×10 |
| cards | ×10 |
| badges | ×10 |
| cta Banner | ×10 |
| testimonial | ×10 |
| links | ×10 |
| pricing Card | ×7 |
| heading H3 | ×7 |
| eyebrow Labels | ×7 |
| nav Links | ×6 |
| heading H4 | ×6 |
| status Badge | ×5 |
| heading H2 | ×4 |
| footer Links | ×2 |
| heading H1 | ×2 |
| divider | ×2 |
| product Card | ×2 |
| price Tag | ×1 |
Component style specs (§4)expand
Buttons
Ghost
- Background:
transparent - Text:
#061b31 - Padding: 12px 0px
- Radius: 4px
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline:
rgb(83, 58, 253) solid 2px
Outline
- Background:
transparent - Text:
#533afd{colors.primary-focus} - Padding: 11.5px 20px 12.5px
- Radius: 4px
- Border: 1px solid rgb(255, 255, 255)
- Font: 14px weight 400
- Use: Secondary action with border
- Focus: outline:
rgb(83, 58, 253) solid 2px
Primary Brand
- Background:
#533afd{colors.primary-focus} - Text:
#ffffff{colors.on-primary} - Padding: 15.5px 20px 16.5px
- Radius: 4px
- Font: 14px weight 400
- Use: Primary CTA / brand action
- Focus: outline:
rgb(83, 58, 253) solid 2px
Primary Brand
- Background:
#533afd{colors.primary-focus} - Text:
#ffffff{colors.on-primary} - Padding: 15.5px 24px 16.5px
- Radius: 4px
- Font: 16px weight 400
- Use: Primary CTA / brand action
- Focus: outline:
rgb(83, 58, 253) solid 2px
Subtle
- Background:
rgba(255, 255, 255, 0.65){colors.on-primary} - Text:
#533afd{colors.primary-focus} - Padding: 14.5px 24px 15.5px
- Radius: 4px
- Border: 1px solid rgb(185, 185, 249)
- Font: 16px weight 400
- Use: Quiet action against page bg
- Focus: outline:
rgb(83, 58, 253) solid 2px
Light / Invert
- Background:
#ffffff{colors.on-primary} - Text:
#533afd{colors.primary-focus} - Padding: 15.5px 24px 16.5px
- Radius: 4px
- Font: 16px weight 400
- Use: Bright CTA on dark sections
- Focus: outline:
rgb(83, 58, 253) solid 2px
Pricing Cards
Layout — structure & dimensions
4 layout metrics measured
Responsive — real breakpoints
fluid system — no hard stops
No distinct @media breakpoints captured at the desktop/mobile pass — this layout is fluid, adapting by ratio rather than hard stops.
Do's & Don'ts
21 enforceable rules pulled verbatim from the spec
Agent guide & export
Paste-ready prompt + the real files behind this page