{"id":"48e5de76-05d5-4c4e-a269-c7c245b291ec","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/48e5de76-05d5-4c4e-a269-c7c245b291ec","originalSiteUrl":"https://stripe.com","capturedAt":"2026-04-29T22:55:51.920Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Stripe","summary":"Architectural blueprint on white marble.","description":"Stripe's design system evokes a digital command center on a clean canvas. It combines a serene white background with structured grid layouts and a single vibrant violet to highlight actions and key information. Subtle shadows provide soft elevation, preventing elements from feeling flat, while compact typography paired with highly descriptive gradients for hero sections and product showcases adds visual depth without clutter. The overall effect is one of quiet efficiency, where information is paramount, and interactions are clearly signposted.","industry":"fintech","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#061b31","role":"Primary text, critical headings, icons, primary button text for ghost buttons","group":"neutral"},{"name":"Slate Blue","hex":"#50617a","role":"Secondary text, muted links, subtle borders, descriptive captions","group":"neutral"},{"name":"Ghost Gray","hex":"#64748d","role":"Tertiary text, placeholder text, inactive states, subtle dividers","group":"neutral"},{"name":"Platinum White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary button text against dark backgrounds","group":"neutral"},{"name":"Porcelain White","hex":"#f8fafd","role":"Secondary card surfaces, subtle background variations","group":"neutral"},{"name":"Powder Blue","hex":"#e5edf5","role":"Background for secondary sections, light card backgrounds","group":"neutral"},{"name":"Stone Gray","hex":"#d8d6df","role":"Horizontal rules, subtle borders, graphical elements","group":"neutral"},{"name":"Deep Violet","hex":"#533afd","role":"Primary calls to action (buttons, links), active states, significant icons — establishes brand presence and emphasizes interaction","group":"brand"},{"name":"Washed Violet","hex":"#b9b9f9","role":"Border for ghost buttons, subtle accents","group":"accent"},{"name":"Soft Violet","hex":"#8087ff","role":"Decorative icons, gradient highlights, sub-brand accents","group":"accent"},{"name":"Accent Green","hex":"#81b81a","role":"Green outline accent for tags, dividers, and focused UI edges","group":"accent"},{"name":"Vibrant Orange","hex":"#ff6118","role":"Orange outline accent for tags, dividers, and focused UI edges.","group":"accent"},{"name":"Sunburst Gradient","hex":"#ffbb00","role":"Decorative gradients in hero sections and product showcases, adding a dynamic, abstract visual element","group":"accent","gradient":"linear-gradient(90deg, rgb(114, 50, 241) 3.13%, rgb(251, 118, 250) 50%, rgb(255, 207, 94))"},{"name":"Dreamy Gradient","hex":"#7f7dc8","role":"Abstract background graphics, product display panels, adding depth and a tech-centric feel","group":"accent","gradient":"radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)"},{"name":"Fuchsia Glow Gradient","hex":"#ff2ede","role":"Decorative illustration elements, feature highlights","group":"accent","gradient":"linear-gradient(0deg, rgb(255, 46, 222), rgb(210, 152, 255))"}],"typography":[{"role":"The primary typeface for all content. Weight 300 is used for large, impactful headlines, creating a sense of understated authority rather than shouting. Weight 400 is standard for body text, ensuring clarity and readability. The 'ss01' feature provides alternative character forms, and 'tnum' ensures tabular figures align numerically.","sizes":"8px, 9px, 10px, 11px, 12px, 14px, 16px, 18px, 20px, 22px, 26px, 32px, 34px, 44px, 48px, 56px","family":"sohne-var","weight":"300, 400","weights":[300,400],"lineHeight":"0.80, 0.85, 1.00, 1.03, 1.07, 1.10, 1.12, 1.15, 1.20, 1.25, 1.30, 1.33, 1.40, 1.43, 1.45, 1.50","substitute":"system-ui, sans-serif","letterSpacing":"-0.0300em at 56px, -0.0250em at 48px, -0.0090em at 18px","fontFeatureSettings":"\"ss01\" on, \"tnum\""}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.45,"letterSpacing":0.03},{"role":"body","size":14,"lineHeight":1.4,"letterSpacing":0.003},{"role":"subheading","size":18,"lineHeight":1.25,"letterSpacing":-0.009},{"role":"heading-sm","size":22,"lineHeight":1.2,"letterSpacing":-0.01},{"role":"heading","size":32,"lineHeight":1.15,"letterSpacing":-0.02},{"role":"heading-lg","size":44,"lineHeight":1.1,"letterSpacing":-0.025},{"role":"display","size":56,"lineHeight":1.07,"letterSpacing":-0.03}],"spacing":{"radius":{"tags":"4px","cards":"6px","images":"4px","inputs":"4px","buttons":"4px"},"elementGap":"8px","sectionGap":"64px","cardPadding":"12px"},"radius":{"tags":"4px","cards":"6px","images":"4px","inputs":"4px","buttons":"4px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Platinum White","level":0,"purpose":"Primary page background and base canvas."},{"hex":"#f8fafd","name":"Porcelain White","level":1,"purpose":"Slightly elevated secondary surfaces, light card backgrounds."},{"hex":"#e5edf5","name":"Powder Blue","level":2,"purpose":"Backgrounds for alternating sections or distinct content blocks."}]},"guidelines":{"do":["Use Platinum White (#ffffff) as the default page background for most sections.","Apply Deep Violet (#533afd) specifically for primary interactive elements, ensuring strong visual call to action.","Employ sohne-var weight 300 for all display and large heading typography to maintain a refined, impactful presence.","Keep card surfaces subtle, using Powder Blue (#e5edf5) or Porcelain White (#f8fafd) with soft 6px rounded corners.","Utilize -0.0300em letter-spacing for large text (56px) to maintain a cohesive, modern typographic aesthetic.","Implement radial and linear gradients for hero banners and product showcases to add dynamic visual interest without overwhelming the UI.","Maintain a clear elementGap of 8px for logical grouping of related UI elements."],"dont":["Do not use saturated colors for large areas or text unless they are part of a decorative gradient or a specific accent.","Avoid using hard, sharp shadows; prefer soft, diffused shadows like rgba(0, 0, 0, 0.2) 0px 0px 32px 8px for elevation.","Do not introduce new font families; sohne-var is the sole typeface for all typographic needs.","Refrain from using border radii other than 4px and 6px for interactive components and cards, respectively.","Do not use generic blue for links or buttons; Deep Violet (#533afd) is the designated action color.","Avoid high-contrast, bold headlines; the system relies on lighter weights (300, 400) even for large text.","Do not vary line heights significantly from the established typographic scale; ensure dense, compact text blocks for body copy and tighter leads for headlines."]},"components":[{"name":"Primary Filled Button","role":"Main call to action."},{"name":"Ghost Button","role":"Secondary action. Low visual hierarchy."},{"name":"Outlined Button","role":"Tertiary action."},{"name":"Default Card","role":"Content container for features and information."},{"name":"Feature Card","role":"Highlighting key features or product aspects."},{"name":"Primary Navigation Link","role":"Top-level navigation item."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #061b31\nbackground: #ffffff\nborder: #e5edf5\naccent: #8087ff\nprimary action: #533afd (filled action)\n\nExample Component Prompts:\nCreate a hero section: radial-gradient(circle, rgb(247, 45, 243), rgb(83, 58, 253) 33%, rgb(229, 237, 245) 66%) background. Headline 'La infraestructura financiera' at 56px sohne-var weight 300, #061b31, letter-spacing -0.03em. Primary Filled Button 'Empieza ahora' with #533afd background, #ffffff text, 4px radius, 15.5px 24px padding.\n\nCreate a default card: #e5edf5 background, 6px radius, 12px padding. Title 'Acepta pagos' at 22px sohne-var weight 400, #061b31. Body text 'Ofrece servicios financieros' at 14px sohne-var weight 400, #50617a.\n\nCreate an outlined button: transparent background, #533afd text, #b9b9f9 border with 4px radius, 14.5px 24px padding. Label 'Accede con tu cuenta de Google'."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777503329317-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777503329317-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/48e5de76-05d5-4c4e-a269-c7c245b291ec-1777554447238-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/48e5de76-05d5-4c4e-a269-c7c245b291ec-1777554447238-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/48e5de76-05d5-4c4e-a269-c7c245b291ec-1777554447238-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/48e5de76-05d5-4c4e-a269-c7c245b291ec-1777554447238-preview-detail-poster.jpg"},"similarStyleIds":["a76ec6ba-20b3-495c-9d89-1e58281e79e7","707a9081-3d1d-4a0b-b1aa-b58b3fab09af","12255b63-e506-4bc1-a4cd-d05487de32f3","62b22816-2d98-4e98-9c17-bf600ddb2fc8","9501cfdc-3eb3-4b64-90f6-9afdded48945","3e5c272b-8d68-40d8-9726-b4d6914b4b16","b5fdba21-fd4d-427e-b551-1e22c51e42db","75fdb89f-ca64-41b3-af36-7a78bd09448e","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","80d7ef36-ed7e-48bb-b558-f772eb40106f","cbd8a058-6ecb-4f1b-9b5a-2bf2597826ee","1c1d3939-8d82-4907-aa3c-c9b2fcfbab4f","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","9342e89b-c2fe-4acf-9993-53b44e0c13b5","7b083729-e694-4b66-82a3-befb08451722","11cfc460-807b-42c5-b10a-7b042c60f3e8","9fecf7d6-b717-49ca-8edc-b10d6110b21c","be5cf0d7-fc29-4b7f-bf86-f87185b122fc","c14bfde7-6f08-4b54-bd9b-39989d10cfef"],"exports":{"designMdUrl":"/references/refero/48e5de76-05d5-4c4e-a269-c7c245b291ec/design.md","tokensJsonUrl":"/references/refero/48e5de76-05d5-4c4e-a269-c7c245b291ec/tokens.json","tailwindV4Url":"/references/refero/48e5de76-05d5-4c4e-a269-c7c245b291ec/tailwind-v4.css","cssVariablesUrl":"/references/refero/48e5de76-05d5-4c4e-a269-c7c245b291ec/tailwind-v4.css"}}