Stripe Style

STYLEKIT_STYLE_REFERENCE
style_name: Stripe Style
style_slug: stripe-style
style_source: /styles/stripe-style

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Stripe Style design frontend development expert. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Using non-Stripe brand colors as primary
- Using excessively large radii rounded-3xl, rounded-full (except buttons)
- Using rough single-layer shadows
- Ignoring grid background elements
- Using unprofessional color schemes

## Must Follow

- Primary color Stripe purple #635bff
- Dark text #0a2540
- Background color #f6f9fc
- Refined multi-layer shadows
- Moderate radii rounded-lg, rounded-xl
- Smooth transition animations

## Color Palette

Primary:
- Stripe purple: bg-[#635bff], text-[#635bff]
- Dark blue: text-[#0a2540]
- Background: bg-[#f6f9fc]

Accent colors:
- Cyan: #00d4ff
- Light purple: #7a73ff
- Bright cyan: #80e9ff

## Shadows

Card shadow:
shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]

Button shadow:
shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)]

## Grid Background

Use CSS linear gradients to create grid:
background-image: linear-gradient(to right, rgba(99,91,255,0.1) 1px, transparent 1px),
                  linear-gradient(to bottom, rgba(99,91,255,0.1) 1px, transparent 1px);
background-size: 40px 40px;

## Self-Check

After generating code, verify:
1. Stripe purple used as primary color
2. Shadows are refined and multi-layered
3. Grid background elements present
4. Overall feel is professional and trustworthy

## Animation & Interaction Rules

- Fluid SaaS Motion: Button hover uses `hover:-translate-y-0.5 transition-all duration-[300ms] ease-out` -- SaaS feels responsive but never jarring. Never use `ease-in-out` (too slow) or instantaneous cuts.
- Floating Matrix: Card hover lifts with `hover:-translate-y-1 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] transition-all duration-[400ms] ease-out`. The icon area uses `group-hover:scale-110 transition-transform duration-[400ms]` -- the card becomes interactive, the icon celebrates.
- Liquid Gradient Focus: Button uses inset highlight `shadow-[0_2px_5px_rgba(99,91,255,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]` at rest, maintained on hover -- simulates convex glass surface catching light. Never use a flat-color button with no shadow.
- Hairline Crispness: Active press is `active:scale-[0.98] active:translate-y-0 active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]` -- the button physically depresses. The outer glow disappears; only the inset concave shadow remains.

---

# Stripe Style Design System

> A refined and professional fintech style featuring Stripe purple as the primary color, complemented by gradient grid backgrounds, elegant card shadows, and smooth animations, ideal for payment products and developer tools.

## Design Philosophy

Stripe Style is a refined design style originating from Stripe, known for its signature purple and professional visual language. Through gradient grid backgrounds, elegant card shadows, and smooth animations, it conveys trust and technical prowess.

