Cal.com-design-analysis — light theme preview

Cal.com-design-analysis

A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors.

Colors

primary

#111111

primary-active

#242424

primary-disabled

#e5e7eb

ink

#111111

body

#374151

muted

#6b7280

muted-soft

#898989

hairline

#e5e7eb

hairline-soft

#f3f4f6

canvas

#ffffff

surface-soft

#f8f9fa

surface-card

#f5f5f5

surface-strong

#e5e7eb

surface-dark

#101010

surface-dark-elevated

#1a1a1a

on-primary

#ffffff

on-dark

#ffffff

on-dark-soft

#a1a1aa

brand-accent

#3b82f6

success

#10b981

warning

#f59e0b

error

#ef4444

badge-orange

#fb923c

badge-pink

#ec4899

badge-violet

#8b5cf6

badge-emerald

#34d399

Cal.com — theme preview

Build in anydesign language

Build in any
design language