Skip to content

diff-stripe-vs-vercel.md

Latest commit

 

History

History
88 lines (60 loc) · 2.62 KB

diff-stripe-vs-vercel.md

File metadata and controls

88 lines (60 loc) · 2.62 KB

Brand diff: Stripe vs Vercel

Generated by brandmd diff from stripe.md and vercel.md.

Both files are snapshots, not canonical guidelines.

Color palette

Shared (1)

  • #FFFFFF — White (Page background)

Only in Stripe (6)

  • #0D1738 — Dark Blue (Dark background / footer)
  • #533AFD — Dark Blue (Accent background)
  • #00D66F — Cyan (Accent background)
  • #2863B11A — Dark Blue (Accent background)
  • #000000 — Black (Dark background / footer)
  • #64748D — Dark Muted Blue (Secondary text)

Only in Vercel (7)

  • #FAFAFA — White (Page background)
  • #171717 — Black (Dark background / footer)
  • #0070F3 — Dark Blue (Accent background)
  • #4D4D4D — Dark gray (Primary text)
  • #8F8F8F — Dark gray (Secondary text)
  • #EBEBEB — Light gray (Divider / border)
  • #00000014 — Black (Divider / border)

Typography

Stripe Vercel
Primary font sohne-var Geist
Secondary font SourceCodePro geistMonoFont
Heading scale 26px, 32px, 48px, 56px 24px, 32px, 48px
Body scale 14px, 15px, 16px, 18px, 22px 14px, 16px, 20px
Weights 300, 400, 500, 700 400, 500, 600

Spacing & radii

Stripe Vercel
Spacing scale 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px 1px, 2px, 3px, 6px, 8px, 10px, 12px, 48px
Border radii 0px 0px 6px 6px, 4px, 5px, 6px, 6px 6px 0px 0px, 8px, 16px, 100% 2px, 4px, 6px, 100px, 100%, 9999px

Components

Buttons

property Stripe Vercel
Background unspecified rgb(255, 255, 255) ≠
Corner radius 4px 6px ≠
Font 14px, weight 400 14px, weight 500 ≠
Padding 12px 0px 12px 0px 0px 6px 0px 6px ≠
Text color rgb(6, 27, 49) rgb(23, 23, 23) ≠

5 of 5 properties differ between Stripe and Vercel buttons.

Cards

property Stripe Vercel
Corner radius unspecified 2px ≠
Padding 0px 0px 0px 0px unspecified ≠
Shadow unspecified rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px ≠

3 of 3 properties differ between Stripe and Vercel cards.

Synthesis

What to copy

  • Primary fonts diverge (sohne-var vs Geist), typography is the cleanest brand-signature swap.
  • headings font differs: Stripe uses sohne-var, Vercel uses Geist, geistMonoFont.
  • body font differs: Stripe uses sohne-var, Vercel uses Geist.
  • Button radius gap: Stripe uses 4px, Vercel uses 6px. Buttons are where users feel the difference fastest.

What to avoid

no obvious anti-pattern