Remixes of stripe.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
Stripe's design system embodies modern fintech sophistication with a bold, forward-thinking aesthetic. The visual language combines deep, trustworthy navy tones with vibrant purple accents, creating a premium yet approachable feel. Dynamic gradient overlays—sweeping from blue through purple to coral-orange—add energy and movement to the interface, suggesting fluidity, growth, and technological progress. The system prioritizes clarity and precision, using generous whitespace, refined typography, and subtle elevations to guide users through complex financial workflows. Backgrounds are light and clean, allowing content to breathe while maintaining visual hierarchy. The overall mood is confident, innovative, and professional—designed to inspire trust in a financial services platform while feeling contemporary and accessible.
Key Characteristics
#0A2540) as a stability anchor paired with vibrant purple (#533AFD) for energy#533AFD): Main call-to-action buttons, links, and interactive accents. Most frequently used color across the system for primary engagement.#0A2540): Deep navy for primary text, headings, and trusted UI elements. Conveys stability and financial authority.#061B31): Darkest navy for enhanced contrast and premium secondary elements.#0073E6): Bright blue for secondary interactive states and alternative CTAs.#635BFF): Softer purple for supporting UI elements and secondary accents.#0000EE): High-contrast electric blue for special emphasis (rare use).#533AFD): Primary links and underlined text elements.#425466): Medium-blue-gray for hover and active states on neutral elements.#3C4F69): Muted blue-gray for secondary information and tertiary interactions.#000000): Main body text and primary headings on light backgrounds.#FFFFFF): Primary background for cards, modals, and content areas.#F8FAFD): Subtle off-white for alternating sections and gentle backgrounds.#F6F9FC): Very light blue-gray for hover states and secondary backgrounds.#E5EDF5): Soft borders for cards and dividers.#15BE53): Green for success states, completed actions, and positive confirmations.#FFBB00): Amber-yellow for warnings, alerts, and attention-needed states.Primary: Söhne-var (variable font stack)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Secondary: Söhne-var (used exclusively; no secondary font)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Söhne-var | 48px | 300 | 55.2px | 0px | Hero headlines, main page titles |
| Display Medium | Söhne-var | 32px | 300 | 35.2px | 0px | Large section headings |
| Display Small | Söhne-var | 32px | 700 | normal | 0px | Prominent hero text, feature titles |
| Heading 1 | Söhne-var | 26px | 500 | 35.88px | 0px | Primary section headings |
| Heading 2 | Söhne-var | 26px | 300 | 29.12px | 0px | Secondary section headings |
| Heading 3 | Söhne-var | 18px | 500 | 28px | 0px | Tertiary headings, card titles |
| Heading 4 | Söhne-var | 16px | 400 | 22.4px | 0px | Small headings, labels |
| Body | Söhne-var | 16px | 300 | normal | 0px | Primary body text, longer content |
| Body Small | Söhne-var | 14px | 300 | 19.6px | 0px | Secondary body text, descriptions |
| Caption | Söhne-var | 14px | 400 | 14px | 0px | Small text, captions, metadata |
| Button | Söhne-var | 14px–16px | 400 | 14px–16px | 0px | Call-to-action text |
| Link | Söhne-var | 14px–16px | 400 | normal | 0px | Inline links, navigation |
| List Item | Söhne-var | 16px | 300 | normal | 0px | Bulleted or numbered lists |
px units; line heights expressed as pixels or unitless multipliers for relative scaling.0px except for special emphasis (none present in current spec).#533AFD#FFFFFF16px40015.5px 24px 16.5px 24px4px16px0pxnone#423BCC (darkened purple), text unchanged#352A9F, text unchanged0.5, cursor not-allowedtransparent#061B3114px40012px 0px 12px 0px4px14px1px solid #E5EDF5none#F8FAFD, text #0A2540#F6F9FC, text #061B31transparent#533AFD14px40012px 0px 12px 0px0px14px0pxnone#423BCC, text decoration underline#352A9F#FFFFFF#4254661px solid #E5EDF524px 32px6pxrgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px14px300normal#FFFFFF#061B310px36px 48px8pxrgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px16px300#E3F4FF (top-left), through #E8D5F2 (center), to #FFC997 (bottom-right)72px 48px0pxnone#FFFFFF#061B311px solid #E5EDF512px 16px4px14px40014pxnone#A0AEC01px solid #D1D5DB2px solid #533AFD, box-shadow 0px 0px 0px 3px rgba(83, 58, 253, 0.1)#F6F9FC, text #999999, cursor not-allowed14px400#061B318pxblock#DC2626 (red)#991B1B (dark red)12px4px#FFFFFF64px10px 16px0pxnone0px#42546616px300normal0px 12px#061B31, font-weight 400#533AFD, font-weight 500#42546614px40012px 0px#0A2540transparent#42546614px12px#ECFDF5#15BE531px solid #A7F3D04px 12px16px12px500#FFFBEB#FFBB001px solid #FDE68A4px 12px16px12px500#EFF6FF#0073E61px solid #BFDBFE4px 12px16px12px500Base Unit: 4px
Spacing Scale:
4px – Minimal spacing, component micro-spacing8px – Tight grouping between related elements12px – Standard padding inside smaller components (buttons, badges)16px – Standard padding for input fields, list items20px – Card internal padding, section margins24px – Gap between grouped elements, card padding top/bottom32px – Card padding, section horizontal margins36px – Large section padding40px – Large gap between major sections48px – Extra-large padding for hero sections72px – Margin between full-width sections164px – Maximum margin for major layout divisionsUsage Context:
4px–8px: Component internals (icon spacing, badge padding adjustments)12px–16px: Form fields, button padding, navigation spacing20px–24px: Card padding, nested component spacing32px–48px: Section margins, grid gutters72px+: Full-page section breaks, hero spacing1264px (primary content container)auto (center-aligned containers)32px–48px (left and right breathing room)24px–40px (space between columns)Generous whitespace is core to Stripe's design. Each section breathes independently, with substantial margins separating major content blocks. Interior card padding provides comfortable reading distances (minimum 16px for body text). Vertical rhythm is maintained through consistent line heights (1.4× to 1.6×). Whitespace around interactive elements (buttons, inputs) emphasizes their importance and clickability.
2px – Minimal rounding for small badges and subtle elements4px – Standard radius for buttons, inputs, small cards5px – Alternative small card radius6px – Medium-radius cards, navigation8px – Larger card containers, elevated modals16.5px – Pill-shaped buttons (rare, high-emphasis CTAs)| Level | Treatment | Use |
|---|---|---|
| None | No shadow | Flat buttons, text-only links, backgrounds |
| Subtle | rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px | Slightly elevated cards, hover states on subtle elements |
| Base | rgba(0, 0, 0, 0.1) 0px 18px 36px -18px, rgba(50, 50, 93, 0.25) 0px 30px 45px -30px | Dropdowns, popovers, standard cards |
| Elevated | rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px | Standard card elevation, modals |
| High | rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px | High-priority modals, overlays, hero sections |
Shadow Philosophy:
Stripe's shadow system uses layered, soft shadows to create perceived depth without harsh contrast. The primary shadow is a warm, desaturated black (rgba(50, 50, 93, 0.25)) combined with a cooler, darker shadow (rgba(0, 0, 0, 0.3)). This dual-layer approach mimics natural light and provides visual separation between planes. Shadows increase in blur and spread at higher elevations, creating clear depth hierarchy. Shadows are never pure black, preserving the refined, premium aesthetic.
#533AFD for all primary call-to-action buttons and key interactive elements24px–48px) around major content sections for visual breathing room16.5px rounded corners to pill-shaped buttons for high-emphasis CTAs#0A2540 (dark navy) headings with #425466 (muted blue-gray) body text for strong contrast1264px max-width container with 32px–48px horizontal padding44px × 44px for mobile interactive elements#F8FAFD and #F6F9FC as subtle alternating background colors for section separation#000000) text on white backgrounds for body text; use #061B31 or #425466 instead1px on standard cards and inputs8px to standard components (exceptions: pill buttons only)#533AFD and #0073E6 in the same interface section; maintain visual consistency14px for body content; maintain readability16px on inputs and form fields; maintain accessibility| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–640px | Single column, 16px padding, touch-friendly 44px targets, stacked navigation, full-width cards |
| Tablet | 641px–1024px | 2–4 columns, 24px padding, simplified navigation, grid gutters 24px |
| Desktop | 1025px–1440px | 12-column grid, 32px–48px padding, 1264px max-width container, full navigation |
| Large Desktop | 1441px+ | Same as desktop; container margins auto-expand |
44px × 44px (buttons, links, form controls)48px × 48px (especially for mobile)8px minimum clearance between adjacent interactive elements12px 24px (desktop) to 16px 28px (mobile) for larger touch surfaces48px (desktop) → 32px (tablet) → 16px (mobile)20%–30% at mobile (e.g., 48px → 32px)25% on mobile (72px → 48px)#533AFD) – Primary buttons, main links#0A2540) – All h1, h2, h3 text#061B31) or Secondary Blue (#425466) – Long-form content#FFFFFF) – Card backgrounds, content areas#F8FAFD or #F6F9FC) – Section breaks, subtle contrast#E5EDF5) – Card and input borders#15BE53) – Success badges, confirmations#FFBB00) – Warnings, alerts#0073E6) – Alternative CTAsAll primary buttons must use #533AFD background with #FFFFFF text, 16px font size, 400 weight, 15.5px 24px 16.5px 24px padding, 4px border radius, and dual-layer shadows on hover.
Headings (h1–h3) must use Söhne-var in #0A2540 or #061B31, with weights between 300–700 depending on size; never mix serif fonts.
Body text must be minimum 14px size in #425466 or #061B31 with line height 1.4–1.6× for readability; use 300–400 weights only.
Cards must have 1px solid #E5EDF5 borders, 6px–8px border radius, 24px–32px internal padding, and rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px box shadow.
Form inputs must have #FFFFFF background, 1px solid #E5EDF5 border, 12px 16px padding, 4px border radius, and focus state with 2px solid #533AFD border plus 0px 0px 0px 3px rgba(83, 58, 253, 0.1) shadow.
Navigation uses #425466 text at 16px / 300 weight by default, switching to #533AFD / 500 weight on active state; maintain 10px 16px padding on the nav bar itself.
Spacing follows the 4px base unit scale; use 24px gaps between related elements, 32px–48px section padding, and 72px vertical margin between full-width sections.
Border radius is 4px for buttons and inputs, 6px–8px for cards, and 16.5px only for pill-shaped high-emphasis buttons.
Shadows always use the dual-layer formula combining warm (rgba(50, 50, 93, 0.25)) and cool (rgba(0, 0, 0, 0.3)) layers; never apply shadows to flat or text-only buttons.
Responsive design: Max container width is 1264px at desktop, 32px horizontal padding; collapse to single-column at mobile (320px–640px) with 16px padding and 44px × 44px touch targets.