Design System: Cal.com

1. Visual Theme & Atmosphere

Cal.com's website is a masterclass in monochromatic restraint a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (#242424), mid-gray secondary text (#898989), and pure white surfaces. Color is treated as a foreign substance when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.

Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.

The elevation system is notably sophisticated for a minimal site 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (0px 0px 0px 1px), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.

Key Characteristics:

• Purely grayscale brand palette no brand colors, boldness through monochrome
• Cal Sans custom geometric display font with extremely tight default letter-spacing
• Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
• Cal Sans for headings, Inter for body clean typographic division
• Wide border-radius scale from 2px to 9999px (pill) versatile rounding
• White canvas with near-black (#242424) text maximum contrast, zero decoration
• Product screenshots as primary visual content the scheduling UI sells itself
• Built on Framer platform