Windsurf

Windsurf operates with a high-contrast, dark-mode scheme, using a deep navy background that evokes a professional, sophisticated environment. A vibrant, almost neon cyan serves as the primary accent, signaling interactive elements and highlighting key information, complemented by a softer magenta for secondary accents. Typography is a blend of impactful, large-scale headlines with subtly tracked small text, creating a dynamic yet precise visual hierarchy. Components are lightweight and often borderless, preferring subtle color shifts and soft corners over heavy shadows or solid fills. Always use Midnight Ink (#011c42) for large background surfaces to maintain the deep, dark theme. Apply Neon Cyan (#34e8bb) consistently as the background for primary call-to-action buttons. Headlines should leverage tomatoGrotesk (weights 300-500) for impactful presence, especially the distinctive light 300 weight at larger sizes. Text against dark backgrounds should primarily use Platinum White (#ffffff) for readability, reserving Slate Text (#696962) for secondary, less prominent text. Utilize Electric Magenta (#fb9ce5) for ghost button borders and decorative elements to provide secondary visual interest without overshadowing the primary cyan. Implement a 2px border radius for all filled buttons and a 8px radius for cards to distinguish interaction elements from content blocks. Ensure generous vertical spacing between sections (64px) to provide ample breathing room between content blocks on the dark canvas. Do not introduce new saturated primary colors; stick to the Neon Cyan and Electric Magenta for brand accents. Avoid heavy drop shadows on individual elements; prefer subtle surface shifts or border accents for depth. Do not use bold weights for tomatoGrotesk headlines; the system relies on lighter weights for its distinctive authority. Refrain from using excessively small text sizes (below 12px) for DM Sans to maintain legibility on the dark background. Do not apply large, rounded corners globally; save 9999px radius primarily for small tags and pills. Avoid dense, unbroken blocks of text; break content with imagery or concise paragraphs to suit the high-contrast display. Do not default to generic monospace fonts; specifically use DM Mono for code-related text to maintain brand consistency.