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.

## 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