Design System Inspired by Stripe

01 / Colors

Color Palette

Primary & Action

Stripe Violet#635bffLinks, accents, focus rings

CTA Indigo#533afdFilled CTA background

Action Hover Dark#4032c8Primary btn border hover

Icon Btn Hover#2e2b8cIcon button hover state

Secondary & Accent

Strawberry Pink#ff5996Illustrative accent; Radar/fraud product category

Brand Navy Variant#1c1e54Section dividers, dark card backgrounds

Subdued Lavender#b9b9f9Ghost btn hover fill

Quiet Lavender#e2e4ffGhost btn rest fill

Orange Accent#ff6118Illustrative accent only

Lemon Accent#f9b900Illustrative accent only

Surfaces & Backgrounds

Pure White#ffffffUtility mode ground

Cloud Mist#f6f9fcInput default background, card tints

Deep Marketing Navy#0a2540Hero bg (10,029 instances)

Heading Black#061b31Primary headings (light bg)

Near-Black Neutral#0d253dBody copy on white

Darkest Brand#0f1137Darkest brand surface

Near-Darkest Brand#161741Near-darkest brand surface

Neutrals & Text

Slate Body#50617aMid-confidence body text (451 instances)

Steel Secondary#727f96Supporting copy, metadata labels (1,564 instances)

Muted Tertiary#414552Dashboard graphic contexts only

Separator Steel#425466Rule borders & dividers

Divider Fog#e7ecf1Horizontal rules (white)

Label Color#273951Form label text

Semantic & Status

Error Red#d8351eError icon color (icon-only)

Success Green#00b261Success icon color (icon-only)

Success Badge Fillrgba(21,190,83,0.2)Status badge pill background

Category Pills

Link / Connect Payments Billing Radar Neutral Active

02 / Typography

Type Hierarchy

H1 Large A

H1 Large A — 76px / 425 / 1.04 / −3.04px / Inter (sohne-var)

H1 Large B

H1 Large B — 58px / 425 / 1.04 / −2.32px / Inter (sohne-var)

H1 Medium A

H1 Medium A — 56px / 500 / 1.21 / −1.12px / Inter (sohne-var)

H1 Medium C

H1 Medium C — 48px / 425 / 1.17 / −0.96px / Inter (sohne-var)

H2 Sub-section Header

H2 — 40px / 425 / 1.20 / −0.96px / Inter (sohne-var)

H3 Large — Pricing Plan

H3 Large — 32px / 700 / — / — / Inter (sohne-var)

H3 Small — Card Headline

H3 Small — 28px / 425 / 1.29 / — / Inter (sohne-var)

H4 — Sub-category Label

H4 — 26px / 500 / 1.38 / — / Inter (sohne-var)

H5 — Section Sub-header

H5 — 24px / 500 / 1.33 / +0.20px / Inter (sohne-var)

H6 / Large Label — Feature List Title

H6 / Large Label — 21px / 500 / 1.29 / +0.16px / Inter (sohne-var)

Body XL — Lead paragraph text for editorial sections and hero subtitles on dark backgrounds.

Body XL — 18px / 300 / 1.40 / — / Inter (SF Pro Display)

Body Standard — Primary paragraph text used across marketing and utility pages. Light weight with generous line-height for comfortable reading.

Body Standard — 16px / 300 / 1.40 / — / Inter (SF Pro Display)

Body Standard Medium — Standard medium body copy for card content and feature descriptions.

Body Standard Medium — 16px / 425 / 1.50 / — / Inter (sohne-var)

Body Small — Button labels and secondary body copy.

Body Small — 15px / 425 / 1.60 / — / Inter (sohne-var)

Caption Medium — Active captions.

Caption Medium — 13px / 425 / 1.62 / +0.20px / Inter (sohne-var)

Caption Mono — CODE_LABEL · API_KEY · 0x4a2f

Caption Mono — 12px / 500 / 2.00 / — / Source Code Pro

Nano Caption — The only uppercase instance in the system

Nano Caption — 8px / 425 / 1.88 / +0.16px / text-transform: uppercase ← only instance

03 / Buttons

Button Variants

Note the dual-radius signature: 16.5px for marketing pill CTAs (on dark), 4px for all navigation and utility buttons.

Primary CTA Hero (pill 16.5px)

Primary CTA Nav (4px)

Ghost HDS (4px, lavender fill)

Secondary Content (frosted, 4px)

Pill Toggle (99px, carousel)

Quiet UI (4px, muted)

Hero Primary (violet pill)

White on Dark (4px)

Ghost Nav (4px, white border)

Secondary Hero (frosted)

04 / Cards

Cards on Light Background

Standard Card

Dual-layer box-shadow: ambient rgba(50,50,93,0.25) plus contact rgba(0,0,0,0.3). Never a single-layer shadow.

Learn more →

Elevated (LG Shadow)

Hero cards and product illustration panels use the LG shadow: 30px/60px offset with negative spread on the contact layer.

Explore →

Cards on Dark Background

Enterprise Panel

Deep blue-black surfaces (#1c1e54) with light type reversed out. Ambient particle drift is the only animation.

Contact enterprise sales

XXL Shadow Panel

Largest feature panels use the XXL shadow: 50px/100px offsets — restrained-dramatic at combined ~55% opacity.

See case study

XL Full Panel

Full-section hero panels use the XL shadow: 100px offset on the first layer, 60px on the second.

05 / Forms

Input States

Email address Default — background: #f6f9fc / no border / radius: 4px

Full name Focus — outline: #635bff 2px / compound focus ring

Card number Error — outline: #d8351e 2px

Message Textarea — same styling as text input

06 / Spacing

Spacing Scale

Base unit: 8px. The 22px value is a high-frequency optical correction (678 instances) — not on the 8pt grid, but present throughout Stripe's button padding.

1px — Borders

3px — Sub-pixel adj.

4px (0.5×) — Micro gaps

6px (0.75×) — Dense internal

8px (1×) — Base unit

12px (1.5×) — Compact padding

16px (2×) — Inline spacing

22px (2.75×) ⚡ Optical

24px (3×) — Card padding

32px (4×) — Outer padding

48px (6×) — Section rhythm

64px (8×) — Separators

80px (10×) — Hero bottom

128px (16×) — Hero vertical

07 / Radius

Border Radius Scale

Three families: sharp functional (4–8px), pill CTA (16.5px–99px), circular (50%–100%).

1px
micro separators

2px
focus rings

4px
inputs, nav btns

5px
standard cards

6px
nav container

8px
elevated cards

12px
mid containers

16px
containers, panels

16.5px ⚡
marketing pill CTA

36px
large graphic containers

50px
large pill buttons

60px
category badge pills

99px
full-pill nav containers

50%
circular nav buttons

08 / Elevation

Shadow System

XS — Hover State

…ambient 2px + contact 1px

SM — Standard Cards

…ambient 13px + contact 8px

SM Alt — Card Lift

…ambient 13px/-5px + contact 8px/-8px

MD — Feature Cards

…ambient 15px + contact 3px

MD Alt — Content Modules

…ambient 15px(0.1) + contact 5px

LG — Hero Cards (76 instances)

…ambient 30px/-12px + contact 18px/-18px

XL — Full Panels

…ambient 100px/-40px + contact 60px

XXL — Largest Panels

…ambient 50px/-20px + contact 30px/-30px

Inset / Active State

…rgba(0,0,0,0.34) inset 1px

Focus Ring (compound)

…blue outer 2px + white inset 2px gap