Cal.com 是开源日程调度平台，定位是「让用户与用户直接相约」。界面刻意保持纯灰阶——不含品牌彩色，靠黑白层次表达大胆；Cal Sans 几何展示字体带极紧字距，多层阴影系统（环形描边、漫射阴影与内高光）替代朴素边框，圆角从 2px 到 9999px 胶囊。适合开发者友好的调度与效率工具。
效率与 SaaS现代极简
提示词模板
基础模板
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.
变体提示词
📱 移动端
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.
📊 仪表板
Design a dashboard with Cal.com design language. Use Cal.com color identity with #0099ff accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Cal.com visual identity. Use Cal.com color identity with #0099ff accents. Compelling, conversion-focused.
使用示例
Cal.com 应用
Web 端Build a web app with Cal.com design language and #0099ff color system.
Cal.com 仪表板
仪表板Create a dashboard using Cal.com style with data visualization and modern typography.
✅ 适合场景
- SaaS 产品
- 开源工具与开发者服务的官网
- 日历与预约类产品界面
❌ 不适合场景
- 重装饰的游戏化产品
- 奢华风格品牌落地页
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。