# Cal · Design system migration spec

> Source: https://cal.com  ·  Curated by OpenDesign  ·  en

> Cal.com is a prime example of a modern SaaS product that uses restrained, high-contrast design to convey professional reliability and developer-focused precision.

## 1. Identity DNA

Cal's design language is built on the principle of functional clarity, much like a professional Swiss railway clock—where every element serves a precise, universally legible purpose. The system prioritizes developer utility and clean interfaces through a disciplined, monochrome aesthetic.

**One-liner:** A fully customizable, developer-friendly scheduling software for individuals and businesses.
**Keywords:** scheduling · calendar · meetings · productivity · customizable
**Analogy:** A clean, modern Swiss railway timetable translated into a digital scheduling platform.

## 2. Color

The color system is a high-contrast monochrome palette, using black, white, and soft grays to create clean, focused surfaces. This restrained approach eliminates visual noise, directing attention entirely to content and interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F4` | card background |
| `--bg-quiet` | `#E1E2E3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#292929` | secondary text |
| `--muted` | `#898989` | placeholder |
| `--muted-soft` | `#D3D3D3` | weak hint |
| `--line` | `rgba(0,0,0,0.16)` | divider |

**Color principle:** Monochromatic with high contrast. Pure black on white with neutral grays for hierarchy and structure.

The guiding principle is clarity through contrast, where every value in the gray scale has a defined role in the interface hierarchy.

## 3. Typography

Typography employs a clean, legible sans-serif typeface, establishing a voice that is professional and direct. The scale is structured for clear information hierarchy, from main headlines down to supporting text.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.05 | 500 | -0.2px | Hero headlines and section headings |
| h2 | 32px | 1.2 | 600 | -0.1px | Section subheads and card titles |
| body | 16px | 1.5 | 400 | 0 | Paragraphs and general UI text |
| caption | 12px | 1.5 | 400 | 0 | Small labels, metadata, and calendar day numbers |

**Type rules:**
- Headlines use a tight letter-spacing of -0.2px
- Body text uses a comfortable 1.5 line height
- Buttons and navigation use 500 weight for emphasis
- Calendar days and small labels use 400 weight

## 4. Spacing

Spatial rhythm is governed by a strict 4px base unit, ensuring consistent and predictable vertical and horizontal alignment throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid ensures tight alignment in UI components and relaxed whitespace in content sections.

## 5. Surfaces

Surfaces are defined by subtle depth and minimal borders, using soft shadows and thin, semi-transparent lines to create layered hierarchy without heaviness. The treatment maintains the clean, flat aesthetic while providing necessary visual separation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(34, 42, 53, 0.08) 0px 0px 0px 1px
  - rgba(34, 42, 53, 0.05) 0px 4px 8px 0px
  - rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset
- **Borders:** Subtle 1px solid borders using rgba(0,0,0,0.16) or light grays for card edges.

## 6. Layout

The layout skeleton is a structured 12-column grid with a 24px gutter, providing a robust foundation for component placement. This grid enables the generous whitespace and clear hierarchy that define the system's clean, uncluttered character.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A centered container layout with a large hero section featuring a side-by-side split between text and a UI mockup.

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration, with durations scaled to the significance of the action. Easing curves are consistent and subtle, ensuring transitions feel smooth and purposeful, reinforcing the system's precise nature.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Subtle hover transitions on buttons and links
  - Smooth layout shifts on interactive calendar elements

- **Hover:** Background color shift or subtle elevation change on buttons and interactive elements.
- **Click:** Immediate visual feedback through color change or focus ring.
- **Transition:** All interactive states use a smooth transition over 220ms.
- **Keyboard:** Standard focus management with visible focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, clear, and direct, focusing on functionality and ease of use. It avoids casual language and jargon, speaking with the straightforward utility of the interface itself.

- **Tone:** Professional, clear, and direct. Focuses on efficiency and customization.
- **Headline style:** Bold, concise statements that lead with a value proposition.
- **CTA style:** Action-oriented and straightforward (e.g., 'Sign up with Google', 'Get started').
- **Avoid:** Using overly technical jargon in headlines / Employing loud or neon accent colors / Relying on decorative imagery over product mockups

### Don'ts
- ❌ don't use high-saturation primary colors — screenshot shows a strictly monochromatic black-and-white palette.
- ❌ don't use decorative serif fonts — screenshot shows clean, geometric sans-serif typography throughout.
- ❌ don't add heavy drop shadows to cards — screenshot shows very subtle, almost flat elevation using light borders.
- ❌ don't use sharp corners on buttons — screenshot shows consistently rounded or pill-shaped button designs.
- ❌ don't crowd the layout with too many elements — screenshot shows generous whitespace and a focused content hierarchy.
- ❌ don't use all-caps for body text — screenshot shows mixed-case text for better readability.
- ❌ don't rely on icons without labels — screenshot shows clear, descriptive text accompanying every UI element.

The system deliberately excludes bright accents, decorative typography, complex gradients, heavy shadows, playful shapes, and cluttered layouts, enforcing its monochrome, functional discipline.

## System Prompt (paste into AI tool)

```
Cal.com is a high-end, customizable scheduling software platform. Its design DNA is built on a clean, monochromatic palette of black, white, and neutral grays, using geometric sans-serif fonts for display and humanist sans-serif for body text. The layout is spacious and structured, featuring a 12-column grid and a 4px base for spacing. Key components include pill-shaped buttons and subtle cards that showcase product functionality. Critical constraints: avoid any vibrant accent colors, do not use serif fonts, and maintain a high-contrast, professional aesthetic. Avoid cluttered layouts; prioritize clarity and whitespace. The overall feel is premium and developer-focused, emphasizing reliability and precision.
```
