Preview image. Unlock full-res
Shifting Ocean depths
This design system presents a balanced aesthetic, contrasting a deeply saturated, cool background with crisp, achromatic elements. A subtle gradient on the main page background creates depth and shifts from a light, airy teal to a profound navy, grounding the content. Interactive elements and badges introduce small, vibrant accents that pop against the otherwise business-like palette, suggesting a service that is both reliable and user-friendly. The overall impression is one of trustworthiness and clarity.
Prioritize Onyx (#111111) for all main text and elements on light backgrounds for optimal contrast against White Smoke (#ffffff) or Sea Mist (#d8efef).
Use Sea Mist (#d8efef) as a default background for secondary sections to create a gentle contrast with the brand's primary Deep Ocean (#01122c) background.
Apply 20.8px border-radius to card-like containers, and 6px border-radius specifically for buttons, and 4px for badges.
Employ the gdsherpa typeface for all text elements. Leverage its diverse weight range (400-850) to establish clear hierarchy.
Maintain a clear visual hierarchy by utilizing Deep Ocean (#01122c) for prominent hero backgrounds and contrasting it with lighter text like White Smoke for readability.
Use Link Teal (#00a4a6) exclusively for interactive text links and phone numbers to clearly differentiate them from static content.
Do not introduce new primary background colors; stick to the brand's gradient, Deep Ocean (#01122c), and Sea Mist (#d8efef).
Avoid using highly saturated colors for large text blocks; reserve them for accents like badges or interactive links.
Do not deviate from the established border-radius values (20.8px for cards, 6px for buttons, 4px for badges) to maintain visual consistency.
Refrain from using gdsherpa in weights outside of the specified range (400-850) for any content.
Do not use White Smoke (#ffffff) text on Sea Mist (#d8efef) backgrounds, as the contrast will be insufficient.
Do not use Link Teal (#00a4a6) for non-interactive text; its purpose is to guide user interaction.
