See exactly what
you get

/* Stripe Brand — CSS Variables */
:root {
  --color-primary:   #533afd;
  --color-secondary: #061b31;
  --color-neutral:   #50617a;
  --color-dark:      #273951;
  --color-accent:    #ff6118;
  --color-surface:   #e5edf5;
  --color-success:   #81b81a;
  --color-info:      #000eff;
  --font-primary:    'sohne-var', sans-serif;
}

{
  "color": {
    "primary":   { "$value": "#533afd", "$type": "color" },
    "secondary": { "$value": "#061b31", "$type": "color" },
    "accent":    { "$value": "#ff6118", "$type": "color" }
  },
  "font": {
    "primary": { "$value": "sohne-var", "$type": "fontFamily" }
  }
}

// stripe.com — tailwind.config.js
// Generated by StyleExtract
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50:  '#eeeeff',
          100: '#dcd9ff',
          300: '#968dff',
          500: '#533afd', // ← Brand Primary
          700: '#3322b1',
          900: '#110b65',
        },
        secondary: '#061b31',
        accent:    '#ff6118',
        muted:     '#50617a',
        surface:   '#e5edf5',
      },
      fontFamily: {
        sans: ["'sohne-var'", 'Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

/* stripe.com — Shadcn UI Theme
   Paste into your globals.css @layer base */
:root {
  --primary:            245 97% 60%;  /* #533afd */
  --primary-foreground: 0   0%  100%;
  --secondary:          212 78% 11%;  /* #061b31 */
  --accent:             17  100% 55%; /* #ff6118 */
  --background:         0   0%  100%;
  --foreground:         0   0%  9%;
  --muted:              210 20% 40%;  /* #50617a */
  --ring:               245 97% 60%;
  --radius:             0.75rem;
}
.dark {
  --background: 212 78% 6%;
  --foreground: 0   0%  95%;
  --primary:    245 97% 65%;
  --muted:      212 20% 20%;
}