Light interfaceMeasured stripe.com

Stripe

A polished, premium finance tool with a confident purple accent and crisp detail.

This page is styled with Stripe’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F8FAFD
Cards, panels, menus

Text#061B31
Headings and body

Muted text#50617A
Secondary info

Line#E5EDF5
Dividers and outlines

Accent#533AFD
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 17.4:1Muted on background 6.3:1Text on accent 6.2:1

Every colour found on their site

#061B31#50617A#273951#64748D#3C4F69#FFFFFF#E5EDF5#F8FAFD#533AFD#FFE0D1#00D66F

Typography

Headings use sohne-var (company-only; shown here with the free look-alike Inter). Body text uses sohne-var (company-only; shown with Inter).

h1	sohne-var · 48px · 300 · -0.96px	Financial infrastructure to grow your revenue. Accept paymen
h2	sohne-var · 32px · 300 · -0.64px	Flexible solutions for every business model.
h3	sohne-var · 26px · 300 · -0.26px	Accept and optimise payments globally – online and in person
p	sohne-var · 32px · 300 · -0.64px	Grow your business with a comprehensive set of payments and
li	sohne-var · 16px · 400	Products

Corners & shadows

Corner sizes used

6px

4px

5px

pill

3px

16px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Stripe’s live website. Click to enlarge.

Buttons · 2

Stripe button: Sign in — No fill · corners 4px · 40px

Stripe button: Contact sales — #533AFD · corners 4px · 40px

Navigation bar · 1

Stripe Navigation bar: Products — no fill · square · sohne-var 16px

Buttons · 5

Stripe Buttons: Sign in — no fill · corners 4px · sohne-var 14px

Stripe Buttons: Contact sales — fill #533AFD · corners 4px · sohne-var 14px

Stripe Buttons: Request an invite — fill #533AFD · corners 4px · sohne-var 16px

Stripe Buttons: Watch now — fill #FFFFFF · corners 4px · sohne-var 16px

Stripe Buttons: Read the story — no fill · corners 4px · sohne-var 16px

Tags and badges · 2

Stripe Tags and badges: カード番号 — fill #F8FAFD · corners 6px · sohne-var 9px

Stripe Tags and badges: save 25% — fill #ECEDFE · corners 4.51px · sohne-var 11px

Cards and panels · 5

Stripe Cards and panels: Email — fill #FFFFFF · corners 6px · sohne-var 16px

Stripe Cards and panels: Pro Plan — fill #FFFFFF · corners 6px · sohne-var 16px

Stripe Cards and panels: Deluxe Shirt — fill #FFFFFF · corners 6px · sohne-var 16px

Stripe Cards and panels: Jackson Hot Yoga — fill #FFFFFF · corners 10px · sohne-var 16px

Stripe Cards and panels: dashboard.zenflow.com — no fill · corners 6px · sohne-var 16px

Icons

30 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Stripe product screen: 1200 × 650 — 1200 × 650

Stripe product screen: 1600 × 1060 — 1600 × 1060

Stripe product screen: 1430 × 849 — 1430 × 849

Stripe product screen: 1616 × 1346 — 1616 × 1346

Stripe product screen: 1532 × 850 — 1532 × 850

Stripe product screen: 2760 × 1352 — 2760 × 1352

Stripe product screen: 1290 × 605 — 1290 × 605

Stripe product screen: 2546 × 1432 — 2546 × 1432

Stripe product screen: 2810 × 1628 — 2810 × 1628

Stripe product screen: 3318 × 2380 — 3318 × 2380

Do & don’t

What makes it Stripe

Deep indigo-purple accent colour on primary buttons and highlights
Crisp navy text on clean white/pale-blue backgrounds
Subtle soft shadows that give a premium, layered feel

Use the indigo-purple accent only for primary actions and key highlights
Keep backgrounds white or very pale blue for a crisp, trustworthy feel
Use soft, subtle shadows rather than flat or harsh lines

Don’t

Don't overuse the accent colour outside primary actions
Don't use dark or busy backgrounds
Don't use heavy, hard-edged shadows

For AltLeads: Borrow the single confident accent colour and clean numeric layout to make deal and revenue data feel trustworthy and precise.

Copy the tokens

Paste into any project to try this look.

/* Stripe · values measured from https://stripe.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F8FAFD;
  --text: #061B31;
  --muted: #50617A;
  --line: #E5EDF5;
  --accent: #533AFD;
  --on-accent: #FFFFFF;
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-small: 3px;
  --button-height: 40px;
  --font-heading: "sohne-var", "Inter", system-ui, sans-serif;
  --font-body: "sohne-var", "Inter", system-ui, sans-serif;
  --shadow: rgba(50, 50, 93, 0.12) 0px 13.5px 27px -12.4px, rgba(0, 0, 0, 0.05) 0px 8.1px 16.2px -8.1px;
}