How to build a UI in the Stripe style

:root {
  /* Stripe style — extracted from stripe.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F8FAFD;
  --text: #061B31;
  --text-muted: #50617A;
  --accent: #533AFD;
  --border: #E5EDF5;
  --font-heading: 'Söhne Variable (sohne-var)', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Söhne Variable', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'SourceCodePro', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 48px;
  --h1-tracking: 0em;
  --h1-weight: 300;
  --radius-button: 4px;
  --radius-common: 6px;
  --shadow-common: rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --duration: 0.3s;
}

// tailwind.config.js — Stripe style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F8FAFD",
        ink: "#061B31",
        muted: "#50617A",
        accent: "#533AFD",
        line: "#E5EDF5",
      },
      fontFamily: {
        heading: ["Söhne Variable (sohne-var)", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Söhne Variable", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["SourceCodePro", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["48px", { letterSpacing: "0em", fontWeight: "300" }] },
      borderRadius: { button: "4px", card: "6px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.25, 1, 0.5, 1)" },
    },
  },
};

---
name: stripe-style
description: Build UI in the Stripe visual style (High-Craft Financial Infrastructure & Editorial Light/Navy Dual-Mode). Use when the user asks for a Stripe-like look.
---

# Stripe Style — Quick Rules (source: stripe.com, extracted by taste-skill)

## Tokens
- canvasBg: #FFFFFF — Primary light-mode page canvas
- canvasDarkNavy: #0D1738 — High-contrast dark navy enterprise & global stats sections
- surfaceSubtle: #F8FAFD — Subtle elevated bento background & quiet card fill
- surfaceBento: #E5EDF5 — Modular solutions bento containers & secondary surface (#ECF0F4)
- surfaceGlass: rgba(248, 251, 253, 0.45) — Frosted glass floating UI cards over mesh gradients
- borderHairline: #E5EDF5 — Primary 1px architectural layout & bento grid dividers (52 DOM instances)
- borderAccentQuiet: #D6D9FC — Secondary outline button & interactive badge border
- borderDarkSection: #182659 — 1px grid hairline inside #0D1738 dark navy sections
- textPrimary: #061B31 — Deep ink-navy primary headings & high-contrast foreground
- textMuted: #50617A — Primary body copy & feature descriptions (55 DOM instances)
- textSecondary: #64748D — Captions, secondary labels & footnotes (#6480B2 on dark sections)
- accentPrimary: #533AFD — Signature Stripe electric indigo CTA button & active accent (--hds-color-core-brand-700: #4032C8)
- accentSubdued: #E2E4FF — Tinted brand pills, chips & icon containers
- semanticAccents: Success #00D66F (#00B261) / Magenta #F44BCC / Orange #FF6118 / Lemon #F9B900 — Revenue growth charts, live payment indicators & multi-stop gradient anchors

## Typography
- Heading font: Söhne Variable (sohne-var); body: Söhne Variable; mono: SourceCodePro
- Hero H1: 48px | line-height 55.2px (leading-[1.15]) | letter-spacing -0.96px (tracking-[-0.02em]) | weight 300 (font-[300]) | color #061B31 (with mix-blend-mode gradient mask on Hero) (text-[#061B31]) | font sohne-var
- Section H2 (Primary): 56px | line-height 57.7px (leading-[1.03]) | letter-spacing -1.4px (tracking-[-0.025em]) | weight 300 (font-[300]) | color #FFFFFF (text-white) | font sohne-var
- Section H2 (Secondary): 32px | line-height 35.2px (leading-[1.1]) | letter-spacing -0.64px (tracking-[-0.02em]) | weight 300 (font-[300]) | color #061B31 (text-[#061B31]) | font sohne-var
- Card / Feature H3: 32px | line-height 35.2px (leading-[1.1]) | letter-spacing -0.64px (tracking-[-0.02em]) | weight 300 (font-[300]) | color #061B31 (text-[#061B31]) | font sohne-var

## Components
- Primary button: height 48px, padding 15.5px 24px, radius 4px, bg #533AFD, text #FFFFFF, 16px / 400
- Card: bg rgba(248, 251, 253, 0.45), border none, radius 6px, padding 0px 0px

## Never
- NEVER use pure black (#000000) or neutral gray (#111827) for headings or dark sections—Stripe uses deep maritime ink-navy (#061B31 for text, #0D1738 for dark sections) and cool slate (#50617A) for body copy.
- NEVER use heavy bold (700/800) weights on display headlines—Stripe’s current HDS aesthetic uses refined light-weight Söhne Variable (font-light / 300) at large sizes (48px–56px) with tight negative tracking (-0.02em to -0.025em) for an architectural editorial feel.
- NEVER use pill-shaped (rounded-full) or overly rounded (rounded-2xl) primary buttons—Stripe’s HDS buttons use crisp 4px corners (--hds-space-button-radius-lg: 4px, rounded-[4px]) with 48px height (h-12 px-6).
- NEVER use muddy black drop shadows—always use cool-tinted ambient shadows (shadow-[0_16px_32px_0_rgba(50,50,93,0.12)] or shadow-[0_15px_35px_0_rgba(23,23,23,0.08)]).
- NEVER leave large white layouts floating without structure—anchor sections with 1px solid #E5EDF5 architectural grid hairlines and 1264px (--hds-space-layout-content-maxWidth) containers.

Full 120-line spec: https://taste-skill.pages.dev/taste/stripe/

npx taste-skill add stripe