Stripe 风格

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.