Swap

Swap's design system evokes an 'AI as a service' aesthetic with a bright, spacious, and slightly austere canvas adorned with precise, geometric forms. Typography is a key differentiator: elegant, thin headings juxtapose with a workhorse sans-serif for body text, creating a contrast of sophistication and clarity. A prominent, vibrant green gradient is used sparingly as a functional accent, making interactive elements feel 'charged'. Surfaces are predominantly clean white, occasionally featuring subtle shadows for a light sense of elevation or rich, deep-toned section cards. Components are generally compact and direct, prioritizing information delivery over heavy ornamentation. Use 'Canvas White' (#ffffff) as the primary background for most sections. Apply 'Text Black' (#000000) for all primary body text and headings. Emphasize primary calls-to-action with the 'Pill Accent Button' featuring 'Mint Accent' (#a3fda7) background. Use 'secondaryFont' at weight 100 or 300 for all large display headlines to maintain a refined, light aesthetic. Apply a 24px border-radius to all card components (Card with Shadow, Dark Content Card, Accent Gradient Card). Maintain generous vertical spacing between major sections, utilizing the 'sectionGap' of 30px. Utilize the 'Agentic Gradient' only for hero text or distinct graphical elements, never for backgrounds or small UI details. Avoid heavy shadows; use 'rgba(0, 0, 0, 0.09) 0px 0px 28px 0px' only for intentionally elevated cards. Do not use highly saturated colors for general UI elements; reserve 'Mint Accent' (#a3fda7) for primary actions and highlights. Never use bold (weight 700) from 'secondaryFont' for headlines; its characteristic is its lightness. Do not add additional decorative borders or heavy backgrounds to input fields, they should remain minimal and pill-shaped. Avoid tightly packed content; ensure a minimum 'elementGap' of 8px between discrete UI elements. Do not use generic square buttons; all distinct interactive buttons should leverage the 200px (full pill) or 1.67772e+07px (rounded pill) radius.