Uniswap

Uniswap's design system feels like a playful, high-energy data interface, grounded by stark neutrals and then splashed with a vibrant, almost neon palette. The soft, blurry background elements provide a sense of atmospheric depth without heavy shadows or complex textures, creating a digital ether. Type is uniformly monochrome, allowing bold, vivid accents to pop purely through color on interactive elements and data visualizations, drawing the eye instantly to critical information and actions. The overall impression is approachable yet cutting-edge, like a friendly gateway to complex financial technology. Prioritize Cloud White (#ffffff) for all main page and card backgrounds to ensure a clean, high-contrast canvas. Use Techno Pink (#ff37c7) exclusively for primary calls-to-action and active states to maintain visual hierarchy and brand recognition. Apply a border-radius of 999999px for all primary and secondary buttons, creating distinct pill shapes. Standardize text colors to Ink Black (#131313) for headings and primary content, Dim Gray (#222222) for secondary, and Ash Gray (#6a6a6a) for tertiary details. Apply the Basel typeface with a global letter-spacing of -0.02em across all text elements to create a characteristic compact, refined look. Maintain 8px as the primary elementGap for horizontal and vertical spacing between related UI elements. Use a default border-radius of 12px for interactive icons and other contained elements, contrasting with the soft card radius. Do not introduce new color hues; leverage the existing vibrant accent palette and neutral scale for new features. Avoid using hard-edged rectangles for interactive elements; all buttons and most content containers should have a significant border radius (12px, 20px, or 999999px). Don't rely on shadows for elevation; instead, use subtle background color changes (e.g., from #ffffff to #f2f2f2) or the blurred background elements for visual depth. Do not use highly saturated colorful backgrounds. The backgrounds should remain neutral, allowing the blurred elements and UI accents to provide color. Avoid decorative typography; all text should use the Basel typeface in its defined weights and sizes. Do not use inconsistent padding for components; adhere to the established spacing scale (e.g., 4px, 8px, 12px, 16px) for interior padding. Never use the browser default link color (#0000ee); all links should be Ink Black (#131313) or a semantic color like Success Green (#0c8911) as context dictates.