Deta Surf

Deta Surf uses a refreshing, sky-inspired aesthetic, where a vivid blue gradient forms the primary background, evoking expanse and clarity. UI elements are typically white, rounded cards, often with subtle shadows that provide a soft lift from the blue canvas. Typography blends elegant, traditional serifs for headlines with clean, modern sans-serifs for body text, creating a contrast that feels both authoritative and accessible. Interactive elements feature a bright, vivid blue, acting as functional punctuation against the otherwise serene palette. Use Sky Canvas (#a8d5ff) with its default linear gradient for primary backgrounds to establish an expansive feel. Employ Cloud White (#ffffff) for all interactive cards and input surfaces to create bright, readable content blocks. Apply a 9999px border-radius to all buttons for a friendly, pill-shaped aesthetic. Set primary action buttons with Deep Space Blue (#009afc) background and Cloud White (#ffffff) text to guide user interaction. Maintain a clear visual hierarchy by using Gambarino for headlines (sizes 20px-60px) and Switzer for body text (sizes 12px-18px). Use a subtle shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px for cards to provide minimal depth without visual heaviness. Leverage Faint Blue Border (#cfe9fd) for ghost button borders or secondary outlines to soften interactive elements. Avoid sharp corners; all UI elements should have a radius of at least 8px, with interactive elements preferring 16.2px or 9999px. Do not introduce strong, dark backgrounds other than the hero gradient; maintain a predominantly light aesthetic for content sections. Refrain from using generic gray shadows for interactive elements; instead, use Ocean Shadow (#006dc8) for blue-tinted elevation. Do not apply excessive letter-spacing to body text; maintain the subtle negative tracking specified in Switzer and Gambarino for dense readability. Avoid using multiple vivid accent colors; Deep Space Blue (#009afc) should be the primary chromatic accent for user interaction. Do not deviate from the specified font families; Switzer and Gambarino are key to the brand's typographic identity. Do not use transparent backgrounds for text-heavy content cards; always provide a solid Cloud White or Fog Gray background for readability.