Preview image. Unlock full-res
Soft rose + sharp violet — professional warmth.
Whereby blends a soft, friendly aesthetic with crisp, serious typography to create a sense of approachable professionalism. The subtle use of a pale rose background with deep violet accents softens the otherwise monochrome core, making video conferencing feel less sterile. Strategic pops of teal introduce vitality, particularly in areas signaling integration or positive outcomes, while overall structure relies on clean whites and grays, punctuated by precise typographic heirarchy, maintaining an efficient and trustworthy impression.
Use 'Whereby Violet' (#2b189b) exclusively for primary interactive elements, ensuring strong call-to-action visibility.
Apply a 40px border-radius for all buttons, creating a consistent pill-shaped aesthetic.
Employ 'Blush Rose' (#f8dbd5) sparingly for hero sections or key promotional areas to maintain its distinctive warm impact.
Utilize 'Whereby Roslindale Display Condensed Regular' (400 weight) for all key headlines, implementing the negative letter-spacing for large text.
Maintain a clear visual hierarchy by contrasting 'Whereby Roslindale Text Regular' 400 for subheadings with 'Inter' for body text.
Ensure generous vertical spacing of 64px between major sections to provide visual breathing room.
Use 'Integrate Teal' (#006654) only for indicators of success, integration points, or positive attributes.
Do not use highly saturated colors for backgrounds; reserve them for interactive elements or small accents.
Avoid mixing 'Blush Rose' (#f8dbd5) with other chromatic background colors; it should stand as a distinct accent.
Do not use pixel-perfect letter spacing if a font family has specified em values, use those for fidelity.
Do not introduce additional sans-serif fonts; stick to the Inter family for all body and UI text.
Avoid using border-radius values other than 12px, 20px, or 40px, unless for specific small form elements (4px).
Do not apply drop shadows to elements; depth is primarily achieved through background color changes (e.g., 'Whisper Gray').
Do not add additional visual ornamentation or gradients; the design relies on clean surfaces and strong typography.
