Stripe

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. 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. 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.