Calendly Com

The reference for a calm white-paper SaaS hero that warms up with soft magenta/violet/cyan gradient blobs (#e55cff, #8247f5, #0099ff) layered behind a floating product card, anchored by a heavy navy display headline (#0b3558) and one blue CTA accent (#006bff).

SaaS Product flagship

Design tokens

background

surface

text

textMuted

accent

border

tone1

tone2

display: Geist
body: gilroy
mono

Do / Don't

Reference it for

Two-column hero: oversized navy display headline left (Easy / scheduling / ahead at ~68px), product UI mockup floating right
Decorative gradient blobs (magenta #e55cff, ultraviolet #8247f5, cyan #0099ff) bleeding off-canvas behind the product card to add warmth to an austere white layout
Single functional accent: vivid Signal Blue #006bff reserved only for the primary CTA and interactive states, everything else desaturated
Navy #0b3558 as the headline weight instead of pure black, giving authority without harshness
Provider-branded auth buttons stacked (Sign up with Google on blue, Sign up with Microsoft on navy) with an OR divider and a low-commitment email link beneath
Floating product card with 16px radius and a soft blue-grey shadow (rgba(71,103,136,...) multi-layer) showing the actual booking UI as proof
4px button radius and hairline borders (#d4e0ed) that read precise rather than playful
Social-proof logo wall at the foot of the hero (Lyft, L'Oreal, Zendesk, Dropbox) in flat mono grey

Do not copy

The Calendly wordmark and the circular C calendar logo
The exact pink-violet-cyan blob arrangement (it is a recognisable Calendly signature)
Gilroy as the literal typeface unless licensed; pick a geometric sans that fits the brand
The Google/Microsoft branded sign-up buttons verbatim (those carry each vendor's brand)
The '20 million professionals' / '#1 scheduling tool' / '100,000 organisations' specific claims
The ACME Inc booking-card mockup contents