AI Brand Kits

Popular brand kit

Stripe Brand Kit

Stripe's web brand colors, CSS custom properties, and typography — preview on real UI, customize tokens, and export DESIGN.md for AI coding agents.

sohne-var is Stripe's proprietary Sohne typeface. The preview may fall back to system sans-serif; exports use the official font name.

Stripebrand colors, CSS variables & typography

Reference tokens from the Stripe brand kit — semantic color roles, CSS custom properties, font families, and Tailwind mappings observed on stripe.com/. Copy any block into your project or export the full kit above.

Stripe typography

Headline font
sohne-var
Page titles, hero headlines, section headers
Body font
sohne-var
Paragraphs, UI text, long-form content

Stripe color palette

Nine semantic tokens — background, foreground, primary (#533afd), accent, muted, border, and foreground-on-color pairs. Vibe: Light, clean, professional.

  • Background

    #ffffff

    Main page and app background

  • Text / Foreground

    #64748d

    Body text and default foreground

  • Surface / Card

    #2ca25e

    Cards, modals, elevated surfaces

  • Primary

    #533afd

    Buttons, links, primary actions

  • Primary Foreground

    #fafafa

    Text on primary surfaces

  • Accent

    #533afd

    Highlights, CTAs, interactive elements

  • Accent Foreground

    #fafafa

    Text on accent surfaces

  • Muted

    #f6f7f8

    Subtle backgrounds, disabled states

  • Border

    #061b31

    Dividers and input borders

Stripe CSS variables

Paste into globals.css, a Tailwind v4 @theme block, or any design-token layer. These are the CSS styles used across the Stripe web UI.

CSS custom properties
:root {
  --background: #ffffff;
  --foreground: #64748d;
  --card: #2ca25e;
  --primary: #533afd;
  --primary-foreground: #fafafa;
  --accent: #533afd;
  --accent-foreground: #fafafa;
  --muted: #f6f7f8;
  --border: #061b31;
  --secondary: #f6f7f8;
  --secondary-foreground: #0a0a0a;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #d97706;
  --warning-foreground: #ffffff;
  --ring: #533afd;
  --input: #061b31;
  --popover: #2ca25e;
  --popover-foreground: #64748d;
}

.dark {
  --background: #404040;
  --foreground: #bedcff;
  --card: #0f3921;
  --primary: #5f43ff;
  --primary-foreground: #ffffff;
  --accent: #5b40ff;
  --accent-foreground: #ffffff;
  --muted: #6f6f70;
  --border: #030f1b;
  --secondary: #6f6f70;
  --secondary-foreground: #fafafa;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #d97706;
  --warning-foreground: #ffffff;
  --ring: #5f43ff;
  --input: #030f1b;
  --popover: #0f3921;
  --popover-foreground: #bedcff;
}

Full token table

TokenHexUsage
Background#ffffffMain page and app background
Text / Foreground#64748dBody text and default foreground
Surface / Card#2ca25eCards, modals, elevated surfaces
Primary#533afdButtons, links, primary actions
Primary Foreground#fafafaText on primary surfaces
Accent#533afdHighlights, CTAs, interactive elements
Accent Foreground#fafafaText on accent surfaces
Muted#f6f7f8Subtle backgrounds, disabled states
Border#061b31Dividers and input borders

Tailwind config for Stripe

Map semantic tokens to Tailwind utility classes — use with the CSS variables above.

tailwind.config.ts excerpt
theme: {
  extend: {
    fontFamily: {
      heading: ['sohne-var', 'sans-serif'],
      body: ['sohne-var', 'sans-serif'],
    },
    colors: {
      background: 'var(--background)',
      foreground: 'var(--foreground)',
      card: 'var(--card)',
      primary: 'var(--primary)',
      'primary-foreground': 'var(--primary-foreground)',
      accent: 'var(--accent)',
      'accent-foreground': 'var(--accent-foreground)',
      muted: 'var(--muted)',
      border: 'var(--border)',
    },
  },
}

Stripe brand kit — colors, CSS styles & typography

The Stripe brand kit captures design tokens observed on stripe.com: white backgrounds (#ffffff), slate body text (#64748d), the signature indigo-violet primary (#533afd), muted surfaces (#f6f7f8), dark navy borders (#061b31), and sohne-var for headlines and body copy.

Every token ships as semantic CSS variables, a full color table, and Tailwind config snippets — ready to paste into globals.css or export as DESIGN.md for Cursor, Claude Code, and v0.

What's in the Stripe brand kit

Nine semantic color roles, typography tokens, CSS variables, and machine-readable JSON — the same structure AI coding agents expect from a DESIGN.md export.

  • Primary #533afd and accent tokens from Stripe's web UI
  • CSS custom properties for background, foreground, card, muted, and border
  • sohne-var headline and body font roles
  • Live preview on buttons, cards, and typography
  • Copy DESIGN.md, CSS variables, JSON, or Tailwind config

How to use the Stripe brand kit

The generator loads Stripe's tokens automatically. Scroll to the reference section for copy-paste CSS and Tailwind snippets, or use the export buttons for a full DESIGN.md bundle.

  • Review colors and fonts in the live preview panel
  • Copy CSS variables from the token reference below
  • Adjust any token with pickers before exporting
  • Download DESIGN.md or open in playground to stress-test components

When to use a Stripe brand kit

Fintech UI prototypes, payment dashboard mockups, developer-tool design studies, and teaching design systems all benefit from Stripe's clean, developer-first web aesthetic.

Teams building SaaS or checkout flows can start with real Stripe CSS styles and diverge where their product needs its own identity — without guessing hex values from screenshots.

Frequently asked questions

What is Stripe's brand color?

Stripe's primary web accent is #533afd — a vivid indigo-violet used on buttons, links, and CTAs. This kit maps it to both primary and accent semantic tokens alongside #64748d body text and #ffffff backgrounds.

Is this the official Stripe brand kit?

This kit reflects colors and typography observed on stripe.com. Sohne (sohne-var) is Stripe's proprietary typeface from Klim Type Foundry — exports use the official font name; for web projects you may need a licensed font file or a similar fallback like Inter or system sans-serif.

Can I copy Stripe CSS variables directly?

Yes. The reference section includes a :root block with --background, --foreground, --primary, and all nine semantic tokens. Paste into globals.css or a Tailwind @theme block.

How do I export for AI coding agents?

Click Download DESIGN.md or Copy Markdown. Place the file in your repo root and tell Cursor or Claude Code to follow it for UI decisions.

Related tools

Explore more free generators from Stripe brand kit to full design system exports.