---
version: alpha
name: Cal.com
description: "Paper-grey calm, black ink, and one midnight-indigo room down the hall"
colors:
  on-surface-variant: "#898989"
  on-surface: "#242424"
  outline: "rgba(20, 20, 20, 0.15)"
  surface: "rgba(255, 255, 255, 0.7)"
  primary: "#0099FF"
  paper: "#F4F4F4"
  panel: "#FCFCFC"
  card: "#FFFFFF"
  ink-soft: "#292929"
  link-ink: "#111111"
  slot-grey: "#E5E7EB"
  selected-slate: "#374151"
  info-wash: "#EFF6FE"
  midnight: "#0D0C27"
  night-card: "#15142E"
  night-bubble: "#1D1C3C"
  violet: "#6349EA"
  violet-light: "#875FE0"
typography:
  display:
    fontFamily: system-ui
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: 0em
  display-alt:
    fontFamily: system-ui
    fontSize: 57px
    fontWeight: 400
    lineHeight: 62.7px
    letterSpacing: 0em
  section-heading:
    fontFamily: system-ui
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52.8px
    letterSpacing: 0em
  subsection:
    fontFamily: system-ui
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: 0em
  pull-quote:
    fontFamily: system-ui
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: 0em
  card-title:
    fontFamily: system-ui
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  card-heading:
    fontFamily: system-ui
    fontSize: 18px
    fontWeight: 400
    lineHeight: 23.4px
    letterSpacing: -0.2px
  body:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.2px
  caption:
    fontFamily: system-ui
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
  step-numeral:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0em
rounded:
  chip-strip-micro-bar: 2px
  calendar-day-cell: 4px
  toolbar-tile: 6px
  footer-download-chip: 7px
  icon-tile-inline-badge: 8px
  button-chat-bubble-sunken-card: 12px
  card-panel-dark-card: 16px
  toggle-track: 29px
  avatar-dot-night-chip: 100px
  eyebrow-pill: 9999px
spacing:
  2xs: 2px
  xs: 4px
  sm: 8px
  default: 10px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  section-short: 48px
  section-standard: 80px
  section-tall: 96px
---
# Cal.com — Style Reference

> Paper-grey calm, black ink, and one midnight-indigo room down the hall

**Theme:** light

Two systems live in these pages, and the seam is a single link in the nav. The home, enterprise and pricing pages run on a paper-grey ground — #F4F4F4 under white cards, near-black ink, a black gradient pill for every call to action; the AI phone-agent page swaps the ground for midnight indigo and lets a violet gradient persuade, keeping the nav, footer and type. That type is the through-line: Cal Sans at weight 600 for every display line, Cal Sans UI Variable Light at weight 300 for every sentence beneath it, so hierarchy comes from size at normal tracking. Depth is a whisper: a 5px blur pulled back by a −4px spread, sometimes a 1px ring. The grid is drawn, not implied — hairline rules run full-bleed and cross at the section corners.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#F4F4F4` | `--color-paper` | The light ground, painted on `body`. Never a card fill. |
| Panel | `#FCFCFC` | `--color-panel` | Pricing rows and bands; the secondary button's top stop. |
| Card | `#FFFFFF` | `--color-card` | Card fill and every eyebrow pill. Keep it the only true white. |
| Ink | `#242424` | `--color-ink` | Heading and display ink; the dark end of the primary button. Not pure black. |
| Ink Soft | `#292929` | `--color-ink-soft` | Nav labels, pricing rows, the light end of the button gradient. |
| Link Ink | `#111111` | `--color-link-ink` | Footer and nav anchors only — a half-step darker than Ink. |
| Muted | `#898989` | `--color-muted` | Supporting sentences and the avatar dot. The one grey allowed to carry running text. |
| Hairline | `rgba(20, 20, 20, 0.15)` | `--color-rule` | Section rules and in-card dividers, painted as a fill on 1px divs. |
| Slot Grey | `#E5E7EB` | `--color-slot` | The available-day fill in the calendar mock. Never a surface. |
| Selected Slate | `#374151` | `--color-selected` | The selected day's fill and the weekday rail's ink. Selection wins by luminance. |
| Info Blue | `#0099FF` | `--color-info` | Editorial credit only — the "Save 25%" flag, the support address. Never a CTA. |
| Info Wash | `#EFF6FE` | `--color-info-wash` | The 4px chip behind that flag. |
| Midnight | `#0D0C27` | `--color-night` | The AI page's `body` fill. |
| Night Card | `#15142E` | `--color-night-card` | The card plane on midnight: 16px radius and the white card's shadow. |
| Night Bubble | `#1D1C3C` | `--color-night-bubble` | Chat bubbles and night chips. A luminance step, not a tint change. |
| Violet | `#6349EA` | `--color-violet` | The only saturated accent; the start of every violet gradient. |
| Violet Light | `#875FE0` | `--color-violet-light` | The CTA gradient's end stop. Never a flat fill alone. |
| Night Ink | `rgba(255, 255, 255, 0.7)` | `--color-night-ink` | Body copy on midnight — white at 70%, so the indigo reads through. |

## Tokens — Typography

### Cal Sans · `--font-display`
- **Substitute:** Poppins, Gilroy, Futura PT
- **Weights:** 400, 600, 900
- **Sizes:** 12px, 20px, 24px, 32px, 48px, 57px, 64px
- **Line height:** 62.7–70.4px at the display sizes (a 1.1 ratio); 30–38.4px in the 20–32px range
- **Letter spacing:** normal at every heading size, including the 64px hero; the census's one exception is a 20px/400 label at 0.2px.
- **Role:** Every headline, section title and pricing tier name, at weight 600.

### Cal Sans UI Variable Light · `--font-body`
- **Substitute:** Inter Light, Söhne Buch, Helvetica Now Text Light
- **Weights:** 300
- **Sizes:** 12px, 14px, 16px, 18px
- **Line height:** 12–16.8px at 12px, 19.6–22.4px at 14px, 24px at 16px, 23.4px at 18px
- **Letter spacing:** normal on running prose; −0.2px on labels, card headings and pricing rows
- **Role:** The body voice at 300: paragraphs, nav labels, button labels, feature lists.

### Matter · `--font-ui`
- **Substitute:** Inter, IBM Plex Sans, Basis Grotesque
- **Weights:** 400 (three named cuts — Regular, Medium, SemiBold — all computing to 400)
- **Sizes:** 14px
- **Line height:** 18.2px on the icon-tile heading, 21px on testimonial names and roles
- **Letter spacing:** normal
- **Role:** Product-UI voice in mockups and icon-tile captions.

### Inter · `--font-interface`
- **Substitute:** Söhne, Roboto, system-ui
- **Weights:** 400, 500, 600
- **Sizes:** 14px
- **Line height:** 16px on calendar and duration chips, 16.8px on agent labels
- **Letter spacing:** normal
- **Role:** Chrome inside product screenshots: duration chips, calendar numerals, agent labels.

