---
name: Cal
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#292929"
  neutral: "#898989"
  bg-soft: "#F4F4F4"
  bg-quiet: "#E1E2E3"
  muted-soft: "#D3D3D3"
  line: "rgba(0,0,0,0.16)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-0.2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A fully customizable, developer-friendly scheduling software for individuals and businesses.

*A clean, modern Swiss railway timetable translated into a digital scheduling platform.*

## Colors

Monochromatic with high contrast. Pure black on white with neutral grays for hierarchy and structure.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#292929`)** — uses `ink-soft` token
- **Muted (`#898989`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.16)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* A consistent 4px base grid ensures tight alignment in UI components and relaxed whitespace in content sections.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped or rounded-rect buttons with solid black fill for primary actions and white/transparent fill for secondary.
- **card:** White cards with subtle shadows or light borders, featuring calendar UIs or integration grids.
- **chip:** Small rounded pills for tags like 'App store' or 'Cal.com launches v6.5'.
- **input:** Clean text inputs with rounded borders and subtle shadow, often part of booking widgets.
- **hero:** A prominent top section with large typography on the left and a detailed scheduling widget mockup on the right.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```