Cal.com is open-source scheduling software where users meet users. Its UI is deliberately pure grayscale — no brand colors, boldness expressed in black and white — with the geometric Cal Sans at extremely tight tracking, an 11-definition shadow system, and radii scaling from 2px to 9999px pills. Developer-friendly and clean.
SaaSMinimal
Prompt Template
Base Template
Design a Cal.com-inspired interface. - Purely grayscale brand palette — no brand colors, boldness through monochrome; - Cal Sans custom geometric display font with extremely tight default letter-spacing; - Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights; - Cal Sans for headings, Inter for body — clean typographic division; - Wide border-radius scale from 2px to 9999px (pill) — versatile rounding. Colors: #242424, #111111, #ffffff, #0099ff with #0099ff accent.
Variant Prompts
📱 Mobile
Design a mobile app with Cal.com aesthetics. Use Cal.com color identity with #0099ff accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Cal.com style. Use Cal.com color identity with #0099ff accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Cal.com design language. Use Cal.com color identity with #0099ff accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Cal.com visual identity. Use Cal.com color identity with #0099ff accents. Compelling, conversion-focused.
Usage Examples
Cal.com App
WebBuild a web app with Cal.com design language and #0099ff color system.
Cal.com Dashboard
DashboardCreate a dashboard using Cal.com style with data visualization and modern typography.
✅ Best For
- SaaS
- Open-source and developer service sites
- Calendar and scheduling products
❌ Avoid For
- Heavily decorated gamified products
- Luxury brand landing pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.