### Roboto Mono · `--font-mono`
- **Substitute:** IBM Plex Mono, JetBrains Mono, ui-monospace
- **Weights:** 600
- **Sizes:** 14px
- **Line height:** 14px — set solid
- **Letter spacing:** normal
- **Role:** Step numerals in numbered card sequences.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 64px | 70.4px | normal | `--text-display` |
| Display Alt | 57px | 62.7px | normal | `--text-display-alt` |
| Section Heading | 48px | 52.8px | normal | `--text-h2` |
| Subsection | 32px | 38.4px | normal | `--text-h3` |
| Pull Quote | 24px | 31.2px | normal | `--text-quote` |
| Card Title | 20px | 30px | normal | `--text-title` |
| Card Heading | 18px | 23.4px | −0.2px | `--text-lead` |
| Body | 16px | 24px | normal | `--text-body` |
| Label | 14px | 20px | −0.2px | `--text-label` |
| Caption | 12px | 16.8px | normal | `--text-caption` |
| Step Numeral | 14px | 14px | normal | `--text-mono` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2` |
| xs | 4px | `--spacing-4` |
| sm | 8px | `--spacing-8` |
| default | 10px | `--spacing-10` |
| md | 12px | `--spacing-12` |
| lg | 16px | `--spacing-16` |
| xl | 20px | `--spacing-20` |
| 2xl | 24px | `--spacing-24` |
| 3xl | 32px | `--spacing-32` |
| 4xl | 48px | `--spacing-48` |
| Section — short | 48px | `--section-sm` |
| Section — standard | 80px | `--section-md` |
| Section — tall | 96px | `--section-lg` |

10px is the default flex gap and not a multiple of the 4px base: padding and radius sit on 4px, 10px beside them.

### Border Radius
| Element | Value |
|---------|-------|
| Chip strip, micro-bar | 2px |
| Calendar day cell | 4px |
| Toolbar tile | 6px |
| Footer download chip | 7px |
| Icon tile, inline badge | 8px |
| Button, chat bubble, sunken card | 12px |
| Card, panel, dark card | 16px |
| Toggle track | 29px |
| Avatar dot, night chip | 100px |
| Eyebrow pill | 9999px |

Two full-round values coexist — 100px on dots and night chips, 9999px on the eyebrow pills. Pick one per component family.

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card | `rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px` | `--shadow-card` |
| Card + ring | `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px` | `--shadow-card-ring` |
| Card + ring (strong) | `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.1) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px` | `--shadow-card-ring-strong` |
| Pill | `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px` | `--shadow-pill` |
| Dark button top light | `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset` | `--shadow-inset-dark` |
| Light button top light | `rgb(255, 255, 255) 0px 2px 0px 0px inset` | `--shadow-inset-light` |
| Toggle track | `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset` | `--shadow-track` |
| Night focus ring | `rgb(43, 37, 75) 0px 0px 0px 3px, rgb(44, 43, 90) 0px 0px 0px 4px, rgb(12, 6, 30) 0px 0px 0px 1px` | `--shadow-focus-night` |

### Layout
- **Page max-width:** `not measured` — the census carries no width row. The content column is centred between two full-height hairline rails, bands running edge to edge behind it.
- **Section gap:** 96px standard, on every page; 80px the shorter alternate; 48px once, on the AI page.
- **Card padding:** 24px standard; 16px on the sunken testimonial card; 28px top / 8px side on the icon tile; 12px on the chat bubble.
- **Element gap:** 10px default, 4px and 8px inside controls, 12px and 16px inside cards, 24px between grid tiles, 48px between stacked blocks.

## Components

### Primary Button
**Role:** The single call to action — get started, talk to sales, try for free.
`.framer-kMQ83.framer-14ri4cj.framer-v-14ri4cj.framer-c4zb5r`, an anchor on all four pages. Fill: a vertical gradient `#292929` → `#242424`; padding 8px / 12px, radius 12px, border none, internal gap 8px. Shadow: `rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset` — a white line on the top edge alone. Label: Cal Sans UI Variable Light 14px / 300 / 20px / −0.2px in `#FFFFFF`.

### Secondary Button
**Role:** The paired alternative — book a demo, explore apps, see feature breakdown.
Two light variants. `.framer-kMQ83.framer-14ri4cj.framer-v-fewsea.framer-c4zb5r` fills `#FCFCFC` → `#FFFFFF`; `.framer-kMQ83.framer-14ri4cj.framer-v-7n69qg.framer-c4zb5r` fills darker, `#F7F7F8` → `#EAEAEB`. Both take padding 8px 12px, radius 12px, border none, and the harder inset `rgb(255, 255, 255) 0px 2px 0px 0px` at full opacity. Use `#FCFCFC` on paper, `#F7F7F8` on a white card.

### Section Eyebrow Pill
**Role:** The capsule that names a section — how it works, benefits, testimonials, FAQ.
`.framer-LieLO.framer-5k6112.framer-v-kat1mu.framer-igq0jt`: an anchor filled `#FFFFFF`, ink `#000000`, padding 4px 8px, radius 9999px, border none, `rgba(34, 42, 53, 0.05) 0px 4px 8px 0px` — a shadow with no ring. Internal gap `not measured`. A `#F5F5F5` variant at padding 4px 12px, 4px gap, exists on the home page.

