Cal.comdesign-system

Typography

Fonts, headings, and type scale used in Cal.com product UI.

Cal.com product UI uses Cal Sans for interface and headings, and Paper Mono for code and dense data.

These fonts are loaded in the design-system app the same way Coss docs load them (--font-sans, --font-heading, --font-mono).

Specimens

Fonts

Sans / UI

Cal Sans · --font-sans

Ag

Heading

Cal Sans · --font-heading

Ag

Mono

Paper Mono · --font-mono

Ag

Headings

Heading 4xl

The quick brown fox

Heading 3xl

The quick brown fox

Heading 2xl

The quick brown fox

Heading xl

The quick brown fox

Heading lg

The quick brown fox

Body

Body lg

Scheduling for everyone — product copy at comfortable reading size.

Body base

Default UI copy for forms, settings, and dense product surfaces.

Body sm

Secondary labels, helper text, and compact table content.

Body xs

Meta, captions, and badge-scale labels.

Mono

yarn workspace @calcom/design-system dev
import { Button } from "@coss/ui/components/button";

Guidelines

  • Prefer font-heading for page titles and section headers
  • Keep body copy on font-sans at text-sm / text-base for product density
  • Use font-mono for code, IDs, tokens, and tabular values — not for long-form reading