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
Payment intent Succeeded
$4,280.00
Charged via card_1NqK… · 2026-05-14
Net
$4,154.88
Fee
$125.12

Press `⌘` `K` to inspect this token block in the design-system viewer.

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
First name
Last name
Work email

We'll send the integration brief and nothing else.

Monthly processing volume