Core principles:
- Professional trust: Refined design conveys reliability
- Technical feel: Grid backgrounds and code elements showcase technical capability
- Brand consistency: Stripe purple runs throughout the entire design
- Smooth experience: Subtle animations enhance interactivity

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-gray-200
Radius: rounded-lg
```

### Shadow
```
sm: shadow-[0_1px_2px_rgba(0,0,0,0.05)]
md: shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]
lg: shadow-[0_4px_8px_rgba(0,0,0,0.06),0_16px_32px_rgba(0,0,0,0.1)]
hover: hover:shadow-[0_4px_8px_rgba(0,0,0,0.06),0_16px_32px_rgba(0,0,0,0.1)]
focus: focus:shadow-[0_0_0_3px_rgba(99,91,255,0.3)]
```

### Interaction
```
Hover translate: hover:-translate-y-0.5
Hover scale: (none)
Hover opacity: (none)
Transition: transition-all duration-200
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold text-[#0a2540]
Body: text-gray-600
Mono: font-mono text-sm
```

### Type scale
```
Hero: text-5xl md:text-7xl
H1: text-4xl md:text-5xl
H2: text-3xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-base
Small: text-sm
```

### Spacing
```
Section: py-16 md:py-24
Container: px-6 md:px-8
Card: p-6 md:p-8
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#f6f9fc]
Background accent: bg-[#635bff], bg-[#0a2540], bg-gradient-to-r from-[#635bff] to-[#00d4ff]
Text primary: text-[#0a2540]
Text secondary: text-gray-600
Text muted: text-gray-400
Button primary: bg-[#635bff] text-white
Button secondary: bg-white text-[#0a2540]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-3xl`
- `shadow-inner`
- `bg-gradient-to-br from-pink`
- `text-pink`

### Banned patterns
- matches `^rounded-3xl`
- matches `^shadow-inner`
- matches `^bg-(?:pink|red|yellow)-`

### Why they are banned
- `rounded-3xl`: Stripe style uses moderate rounded corners (rounded-lg or rounded-xl)
- `shadow-inner`: Stripe style uses outward shadows, not inset shadows
- `bg-pink`: Stripe style uses professional colors (purple, blue, gray)

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-6 py-3
bg-[#635bff]
rounded-lg
text-white font-medium
shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)]
hover:-translate-y-0.5
transition-all duration-200
```

### Every card must include
```
bg-white
rounded-xl
shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]
```

### Every input must include
```
bg-white
border border-gray-300
rounded-lg
text-[#0a2540] placeholder-gray-400
shadow-[0_1px_2px_rgba(0,0,0,0.05)]
focus:outline-none focus:ring-2 focus:ring-[#635bff] focus:border-transparent
transition-all
```

---

## [COMPARE] Stripe Style wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-6 py-3 bg-[#635bff] rounded-lg text-white font-medium shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 bg-[#635bff] text-white">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)] p-6 md:p-8">
  <h3 class="font-semibold text-[#0a2540] text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white border border-gray-300 rounded-lg text-[#0a2540] placeholder-gray-400 shadow-[0_1px_2px_rgba(0,0,0,0.05)] focus:outline-none focus:ring-2 focus:ring-[#635bff] focus:border-transparent transition-all" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Stripe Style page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-[#0a2540] border border-gray-200 px-6 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-semibold text-[#0a2540] text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 text-gray-600 text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#635bff] text-[#0a2540] py-16 md:py-24 px-6 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold text-[#0a2540] text-5xl md:text-7xl">
      {HEADLINE}
    </h1>
    <p class="text-gray-600 text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-6 py-3 bg-[#635bff] rounded-lg text-white font-medium shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)] hover:-translate-y-0.5 transition-all duration-200 bg-[#635bff] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#0a2540] py-16 md:py-24 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold text-[#0a2540] text-3xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-white rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)] p-6 md:p-8">
        <h3 class="font-semibold text-[#0a2540] text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="text-gray-600 text-base text-gray-400">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border border-gray-300 rounded-lg text-[#0a2540] placeholder-gray-400 shadow-[0_1px_2px_rgba(0,0,0,0.05)] focus:outline-none focus:ring-2 focus:ring-[#635bff] focus:border-transparent transition-all" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f6f9fc] text-gray-600 py-16 md:py-24 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-semibold text-[#0a2540] text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="text-gray-600 text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold text-[#0a2540] text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="text-gray-600 text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Stripe Style post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-6 py-3 bg-[#635bff] rounded-lg text-white font-medium shadow-[0_2px_4px_rgba(99,91,255,0.2),0_4px_8px_rgba(99,91,255,0.2)] hover:-translate-y-0.5 transition-all duration-200`
- [ ] Card includes: `bg-white rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]`
- [ ] Input includes: `bg-white border border-gray-300 rounded-lg text-[#0a2540] placeholder-gray-400 shadow-[0_1px_2px_rgba(0,0,0,0.05)] focus:outline-none focus:ring-2 focus:ring-[#635bff] focus:border-transparent transition-all`

### Forbidden check
- [ ] Not using `rounded-3xl`
- [ ] Not using `shadow-inner`
- [ ] Not using `bg-gradient-to-br from-pink`
- [ ] Not using `text-pink`

### Style rule check
- [ ] Use Stripe purple #635bff as the primary color
- [ ] Add gradient grid backgrounds for a technical feel
- [ ] Use refined multi-layer shadows
- [ ] Maintain moderate border radii rounded-lg or rounded-xl
- [ ] Use smooth transition animations

### Style drift check
- [ ] Does not violate: Do NOT use overly vibrant color schemes
- [ ] Does not violate: Do NOT use excessively large border radii
- [ ] Does not violate: Do NOT use rough shadows
- [ ] Does not violate: Do NOT ignore grid background elements
- [ ] Does not violate: Do NOT use unprofessional fonts

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Stripe Style

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use overly vibrant color schemes
- use excessively large border radii
- use rough shadows
- ignore grid background elements
- use unprofessional fonts
- use `hover:scale-*` (Stripe buttons only float up, never scale -- scaling breaks the precision feel)
- omit inset highlight shadow (Liquid Gradient Focus is the core of Stripe button texture, cannot be omitted)
- use `ease-in-out` or `ease` (Stripe animations are always `ease-out` -- fast departure, gentle landing)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do NOT use overly vibrant color schemes
- [ ] do NOT use excessively large border radii
- [ ] do NOT use rough shadows
- [ ] do NOT ignore grid background elements
- [ ] do NOT use unprofessional fonts