stripe-style
Stripe-style motion
A fintech homepage feel: light, precise, fast, expensive. The values below were read from a real live stylesheet, then turned into a brief.
Clone the style, never the brand. Never draw the Stripe logo, the wordmark or a real product screenshot. Every element is your own design in this style.
The design system
Type. One font for everything, light weights: body 300, headings 400, emphasis 500. Nothing heavy. Tracking -0.01em on headings, -0.02em at hero size. Use system-ui or Inter (the original font is paid). Code in a monospace.
Colour. Background white, surfaces #F8FAFD. Text deep navy #061B31, secondary #425466. One accent: purple #635BFF, pressed #533AFD. Green #00D924 only for ticks. One loud gradient, only as a soft blurred shape behind a hook or end card, never full frame: #FFD601, #FF6118, #EE30FB, #FB76FA, #7232F1.
Shape. Small corners: cards 6px, small items 4px, circles 50%. One soft lifted shadow: 0 27px 40px -27px rgba(50,50,93,.25), 0 16px 32px -16px rgba(0,0,0,.1).
Motion. Default easing cubic-bezier(.25, 1, .5, 1): things snap in fast and settle. Most moves 0.3s, small fades 0.15s, the biggest 0.5s. Compare Apple's calm cubic-bezier(0.4, 0, 0.6, 1).