### Feature Card
**Role:** The workhorse — a heading, a paragraph, and a product mock beneath.
`.framer-1tym5sg`: div, fill `#FFFFFF`, padding 24px, radius 16px, border none, `--shadow-card`, 32px gap between copy and mock. Heading: the `.framer-text.framer-styles-preset-1c21fzh` row — Cal Sans UI Variable Light 18px / 300 / 23.4px / −0.2px in `#242424`.

### Ringed Card
**Role:** The card variant where a screenshot needs a defined edge against white.
`.framer-euxzvm`: div, fill `#FFFFFF`, padding 24px, radius 16px, border none. The shadow adds a spread ring, `rgba(34, 42, 53, 0.08) 0px 0px 0px 1px`, between the 1px blur and the 4px lift — the system's border.

### Icon Feature Tile
**Role:** The small grid tile in the "and so much more" run — an icon over a two-word capability.
`.framer-FTWLt.framer-Jd1N0.framer-VwO0E.framer-6enn03`: div, fill `#FFFFFF`, padding 28px top / 8px sides, radius 16px, border none, `--shadow-card`, 24px internal gap. The caption is Matter SemiBold 14px / 400 / 18.2px in `#242424`.

### Wall-of-Love Card
**Role:** The masonry testimonial card — avatar, handle, short quote.
`.framer-11t5dr2`: div, fill `#F5F5F5`, padding 16px, radius 12px, border none, `--shadow-card-ring-strong`, ring at 10% rather than 8%. Quote ink `not measured`.

### Calendar Day Cell
**Role:** A single bookable day inside the booking mock.
`.framer-156kf12` measures three ways, all padding 4px, radius 4px, border none, shadow none. Unfilled cells are the majority; `#E5E7EB` marks an available day, `#374151` the selected one. Numerals are Inter 14px / 500 / 16px in `#242424`. The weekday rail paints two inks, `#9CA3AF` and `#374151`.

### Availability Toggle
**Role:** The on/off switch in the availability mock.
`.framer-pg57i8`, `.framer-m5vs0a`, `.framer-zwha37` and `.framer-uu2px0` measure identically: div, fill `#E0E0E0`, padding 0, radius 29px, border none, `rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`. The 29px radius is a hard-coded half-height, not a full-round token. Knob fill `not measured`.

### Footer Download Chip
**Role:** Platform links at the foot of every page — Android, Chrome, Safari, Edge, Firefox, macOS, Windows, Linux.
`.framer-pIVX9.framer-lBsZX.framer-6bp1fe.framer-v-6bp1fe`: an anchor filled `rgba(255, 255, 255, 0.8)`, padding 0 / 10px, radius 7px, border none, shadow none — paper grey shows through. On the AI page it becomes `.framer-pIVX9.framer-lBsZX.framer-6bp1fe.framer-v-6ymt42`, an opaque `#2C2D42` at identical padding and radius. Both carry `#0000EE` as inherited anchor ink; labels come from nested text.

### Cal.ai Chat Bubble
**Role:** One turn of the transcript in the phone-agent demo.
`.framer-exmb67`: div, fill `#1D1C3C`, padding 12px, radius 12px, border none, shadow none — separation is luminance alone, one step up from the `#15142E` card and two from the `#0D0C27` ground. The speaker label is Inter 14px / 600 / 16.8px in `#FFFFFF` — the census's heaviest Inter weight. Message ink `not measured`.

### Cal.ai Violet CTA
**Role:** The action button of the dark system — try AI scheduling.
`.framer-6xax6l`: div, padding 12px / 16px, radius 12px, border none, shadow none, fill a `#6349EA` → `#875FE0` gradient. A second measurement of the same class fills `rgba(255, 255, 255, 0.1)`, the ghost sibling beside it. The headline borrows the accent: a span runs `#6349EA` → `#C292FF` across the words "AI-powered calls".

## Do's and Don'ts

### Do
- Set every paragraph, label and caption in Cal Sans UI Variable Light at weight 300 — the type census records one weight for that family.
- Reach for 12px radius first, 16px for card-sized things: 12px is the most-painted radius in the census, 16px the card standard.
- Let size carry hierarchy and leave tracking at normal. The 64px hero row ("The better way to schedule your meetings") and the 48px section row ("With us, appointment scheduling is easy") read letter-spacing normal.
- Build elevation from `--shadow-card` — the shadow census gives it 75 carriers, `.framer-1tym5sg` among them — and add the 1px spread ring only where a white card sits on white, as `.framer-euxzvm` does.
- Give every dark button the 2px white top-inset: 15% on the `#242424` gradient, full opacity on the near-white secondary.
- Draw the section grid with `rgba(20, 20, 20, 0.15)` as a 1px fill, full-bleed, crossing at the corners.
- Keep the info blue and its wash as a pair: `#0099FF` on the "Save 25%" text, `#EFF6FE` on `.framer-mwmt7d` behind it.

### Don't
- Don't put violet on the light canvas. Every carrier the census lists for `#6349EA`, `#875FE0` and `#C292FF` sits on the AI page — `.framer-6xax6l`, `.framer-11yqvm8`, `.framer-1jzsd5m`, the `"AI-powered calls"` span.
- Don't treat `#0000EE` as a brand blue. It is the browser's default anchor ink; labels come from nested text.
- Don't add a border to a card. Both card rows, `.framer-1tym5sg` and `.framer-euxzvm`, paint `border: none` and use a shadow ring.
- Don't set a heading in the display face below 20px. The 18px card heading is Cal Sans UI Variable Light, not Cal Sans.
- Don't blur a shadow past 8px — the largest blur any shadow row paints, paired with a 5px blur pulled back by a −4px spread.
- Don't mix the two grounds in one view: the AI page swaps `body` to `#0D0C27` wholesale rather than dropping a dark section into paper.
- Don't use pure black for headings. `#242424` carries every heading row; `#000000` is the eyebrow pill's label and inherited default ink.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper (light canvas) | `#F4F4F4` | Body ground of the marketing pages. |
| 1 | Panel | `#FCFCFC` | Pricing bands and table rows. |
| 2 | Card | `#FFFFFF` | Every card, tile and pill. |
| 2b | Sunken card | `#F5F5F5` | Testimonial cards, going *down* from white. |
| 3 | Slot | `#E5E7EB` | Interactive-looking cells inside product mocks. |
| 0 | Midnight (dark canvas) | `#0D0C27` | Body ground of the AI page. |
| 1 | Night card | `#15142E` | The card plane on midnight. |
| 2 | Night bubble | `#1D1C3C` | Chat bubbles and night panels. |
| 3 | Night chip | `#262543` | Pills and chips on midnight. |

## Elevation

Depth is carried three ways and they do not mix. On paper it is shadow: a 1px blur at −4px spread plus a 4px/8px lift at 5%, plus a 1px spread ring where a card sits on true white. Inside controls it reverses — a 1.9px inset on the toggle track, a 2px inset white line at the top edge of every button. On midnight, shadow nearly disappears and depth becomes luminance: `#0D0C27` to `#15142E` to `#1D1C3C` to `#262543`, four small steps, no blur. The dark system's one real shadow is a focus stack of three rings at 3px, 4px and 1px.

## Imagery

No photography, no illustration. The imagery *is* the product: flat renders of the booking page, the availability editor, the insights dashboard, the meeting-reminder toast, drawn with the same white cards, 12px radii and hairline dividers. Partner logos appear twice: a greyscale trust rail (PlanetScale, Coinbase, Storyblok, AngelList, Raycast, Deel, Framer, Ramp), then full colour in the integrations grid, where Google, Slack, Salesforce and Zoom keep their brand colours — the only saturated colour on paper. Faces appear only as small circular avatars. The AI page narrows to one phone frame with a transcript and a video poster repeating the headline in white and violet.

## Layout

