Screenshot of Crisp

Crisp

crisp.chat

The reference for AI customer-support brand — bespoke Crisp Aeonik Pro, real chat dashboard hero, link-blue underline emphasis, dark navy announcement banner promoting AI agent.

Saas Product Customer Support Chat strong

Design tokens

white
paleSlate
slate71
slate38
muted
black
royalBlue
linkBlue
shadowOverlay
white90
display
'Crisp Aeonik Pro Bold', sans-serif (paid bespoke Aeonik)
displayMedium
'Crisp Aeonik Pro Medium', sans-serif
body
'Crisp Aeonik Pro Regular', sans-serif
mono
(none)

Do / Don't

Reference it for

  • Bespoke Crisp Aeonik Pro (Regular + Bold + Medium as separate font files)
  • Royal blue #1972f5 CTA on white with link-blue #0000ee for inline emphasis
  • Underlined emphasis phrases in H1 ("customer experience" and "team & customers" with classic blue underlines)
  • Dark navy #030d26 pre-nav banner promoting "NEW" feature with sparkle/asterisk icon
  • Real Crisp dashboard mockup in hero at near-full fidelity (conversations list + chat thread + user profile)
  • "hugo" AI agent sub-brand with custom asterisk/sparkle logo
  • 24 directional fade keyframes (fadeInUp/Down/Left/Right + fadeOut variants + zoomIn + bounceIn)
  • 21-step granular type scale (11-48px including sub-pixel sizes)

Do not copy

  • The Crisp Aeonik Pro font licence (bespoke Aeonik variants)
  • The Crisp logo
  • The "Hugo" AI agent branding + sparkle icon
  • The "Augment your customer experience" copy
  • The Beth Johnson user profile in dashboard mockup
  • The royal blue #1972f5 exact hue
  • The Crisp chat widget at bottom-right (live chat sticky)

Signature moves

royal-blue CTA with link-blue underline emphasis in the H1

a royal-blue (#1972f5) CTA on white pairs with classic link-blue (#0000ee) underlines on emphasis phrases inside the H1 ('customer experience', 'team & customers'), making the headline itself interactive-looking.

real dashboard mockup in the hero

a near-full-fidelity product dashboard (conversations list + chat thread + user profile) sits in the hero as proof, with a 12px workhorse radius (57 hits) framing UI.

dark-navy pre-nav announcement banner

a dark-navy (#030d26) banner above the nav promotes a 'NEW' feature with a sparkle/asterisk icon, plus playful arrival animations (bounceIn, zoomIn) drawn from 24 directional fade keyframes.

Related references

Screenshot of Method

Method

niche

Saas Product

The reference for QuickBooks-niche B2B CRM — clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.
Screenshot of Antara Spa

Antara Spa

strong

Beauty

a Malaysian day spa that sells calm with one oversized Fraunces wordmark on a sun-warmed photographic hero, an earthy sand-brown-sage palette, and slow GSAP-and-Lenis scroll, the whole page tuned to feel like exhaling.
Screenshot of Beehiiv

Beehiiv

strong

Marketing Platform

The reference for newsletter / creator-platform brands with all-caps section H2 discipline — dark navy + magenta accent + ClashGrotesk display, real publisher logos from TIME / Newsweek / Adobe.
Screenshot of Bench Accounting

Bench Accounting

strong

Professional Services

a small-business bookkeeping service that builds trust with a deep-navy hero, friendly Circular Std type, a soft blue-teal palette and a product mock-up showing real reports and chat support, calm, credible, conversion-focused.