Cal.com

Difficulty:
Company
cal

Effect Preview

Style Description

Open-source scheduling. Clean neutral UI, developer-friendly

Tags

Cal.comSaaS

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

Web App
Build a web app with Cal.com design language and #0099ff color system.

Cal.com Dashboard

Dashboard
Create a dashboard using Cal.com style with data visualization and modern typography.

✅ Best For

  • SaaS
  • Brand-consistent interfaces
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines