Home
DESIGN.mdStar on GitHub
Copied!

Financial infrastructure to grow your revenue.

Accept payments, offer financial services and implement custom revenue models — from your first transaction to your next business.

Colors
Primary
brand-indigo
#635BFF
Primary CTAs
brand-indigo-alt
#533AFD
Hover, borders
brand-lavender
#7F7DFC
Hover on brand
brand-orange
#FF6118
Secondary accent
Surfaces
background
#FFFFFF
Page, cards
background-offset
#F6F9FC
Alt rows, sidebar
border-quiet
#E5EDF5
Dividers
border-neutral
#C9D5E0
Emphasized borders
Text
text-primary
#0A2540
Headings, primary
text-body
#273951
Body paragraphs
text-secondary
#50617A
Supporting text
text-subdued
#64748D
Captions, meta
Semantic
success
#3EAE20
Success badge
warning
#F27400
Warning badge
danger
#DF1B41
Error badge
neutral
#50617A
Neutral badge
Typography — Söhne (custom · ≈ Plus Jakarta Sans)
display
Financial infrastructure.
48px300-0.030em
heading-lg
Flexible solutions for every business model.
32px300-0.020em
heading-md
The backbone of global commerce.
26px300-0.018em
heading-sm
Reliable, extensible infrastructure for every stack.
22px300-0.015em
body
Powering businesses of all sizes — from startups to Fortune 500 companies processing billions in revenue.
16px400lh 1.6
label
Form label / UI text
14px400lh 1.45
micro
BADGE · TIMESTAMP
11px400+0.010em
code
sk_live_xxxxxxxxxxxx
13pxmono400
Components
Buttons
Inputs
Badges
Paid Pending Failed Neutral Info
Sample Card
Payment #pi_3QxN...
Paid
Dec 14, 2024 · 14:32 UTC
$1,249.00 USD · Visa ending 4242
Signature Component — Stripe Checkout
Acme Corp
$49.00
Pro Plan · /mo
Card information
4242 4242 4242 4242
12 / 28
CVC
Cardholder name
Sarah Johnson
Country
United States
Secured by Stripe
Recent payments
View all →
Amount Customer Status Date
$1,249.00 sarah@acme.com Paid Dec 14, 2024
$89.00 bob@startup.io Pending Dec 13, 2024
$3,200.00 carol@company.co Paid Dec 12, 2024
$199.00 dan@enterprise.com Failed Dec 11, 2024
Spacing
space-2
4px
space-4
8px
space-6
12px
space-7
16px
space-9
24px
space-10
32px
space-11
40px
space-13
64px
space-14
96px
Guardrails
DO
Use #0A2540 (deep navy) for all primary text — never pure #000000
Apply brand indigo #635BFF to exactly one primary action per view
Use weight 300 for display headlines; weight 400 for all UI text
Set negative letter-spacing on all display and heading text
Use font-variant-numeric: tabular-nums for monetary and numeric data
DON'T
Use indigo accent for decorative purposes — reserve for interactive elements
Apply bold (600+) weights — authority comes from restraint, not heaviness
Use warm shadows — always use cool-toned rgba(10,37,64,...) shadows
Use border-radius above 16px on data-heavy containers
Rely on color alone to communicate status — always pair with text label