Iris Violet
#2b189bViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Secure
whereby.com
Website preview
The design language
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.
Color palette
brand
Indigo Depth
#211375Hover and pressed state of the Iris Violet button; deeper shift of the same hue for state feedback
accent
Pale Blush
#f8dbd5Warm section background (hero, accent bands) — the signature warmth of the brand, not a tint of any other color
Forest Teal
#006654Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
neutral
Ink Black
#000000Primary text, nav links, icons, body copy — near-absolute dominance means the system runs on contrast, not on color
Paper White
#ffffffPage background and card surfaces; the default canvas everything sits on
Mist Gray
#f4f4f4Soft surface for secondary cards and section bands; lifts content off the white canvas without introducing a new hue
Faded Lilac
#ccccccDisabled or muted control surface — barely visible, intentionally recessive
Typography
Type scale
Minor Third (1.2) · 20px basedisplay-xl
120px · 400 · 1.15The quick brown fox jumps
display
80px · 400 · 1.15The quick brown fox jumps
heading-lg
48px · 400 · 1.15The quick brown fox jumps
heading
40px · 400 · 1.15The quick brown fox jumps
text-28
28px · 400 · 1.25The quick brown fox jumps
heading-sm
24px · 400 · 1.25 · -0.67px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.5 · -0.29px trackingThe quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Whereby Roslindale Display Condensed
- Weights
- 400
- Sizes
- 40px, 48px, 80px, 120px
- Line height
- 1.15–1.25
- Fallback
- Playfair Display, DM Serif Display, or any high-contrast condensed serif
Display headlines (hero, section titles). Custom condensed serif used at 80–120px is a signature choice — most SaaS brands default to sans-serif display; this serif elevates copy to editorial weight
Additional typeface
Whereby Roslindale Text
- Weights
- 400
- Sizes
- 18px, 24px, 28px
- Line height
- 1.25
- Fallback
- Source Serif Pro, Lora
Card titles and mid-size headings; same family as display but in a text cut with more comfortable proportions for shorter lines
Additional typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 14px, 16px, 18px
- Line height
- 1.50
- Letter spacing
- -0.016em at 18px body, -0.028em at 24px+ headings
- Fallback
- Inter (same), or system-ui as fallback
- Features
- "ss01" on, "cv11" on
Body copy, navigation, button labels, tags. Weight 500 for nav and labels, 600 for emphasized UI text. Negative tracking tightens Inter at 18px to match the editorial density of the serif
Additional typeface
System Sans
- Weights
- 400
- Line height
- 1.20
- Fallback
- system-ui
Fallback rendering layer; not used in primary composition but extracted as the underlying stack
Additional typeface
Inter-Medium
- Weights
- 500
- Sizes
- 12px, 16px, 18px
- Line height
- 1, 1.5
Inter-Medium — detected in extracted data but not described by AI
Additional typeface
Inter-SemiBold
- Weights
- 600
- Sizes
- 14px
- Line height
- 1.25
Inter-SemiBold — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 48-80px
- Card padding
- 24-40px
- Element gap
- 8-16px
Border radius
cards
12pxsmall
4pximages
12pxbuttons
40pxSpacing scale
2px4px8px10px16px20px24px32px40px48px56px64px80px88px96px160pxGuidelines
Do
- Use Roslindale Display Condensed for all section-level headlines at 40px or larger; reserve the wider Roslindale Text cut for 18-28px card titles.
- Keep Inter at weights 400/500/600 only; do not introduce bold or black weights — the brand trusts the serif to carry emphasis.
- Use #2b189b exclusively for filled CTAs and the active state of the Log in outline button. Never use it for body text or decorative fills.
- Apply the 40px pill radius to every button, regardless of size, to maintain the signature soft-cornered action shape.
- Lean on #f8dbd5 blush for hero and section accent bands at full-bleed width, then return to #ffffff for content-heavy sections.
- Pair every photograph with a 12px radius and the 0 8px 24px rgba(0,0,0,0.08) shadow — never crop images to sharp corners.
- Use the '+' glyph in #2b189b to lead feature list items, keeping list markers on-brand rather than defaulting to bullet dots.
Don’t
- Do not use a sans-serif font for headlines — the serif is the brand's most distinctive choice and removing it collapses the editorial feel.
- Do not introduce additional accent colors (green, blue, red) as functional UI tokens; teal #006654 is decorative-only and must not appear on buttons or status badges.
- Do not add heavy drop shadows to text cards or nav — elevation is reserved for photos and product mockups only.
- Do not flatten the button radius to 4px or 8px; the 40px pill is a signature and must be consistent across all action variants.
- Do not use #000000 for filled button backgrounds — buttons read as interactive only because they are colored, not dark.
- Do not stretch Roslindale Display below 40px or above 120px; outside that range the condensed proportions break.
- Do not stack multiple saturated brand colors in the same component; the system is built on one strong violet plus warmth, not polychrome.
Components
Primary Action Button
Filled CTA for the main conversion on a screen (Get started, Explore Meetings, Learn more)Filled with #2b189b, white text at 16px Inter Medium. Pill radius of 40px (full rounding). Padding 14px 24px. Subtle hover transition to #211375. No border, no shadow — the color and shape do all the work.
Outline Action Button
Secondary CTA used in nav (Log in) when the primary action is filled1px solid #2b189b border, transparent fill, #2b189b text at 16px Inter Medium. Same 40px pill radius. Becomes a soft #2b189b wash on hover.
Text Nav Link
Top-level navigation items: Products, Pricing, Developers, ResourcesInter 16px Medium, #000000. No underline. Small chevron caret in #000000 for dropdown triggers. 8px vertical padding inside a transparent hit area.
Trust Badge Strip
Horizontal row of partner/company logos below the heroCentered group on white, preceded by a small Inter caption 'Trusted by leading companies like' in #000000 at 14px. Logos render at their native color, separated by 48-64px gaps. No background card or border.
Use Case Pill Tag
Small label above card titles (e.g. 'meetings', '< > embedded')Outlined pill: 1px solid #cccccc, 12px Inter Medium #000000, padding 4px 10px, radius 4px. Sits flush-left above each card heading.
Product Feature Card
Two-column product showcase: browser mockup on top, title and CTA belowTransparent background on white canvas. Browser mockup sits in a 12px-radius container with a soft shadow. Title in Roslindale Text 28px #000000. Feature list uses '+' glyph in #2b189b before each Inter 16px line. Filled violet CTA at the bottom of the card.
Use Case Carousel Card
Centered card for vertical-specific messaging (Telehealth, Education, etc.)Full-width #f4f4f4 card with 20px radius. Overlapping circular avatar group on the top edge. Small Inter caption ('Whereby for') above a Roslindale Display heading (48-80px). Filled violet Learn more button centered below.
Hero Section
First viewport: brand promise + primary CTA + supporting photographFull-bleed #f8dbd5 background. Two-column layout at 1200px max-width: left column holds the Roslindale Display headline (48-80px) and body copy, right column holds a lifestyle photo inside a 12px-radius container with a soft drop shadow. Photo bleeds 24px above and below the section baseline.
Top Navigation
Persistent header across all pagesWhite background, no border or shadow. 80px tall. Wordmark left (Whereby in serif), nav links centered-left, two buttons right (Log in outline, Sign up filled). Bottom hairline of #f4f4f4 separates from content.
Lifestyle Photograph
Hero and section imagery showing real people in real spacesWarm-toned, natural light, candid framing. Subjects are typically mid-shot, working on a laptop in a home or studio setting. Rounded to 12px, with a subtle 0 8px 24px rgba(0,0,0,0.08) shadow.
Feature List Item
Compact text row inside product cardsLeading '+' glyph in #2b189b at 16px Inter. Text in Inter 16px #000000. 8-12px vertical spacing between items.
Browser Mockup Container
Framed screenshot of the product UI used in feature cards12px radius, thin 1px #f4f4f4 border, 0 12px 32px rgba(0,0,0,0.06) shadow. Traffic-light dots in the top-left corner over a white chrome bar.
Surfaces & elevation
Level 0
Paper White
#ffffffDefault page canvas
Level 1
Pale Blush
#f8dbd5Warm hero and accent section background
Level 2
Mist Gray
#f4f4f4Secondary card and band surface
Level 3
Paper White on Mist
#ffffffElevated product card and modal surface
The system avoids drop shadows on text-bearing cards and nav. Elevation is reserved for two roles: framing photography and framing the product UI inside browser chrome. This keeps the editorial pages feeling flat and considered, with depth appearing only where a real object (a photo, a screenshot) is being presented.
Lifestyle Photograph
0 8px 24px rgba(0,0,0,0.08)
Browser Mockup Container
0 12px 32px rgba(0,0,0,0.06)
Use Case Carousel Card
none (relies on #f4f4f4 surface contrast, not shadow)
Layout & imagery
Layout
Page is centered, max-width 1200px with generous outer margins. The hero is a split layout: text-left / image-right, on a full-bleed blush background. Below the hero, a white trust-badge strip runs edge-to-edge. Subsequent sections alternate between white and #f4f4f4 surface bands, each holding centered content blocks. Product features use a 2-column card grid; use-case messaging uses a single centered carousel card with side-arrows. Vertical rhythm is comfortable: 48-80px between sections, 24-40px inside cards. Navigation is a single white top bar, sticky on scroll, with the wordmark left, links center-left, and two right-aligned action buttons. No sidebar, no mega-menu visible in the hero state — dropdowns are simple flyout panels.
Imagery
Photography is the dominant visual asset. All imagery is lifestyle photography: real people working on laptops in warm-lit homes, kitchens, and studios. No stock-photo stiffness — framing is candid, mid-shot, often with plants or domestic objects in the background. Color treatment is natural, slightly warm, never desaturated or duotone. The only non-photographic visual is the browser-mocked product UI (screenshots of video calls in green and purple chrome). Icons in the UI are line-style at ~1.5px stroke, monochrome black, no fill. Photography occupies roughly 35-40% of the page area, concentrated in the hero and product feature cards.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - secondary surface: #f4f4f4 - hero/accent surface: #f8dbd5 - primary action: no distinct CTA color - accent: #006654 (decorative only) **Example Component Prompts** 1. **Hero Section**: Full-bleed #f8dbd5 background. Two-column at 1200px max-width. Left column: Roslindale Display Condensed 56px #000000 headline with -0.028em tracking, Inter 18px #000000 subtext, filled #2b189b pill button (40px radius, 14px 24px padding, white Inter 16px Medium label). Right column: lifestyle photo in a 12px-radius container with shadow 0 8px 24px rgba(0,0,0,0.08). 2. **Product Feature Card**: White canvas, no card background. Browser mockup at top inside a 12px-radius frame with 1px #f4f4f4 border and 0 12px 32px rgba(0,0,0,0.06) shadow. Outlined pill tag above title: 1px #cccccc, 12px Inter Medium, 4px radius. Title in Roslindale Text 28px #000000. Feature list with '+' in #2b189b, Inter 16px #000000 lines, 12px vertical gap. Filled #2b189b pill button below. 3. **Use Case Carousel Card**: #f4f4f4 background, 20px radius, 1200px wide, centered. Overlapping circular avatar row on the top edge. Caption 'Whereby for' in Inter 14px Medium #000000. Roslindale Display Condensed 64px #000000 for the vertical name. Body in Inter 18px #000000. Filled #2b189b pill button centered. 4. **Top Navigation**: White background, 80px height, no shadow, 1px #f4f4f4 bottom border. Left: wordmark in Roslindale. Center-left: Inter 16px Medium #000000 nav links with 32px gap. Right: outline #2b189b Log in button (1px border, 40px radius), then filled #2b189b Sign up button (40px radius, white text). 5. **Trust Badge Strip**: White background, centered. Caption 'Trusted by leading companies like' in Inter 14px #000000, 32px below. Row of 6 company logos at native colors, 48px gaps between, 24px margin top.
Similar brands
Notion
Same warm, editorial SaaS approach with a single confident accent color and comfortable white-canvas density
Loom
Lifestyle photography of people on laptops in warm-lit homes, paired with clean sans body and minimal UI chrome
Linear
One saturated brand color used sparingly on CTAs and active states, with everything else monochrome and editorial
Arc
Browser-product brand that uses photography and soft color washes to humanize a tech product
Calendly
Friendly SaaS with a single violet/indigo accent, comfortable spacing, and a tone that reads warmer than its category
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
