Back to Library
C

Cal.com

Cal.com

Visit Website

Open-source scheduling. Clean neutral UI, developer-oriented simplicity.

中性色调开源日历集成简洁布局

Color Palette

primary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size16px
Line Height1.5
Weights400, 500, 600, 700

Heading Scale

h1Cal.com Heading
h2Cal.com Heading
h3Cal.com Heading
h4Cal.com Heading

DESIGN.md

# Cal.com Design System

## Visual Theme & Atmosphere
Clean, neutral, unpretentious. Near-black on white creates developer-oriented simplicity.

## Agent Prompt Guide
Clean neutral UI. Calendar-focused layouts.

Related Design Systems

A
Airtable
Airtable
Similar productivity tool design system
N
Notion
Notion Labs
Similar productivity tool design system
R
Raycast
Raycast
Similar productivity tool design system
L
Linear
Linear
Similar productivity tool design system

Frequently Asked Questions

What is Cal.com's design style?

Open-source scheduling. Clean neutral UI, developer-oriented simplicity.

What is Cal.com's primary color?

Cal.com uses #292929 as primary color, #FFFFFF for background, and #111111 for text.

What fonts does Cal.com use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 16px.

How to use Cal.com design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Cal.com's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems