Millions of companies use Stripe to accept payments, send payouts, and manage their businesses online. Built with precision and trust at every layer.
Click card to flip
No hidden fees. No setup costs. Scale from zero to enterprise with a single platform.
For individuals and small projects getting started.
For growing businesses that need more power and flexibility.
For large-scale operations with custom needs.
Six precisely chosen values. Every Stripe interface descends from this palette — no improvisation, no approximation.
Default card shadow — subtle two-layer depth
shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_16px_rgba(0,0,0,0.08)]Floating Matrix hover state — card lifts into view
shadow-[0_12px_30px_rgba(0,0,0,0.08)]Liquid Gradient Focus — convex glass surface with inset highlight
shadow-[0_2px_5px_rgba(99,91,255,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]Hairline Crispness — button depresses; outer glow disappears
shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]/* CSS property */
backgroundImage: `
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
)
`,
backgroundSize: "40px 40px"Every component is engineered with multi-layer shadows, exact easing, and the four aiRules baked in — no shortcuts.
Primary — Liquid Gradient Focus + Fluid SaaS Motion + Hairline Crispness
Secondary & Ghost
Size variants
States: rest / hover / active (hold click)
Four named rules — each with a precise implementation. Hover and click to feel each one in action.
hover:-translate-y-0.5
transition-all duration-[300ms] ease-out
Buttons rise 2px on hover. The motion is ease-out — fast start, smooth landing. Never ease-in-out. Never instantaneous.
Hover to feel the controlled lift
hover:-translate-y-1 duration-[400ms] ease-out
group-hover:scale-110 (icon) duration-[400ms]
Cards float upward on hover. The icon area scales to 110% — it celebrates becoming interactive.
Hover this card to float it
shadow-[0_2px_5px_rgba(99,91,255,0.4),
inset_0_1px_0_rgba(255,255,255,0.2)]
The inset highlight simulates a convex glass surface catching light. Present at rest AND on hover. Never a flat button without shadow.
active:scale-[0.98] active:translate-y-0
active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)]
On click, the button physically depresses. The outer glow disappears entirely. Only the inset concave shadow remains.
Click and hold to feel the physical press
Stripe Style has strict invariants. Break these and the design loses its precision and trust signal.
Stripe animations always use ease-out — fast departure, smooth landing. ease-in-out feels sluggish and wrong for SaaS.