Secure. A warm, editorial take on video calling where serif headlines read like a thoughtful magazine spread rather than a tech product page.
- SaaS
- Light theme
- 8 colors
- 6 typefaces
Whereby presents a warm, humanized SaaS aesthetic that feels more like a thoughtful European brand than a tech tool. The system is defined by a custom condensed serif (Roslindale) used for display headlines, giving every section an editorial, considered feel — paired with Inter for body and UI to keep the interface functional and calm. A single deep violet (#2b189b) carries brand intent on CTAs and active states, while a warm blush (#f8dbd5) provides section-level atmosphere without competing with content. The visual rhythm alternates between full-bleed blush hero, white content sections, and soft gray cards — creating a gentle cadence rather than a stark corporate grid. Photography is warm and lifestyle-driven (people on laptops in real homes), and the overall feeling is unhurried, private, and European.
Secure design system
Brand2
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Hover and pressed state of the Iris Violet button; deeper shift of the same hue for state feedback
Accent2
Warm section background (hero, accent bands) — the signature warmth of the brand, not a tint of any other color
Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Neutrals4
Primary text, nav links, icons, body copy — near-absolute dominance means the system runs on contrast, not on color
Disabled or muted control surface — barely visible, intentionally recessive
Soft surface for secondary cards and section bands; lifts content off the white canvas without introducing a new hue
Page background and card surfaces; the default canvas everything sits on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper White on Iris Violet
12.30 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