Full-bleed bands, a centred content column, hairline rails running the page height on either side; where a section rule crosses a rail, the intersection is a small plus. The vertical rhythm is 96px standard, 80px tighter. The composition alternates two shapes: a white card spanning the column (hero, app store, closing CTA), and a bare-paper band holding a centred eyebrow pill, a 48px headline, a 16px muted deck, then a grid of cards at 24px gaps. The nav is a floating white pill fixed to the top — logo left, six items centre, sign-in and a black CTA right. The footer is a five-column link matrix with compliance badges, a language select, a status chip and the download chips on the left.

## Typography Voice

The system runs two modes and refuses the middle. Mode one is Cal Sans at 600 — geometric, tall open counters — at 64px, 57px, 48px and 32px with 1.1 line-heights and no tracking adjustment. Mode two is Cal Sans UI Variable Light at 300: paragraphs at 16px/24px, labels at 14px/20px, card headings at 18px/23.4px, micro-copy at 12px. No 400 or 500 body weight appears in the census for that family, and Cal Sans itself skips from 600 to 900 for a single 57px emphasis span. A card heading and its paragraph share a weight and nearly a size; hierarchy inside a card falls to ink, `#242424` against `#898989`. Tracking inverts the usual: display normal, small text −0.2px. Roboto Mono at 600/14px set solid, in black at 60%, is the only other texture.

## Agent Prompt Guide

## Quick Color Reference
- background: `#F4F4F4`
- text: `#242424`
- surface: `#FFFFFF`
- border: `rgba(20, 20, 20, 0.15)`
- accent: `#6349EA`
- primary action: `#242424` (dark stop of the `#292929` → `#242424` gradient)

## Example Component Prompts
1. **Primary Button**: Anchor with a vertical gradient `#292929` → `#242424`, padding 8px 12px, radius 12px, no border, `box-shadow: rgba(255,255,255,0.15) 0px 2px 0px 0px inset`. Label in Cal Sans UI Variable Light 14px/300, line-height 20px, −0.2px, `#FFFFFF`, an 8px gap before a small chevron.
2. **Feature Card**: Card filled `#FFFFFF`, 24px padding, radius 16px, no border, `box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px`. A 32px gap between copy and product mock; heading Cal Sans UI Variable Light 18px/300/23.4px, −0.2px, `#242424`; paragraph same face 16px/300/24px, `#898989`.
3. **Section Header Block**: Centre an eyebrow pill (`#FFFFFF` fill, `#000000` ink, padding 4px 8px, radius 9999px, `box-shadow: rgba(34,42,53,0.05) 0px 4px 8px 0px`) above an h2 in Cal Sans 48px/600/52.8px, tracking normal, `#242424`, then a deck in Cal Sans UI Variable Light 16px/300/24px, `#898989`. Wrap in 96px vertical section padding on `#F4F4F4`.
4. **Booking Calendar Mock**: 7-column grid of day cells, padding 4px, radius 4px, no border, no shadow. Default unfilled; available `#E5E7EB`; selected `#374151`. Numerals Inter 14px/500/16px, `#242424`. Weekday labels 14px in `#9CA3AF` and `#374151`.
5. **Cal.ai Dark Section**: Ground `#0D0C27`. Card filled `#15142E`, 24px padding, radius 16px, `box-shadow: rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px 0px`. Inside, chat bubbles filled `#1D1C3C`, padding 12px, radius 12px, no shadow; speaker labels Inter 14px/600/16.8px `#FFFFFF`; body copy `rgba(255,255,255,0.7)`. The CTA is a `#6349EA` → `#875FE0` gradient, padding 12px 16px, radius 12px.

