Cal.com Colors & Fonts
What colors and fonts does Cal.com use? Open source scheduling. Clean, professional, calendar-focused.
Cal.com Color Palette
Primary: #111827
Primary
#111827Brand, buttons
Background
#FFFFFFMain background
Surface
#F9FAFBCards
Border
#E5E7EBDividers
Text Primary
#111827Headings
Text Secondary
#6B7280Body text
Accent
#2563EBLinks, highlights
What Font Does Cal.com Use?
Cal.com uses Cal Sans and Inter
Cal Sans
Inter
Roboto Mono
Spacing & Radius
Spacing Scale
Base: 4px
Border Radius
4px8px12pxCal.com Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#111827',
'background': '#FFFFFF',
'surface': '#F9FAFB',
'border': '#E5E7EB',
'text-primary': '#111827',
'text-secondary': '#6B7280',
'accent': '#2563EB',
},
fontFamily: {
'heading': ['Cal Sans', 'sans-serif'],
'body': ['Inter', 'sans-serif'],
'mono': ['Roboto Mono', 'sans-serif'],
},
},
},
}Extract Cal.com's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Linear
The issue tracking tool loved by developers. Dark, minimal, fast.
Stripe
Payment infrastructure for the internet. Clean gradients, polished.
Notion
All-in-one workspace. Clean, friendly, content-focused design.
Supabase
Open source Firebase alternative. Green accents, dark theme, developer-friendly.