Cal.com 是開源日程排程平台，定位是「讓使用者與使用者直接相約」。介面刻意保持純灰階——不含品牌彩色，靠黑白層次表達大膽；Cal Sans 幾何展示字型帶極緊字距，多層陰影系統（環形描邊、漫射陰影與內高光）替代樸素邊框，圓角從 2px 到 9999px 膠囊。適合開發者友善的排程與效率工具。
Cal.com效率與 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 程式設計工具使用。