Stripe-Style Refined Gradient

---
name: stripe-gradient-saas
description: Apply the Stripe-Style Refined Gradient visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Stripe-Style Refined Gradient, mentions stripe style, fintech gradient, gradient mesh SaaS, or describes animated gradient mesh hero, skewed section dividers, deep navy text on white — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Stripe-Style Refined Gradient Design System

Polished fintech modernism: white pages anchored by a deep navy ink, one animated diagonal gradient-mesh hero, skewed section boundaries, and meticulous typographic hierarchy. Colorful exactly once, disciplined everywhere else.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Stripe-Style Refined Gradient.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (stripe style, fintech gradient, gradient mesh SaaS), or describes its traits: animated gradient mesh hero; skewed section dividers; deep navy text on white; violet primary accent; dense meticulous typography.

## Design tokens

### Color palette

- Page background: `#ffffff` (--color-bg)
- Alternate section background, cool gray-blue: `#f6f9fc` (--color-surface)
- Primary text, deep navy ink: `#0a2540` (--color-text)
- Secondary text: `#425466` (--color-text-muted)
- Primary accent, violet-blue (current published brand purple): `#533afd` (--color-accent)
- Gradient companion, cyan: `#00d4ff` (--color-accent-cyan)
- Gradient companion, magenta: `#ff61ab` (--color-accent-magenta)
- Hairline borders on cards and tables: `#e6ebf1` (--color-border)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif) (ideal: Söhne, premium — use Inter as the free substitute)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif) (ideal: Söhne, premium — use Inter as the free substitute)
- Mono / data: Source Code Pro (fallback: Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.02em
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96 — Denser than typical marketing sites — Stripe packs real information (code samples, feature matrices) with tight but never cramped rhythm.
- Border radius: sm 4px, md 8px, lg 16px, pill 999px — Small, businesslike rounding; pills for CTAs.
- Border treatment: 1px solid #e6ebf1 — Hairlines structure tables and cards; never dark borders.

### Shadows

- card: `0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3)` — Cards and dropdowns — the classic Stripe layered shadow
- float: `0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3)` — Hero screenshots and modals

### Layout

- Max content width: 1080px
- Sections alternate white and #f6f9fc, joined by skewY(-6deg) boundaries
- Two-column feature rows: prose left, live code/UI sample right
- Floating UI fragments (cards, receipts) collaged at slight angles in heroes

### Effects

- Animated gradient mesh (accent, cyan, magenta) in hero, slowly shifting
- skewY(-6deg) section dividers with content counter-skewed back
- Gradient text on one hero keyword only

### Motion

- Easing: cubic-bezier(0.215, 0.61, 0.355, 1); durations 150ms / 250ms / 450ms
- Gradient mesh animates continuously but slowly (20s+ loops)
- Cards lift 2px with deepened shadow on hover
- Scroll-triggered fade-ups with 60ms stagger

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-text: #0a2540;
  --color-text-muted: #425466;
  --color-accent: #533afd;
  --color-accent-cyan: #00d4ff;
  --color-accent-magenta: #ff61ab;
  --color-border: #e6ebf1;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  --border-default: 1px solid #e6ebf1;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Source Code Pro", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Source+Code+Pro:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 72px, transparent over hero then white with hairline border on scroll; 15px medium links in navy
- **Hero:** Skewed gradient band; 48–64px bold navy headline (one gradient word), subhead, email-capture input + pill CTA; floating product collage right
- **Card:** White, 8px radius, layered Stripe shadow, 24–32px padding, hairline border optional
- **Button (primary):** Accent #533afd fill, white text, pill radius, arrow glyph that nudges right on hover
- **Button (secondary):** Navy text with arrow, no fill or border — a confident text link
- **Form fields:** White, 1px #e6ebf1 border, 6px radius, layered inner shadow subtle; focus ring accent at 30%

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A single diagonally-skewed (skewY(-6deg)) hero band filled with an animated multi-hue gradient mesh, after which the page becomes disciplined white-and-navy. Spend boldness here; keep everything else quiet.

## Do

- Spend all color in the hero gradient; keep the rest of the page navy-on-white
- Pair every feature claim with a concrete artifact — code sample, UI fragment, diagram
- Use the layered two-part shadow recipe for all elevation
- Keep line lengths and information density businesslike

## Don't

- Don't repeat the gradient in every section — once establishes the brand, twice cheapens it
- No pure black text; ink is navy #0a2540
- No flat single-color shadows — always the layered recipe
- Don't center long body copy

## Accessibility notes

- Navy on white and muted #425466 on white both pass AA comfortably
- White text over the animated gradient must be tested at the gradient's lightest point (cyan region) — add a subtle dark overlay if below 4.5:1
- Respect prefers-reduced-motion by freezing the mesh animation

## Reference sites

- Stripe: https://stripe.com
- Plaid: https://plaid.com
- Retool: https://retool.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip stripe-gradient-saas.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/stripe-gradient-saas.json

Settings → Capabilities → Skills → Upload skill → stripe-gradient-saas.zip