## Similar Brands
- **Linear** — near-monochrome, one accent released only where the product goes dark, hierarchy by size not weight.
- **Vercel (Geist)** — paper-and-ink discipline: grey canvas, true-white cards, hairline rules, a black pill as the only call to action.
- **Stripe** — rendered product UI as the entire image library, in the page's own radii and shadow language.
- **Raycast** — the kindred dark half: indigo-black ground, a violet gradient for one action, depth from luminance steps.
- **Framer** — drawn-grid marketing: full-bleed hairline rails, corner crosses, floating pill navigation.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors — light system */
  --color-paper: #F4F4F4;
  --color-panel: #FCFCFC;
  --color-card: #FFFFFF;
  --color-card-sunken: #F5F5F5;
  --color-card-alt: #F7F7F7;
  --color-wash: #F3F4F6;
  --color-ink: #242424;
  --color-ink-soft: #292929;
  --color-ink-title: #101010;
  --color-link-ink: #111111;
  --color-muted: #898989;
  --color-black: #000000;
  --color-link-default: #0000EE;
  --color-rule: rgba(20, 20, 20, 0.15);
  --color-rule-soft: rgba(20, 20, 20, 0.07);
  --color-line: #E1E2E3;
  --color-line-strong: #D3D3D3;
  --color-line-faint: #EEEEEE;
  --color-slot: #E5E7EB;
  --color-track: #E0E0E0;
  --color-selected: #374151;
  --color-label-muted: #9CA3AF;
  --color-label-dim: #6B7280;
  --color-info: #0099FF;
  --color-info-wash: #EFF6FE;
  --color-chip-start: #F7F7F8;
  --color-chip-end: #EAEAEB;
  --color-chip-ghost: rgba(255, 255, 255, 0.8);
  --color-veil: rgba(36, 36, 36, 0.2);
  --color-step-ink: rgba(20, 20, 20, 0.6);
  /* Colors — dark system */
  --color-night: #0D0C27;
  --color-night-card: #15142E;
  --color-night-bubble: #1D1C3C;
  --color-night-raised: #2A2947;
  --color-night-chip: #262543;
  --color-night-chip-alt: #2C2D42;
  --color-night-border: #352F4B;
  --color-violet: #6349EA;
  --color-violet-light: #875FE0;
  --color-violet-pale: #C292FF;
  --color-night-ink: rgba(255, 255, 255, 0.7);
  --color-night-ink-soft: rgba(255, 255, 255, 0.6);
  --color-night-ink-dim: rgba(255, 255, 255, 0.4);
  --color-night-fill: rgba(255, 255, 255, 0.1);
  /* Gradients */
  --gradient-primary: linear-gradient(#292929, #242424);
  --gradient-secondary: linear-gradient(#FCFCFC, #FFFFFF);
  --gradient-tertiary: linear-gradient(#F7F7F8, #EAEAEB);
  --gradient-panel: linear-gradient(#FFFFFF, #EEEEEE);
  --gradient-violet: linear-gradient(#6349EA, #875FE0);
  --gradient-violet-deep: linear-gradient(#352F4B, #875FE0);
  --gradient-violet-text: linear-gradient(#6349EA, #C292FF);
  /* Typography — Families */
  --font-display: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Cal Sans UI Variable Light', 'Cal Sans UI Regular', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Matter Regular', 'Matter Medium', 'Matter SemiBold', ui-sans-serif, sans-serif;
  --font-interface: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
  /* Typography — Scale */
  --text-display: 64px;      --leading-display: 70.4px;
  --text-display-alt: 57px;  --leading-display-alt: 62.7px;
  --text-h2: 48px;           --leading-h2: 52.8px;
  --text-h3: 32px;           --leading-h3: 38.4px;
  --text-quote: 24px;        --leading-quote: 31.2px;
  --text-title: 20px;        --leading-title: 30px;
  --text-lead: 18px;         --leading-lead: 23.4px;
  --text-body: 16px;         --leading-body: 24px;
  --text-label: 14px;        --leading-label: 20px;
  --text-caption: 12px;      --leading-caption: 16.8px;
  --text-mono: 14px;         --leading-mono: 14px;
  --tracking-tight: -0.2px;
  --tracking-normal: normal;
  --tracking-wide: 0.2px;
  /* Spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --section-sm: 48px;
  --section-md: 80px;
  --section-lg: 96px;
  --card-padding: 24px;
  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-tool: 6px;
  --radius-chip: 7px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-track: 29px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-card: rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;
  --shadow-card-ring: rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-card-ring-strong: rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.1) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-pill: rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-inset-dark: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset;
  --shadow-inset-light: rgb(255, 255, 255) 0px 2px 0px 0px inset;
  --shadow-track: rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset;
  --shadow-tile: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 2px 0px;
  --shadow-focus-night: rgb(43, 37, 75) 0px 0px 0px 3px, rgb(44, 43, 90) 0px 0px 0px 4px, rgb(12, 6, 30) 0px 0px 0px 1px;
}
```

### Tailwind v4
```css
@theme {
  --color-paper: #F4F4F4;
  --color-panel: #FCFCFC;
  --color-card: #FFFFFF;
  --color-card-sunken: #F5F5F5;
  --color-card-alt: #F7F7F7;
  --color-wash: #F3F4F6;
  --color-ink: #242424;
  --color-ink-soft: #292929;
  --color-ink-title: #101010;
  --color-link-ink: #111111;
  --color-muted: #898989;
  --color-black: #000000;
  --color-link-default: #0000EE;
  --color-rule: rgba(20, 20, 20, 0.15);
  --color-rule-soft: rgba(20, 20, 20, 0.07);
  --color-line: #E1E2E3;
  --color-line-strong: #D3D3D3;
  --color-line-faint: #EEEEEE;
  --color-slot: #E5E7EB;
  --color-track: #E0E0E0;
  --color-selected: #374151;
  --color-label-muted: #9CA3AF;
  --color-label-dim: #6B7280;
  --color-info: #0099FF;
  --color-info-wash: #EFF6FE;
  --color-chip-start: #F7F7F8;
  --color-chip-end: #EAEAEB;
  --color-chip-ghost: rgba(255, 255, 255, 0.8);
  --color-veil: rgba(36, 36, 36, 0.2);
  --color-step-ink: rgba(20, 20, 20, 0.6);
  --color-night: #0D0C27;
  --color-night-card: #15142E;
  --color-night-bubble: #1D1C3C;
  --color-night-raised: #2A2947;
  --color-night-chip: #262543;
  --color-night-chip-alt: #2C2D42;
  --color-night-border: #352F4B;
  --color-violet: #6349EA;
  --color-violet-light: #875FE0;
  --color-violet-pale: #C292FF;
  --color-night-ink: rgba(255, 255, 255, 0.7);
  --color-night-ink-soft: rgba(255, 255, 255, 0.6);
  --color-night-ink-dim: rgba(255, 255, 255, 0.4);
  --color-night-fill: rgba(255, 255, 255, 0.1);
  --font-display: 'Cal Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Cal Sans UI Variable Light', 'Cal Sans UI Regular', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Matter Regular', 'Matter Medium', 'Matter SemiBold', ui-sans-serif, sans-serif;
  --font-interface: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
  --text-display: 64px;      --leading-display: 70.4px;
  --text-display-alt: 57px;  --leading-display-alt: 62.7px;
  --text-h2: 48px;           --leading-h2: 52.8px;
  --text-h3: 32px;           --leading-h3: 38.4px;
  --text-quote: 24px;        --leading-quote: 31.2px;
  --text-title: 20px;        --leading-title: 30px;
  --text-lead: 18px;         --leading-lead: 23.4px;
  --text-body: 16px;         --leading-body: 24px;
  --text-label: 14px;        --leading-label: 20px;
  --text-caption: 12px;      --leading-caption: 16.8px;
  --text-mono: 14px;         --leading-mono: 14px;
  --tracking-tight: -0.2px;
  --tracking-wide: 0.2px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-section-sm: 48px;
  --spacing-section-md: 80px;
  --spacing-section-lg: 96px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-tool: 6px;
  --radius-chip: 7px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-track: 29px;
  --radius-pill: 100px;
  --radius-full: 9999px;
  --shadow-card: rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;
  --shadow-card-ring: rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-card-ring-strong: rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.1) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-pill: rgba(34, 42, 53, 0.05) 0px 4px 8px 0px;
  --shadow-inset-dark: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset;
  --shadow-inset-light: rgb(255, 255, 255) 0px 2px 0px 0px inset;
  --shadow-track: rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset;
  --shadow-tile: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 2px 0px;
  --shadow-focus-night: rgb(43, 37, 75) 0px 0px 0px 3px, rgb(44, 43, 90) 0px 0px 0px 4px, rgb(12, 6, 30) 0px 0px 0px 1px;
}
```