Cal.com

Overview

Cal.com is a professional scheduling platform that transforms meeting coordination into a seamless, intuitive experience for individuals, businesses, and developers. The design language embodies "Functional Minimalism with Precision Accents"—a philosophy that prioritizes clarity and usability while introducing strategic pops of electric blue (#0099ff) to guide user attention toward critical actions. The brand serves knowledge workers, service providers, and technical teams who demand reliability and customization without sacrificing elegance. The interface evokes a sense of calm efficiency: clean white surfaces (rgb(244, 244, 244)), generous whitespace, and a restrained color palette that lets content and functionality breathe. Voice: direct, confident, and human. Cal.com speaks in active verbs and concrete benefits. Example: "Schedule your next meeting in seconds—no back-and-forth emails required."

Colors

The color system balances professional neutrality with purposeful accent colors. Primary (#0099ff) is the signature interaction color, deployed on all primary CTAs, active states, and focus indicators—it commands attention without aggression. Secondary (#6349ea, a sophisticated purple) supports premium features and secondary actions, creating visual hierarchy without competing for dominance. Tertiary (#19a874, a muted teal) is reserved for success states, confirmations, and positive feedback. The surface stack anchors the design: surface-bright (#ffffff) for primary content areas, surface (#f4f4f4) for the page background, and surface-container (#e1e2e3) for subtle section separation. On-surface (#242424) provides text contrast at WCAG AAA levels (21:1 ratio). Error (#ef4444) is used spari

Typography

The type system pairs Cal Sans (a geometric, modern display font) for headlines with Manrope (a humanist sans-serif) for body text, creating visual distinction while maintaining readability. Display (64px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence. Headline-lg (40px, 600 weight) breaks major sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 weight, 24px line-height) handles standard content. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text and form labels, ensuring legibility at small sizes. All headlines use -0.02em to -0.01em negative letter-spacing to tighten the lette

Layout

Cal.com uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The page rhythm is governed by a semantic spacing scale: gutter (24px) for horizontal padding on containers, lg (40px) for section separation, md (24px) for component-level spacing, and sm (12px) for internal element gaps. The hero section spans full-width with 64px top/bottom padding, creating breathing room around the headline and primary CTA. Cards and content blocks use md (24px) padding internally and are separated by lg (40px) vertical gaps. The layout prioritizes whitespace: no element should feel cramped. Container max-width is 1280px to prevent line lengths from exceeding 75 characters on large displays, supporting cognitive load reduction. Responsive breakpoints follow a mobile-first approac

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening or borders alone. The elevation system defines three levels: sm (0 1px 5px rgba(36, 36, 36, 0.07)) for resting cards and input fields, md (0 4px 8px rgba(36, 36, 36, 0.08)) for hover states and secondary containers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Shadows use a dark gray (rgba(36, 36, 36, ...)) rather than pure black to maintain warmth and avoid harsh contrast. Interactive elements (buttons, cards) transition between elevation levels on hover: a card at rest uses sm, then shif

Shapes

The shape philosophy is "Refined Approachability"—rounded corners are used consistently but never excessively. Buttons and primary CTAs use full (9999px) border-radius for a pill shape, signaling friendliness and forward momentum. Cards and containers use lg (1rem / 16px) for a modern, approachable feel that avoids the sterility of sharp corners. Input fields and secondary UI elements use DEFAULT (0.5rem / 8px) for a balanced, professional appearance. Modals and overlays use xl (1.5rem / 24px) to create visual distinction from standard cards. The rationale: full-radius buttons feel inviting an

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the signature blue (#0099ff) background with white text, full border-radius (9999px), and 12px 24px padding for a 48px total height. On hover, the background darkens to #0080cc with a soft blue glow (box-shadow: 0 4px 12px rgba(0, 153, 255, 0.2)) and a 200ms transition. Active state (#0066cc) indicates pressed state. Secondary buttons (button-secondary) use a light gray background ({colors.surface-container}), a 1px outline in {colors.outline-variant}, and the same full radius. Ghost buttons (button-ghost) have transparent backgrounds with blue text, useful for tertiary actions. All buttons use label-md typography (14px, 600 weight) for consistent visual weight.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for primary CTAs, focus states, and active indicators—never for decorative elements or backgrounds.
• Do maintain at least 24px of whitespace between major sections and 12px between related components to prevent visual clutter.
• Do apply the full (9999px) border-radius to all buttons to signal interactivity and maintain consistency across the interface.
• Do use Cal Sans for headlines and Manrope for body text; never mix serif fonts or use system fonts in place of the defined typefaces.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.2, 0, 0.38, 0.9) for a responsive feel.
• Do apply the sm shadow (0 1px 5px rgba(36, 36, 36, 0.07)) to cards at rest and elevate to md on hover—never use borders alone for depth.

**Don't**

• Don't use secondary (#6349ea) or tertiary (#19a874) as primary action colors; reserve them for supporting features and status indicators.
• Don't apply rounded corners smaller than DEFAULT (8px) to interactive elements—users need clear affordance cues.
• Don't mix elevation levels within a single component family (e.g., some cards with lg shadow, others with sm)—consistency builds trust.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#242424) for dark text and surface-bright (#ffffff) for light backgrounds to reduce eye strain.
• Don't apply multiple shadows to a single element; use the elevation scale (sm, md, lg) as defined.
• Don't override the typography scale for stylistic reasons; if a size isn't available, add it to the system rather than hardcoding values.