Payments · Infrastructure

Financial infrastructure designed for the internet.

The reference fixture pastes Stripe's token block into a single <style> and renders a recognisable Stripe page without authoring any additional values — every colour, type size, and shadow below resolves through var(--*).

Start now Contact sales
Schema in numbers

Fifty-six tokens carry every visible value below.

56
tokens in :root
0
brand-C extensions
3
elevation levels (flat · ring · raised)
300
default sohne-var weight
What this fixture exercises

Every component renders through var(--*) — no raw hex, no off-token type.

Shadow as identity

The trademark blue-tinted multi-layer shadow lives at --elev-raised. Rebinding it to a neutral drop shadow erases Stripe's atmosphere even when every colour is right.

Inspect tokens →

Light weight as voice

Display sizes run at weight 300 with negative tracking. Stripe's headlines feel like they don't need to shout; weight 600 would erase the brand instantly.

Read the spec →

Accent discipline

--accent appears at most twice per screen — primary CTA and link colour. Decorative ruby / magenta gradients live in the hero halo, not on interactive elements.

Inspect accent →
Pricing pattern

Featured tier lifts via shadow alone — no colour shift, no border change.

Starter

For new accounts integrating their first payment flow.

$0/month
  • Standard processing rates
  • Dashboard access
  • Email support
Start free
Most popular Featured

Growth

$79/month
  • Volume processing discounts
  • Subscriptions & invoicing
  • Fraud monitoring
  • Priority support
Choose Growth

Scale

Custom pricing for high-volume merchants and platforms.

Custom
  • Negotiated processing rates
  • Dedicated solutions engineer
  • Custom data residency
Contact sales
Integration preview

Two lines of code, one charge.

The monospace face is SourceCodePro at 12px / weight 500 / line-height 2.00 — generous leading so payment snippets read like prose, not like terminal output.

Inspect mono token 
// Create a PaymentIntent on your server.
const intent = await stripe.paymentIntents.create({
  amount: 4280,
  currency: "usd",
  automatic_payment_methods: { enabled: true },
});

// Return the client secret to the browser.
res.json({ clientSecret: intent.client_secret });
Form components

Inputs inherit the same tokens.

Focus rings, borders, placeholder colour — all derive from --accent and --border. The submit button reuses .btn-primary unchanged. The panel itself lifts via the trademark blue-tinted shadow.

Contact sales

Secure

We'll send the integration brief and nothing else.