Cal.com はオープンソースのスケジュール調整プラットフォームで、「ユーザー同士が直接会う約束をする」ことを狙いとしています。UI は意図的に純グレースケールに保たれ、ブランドカラーを持たず、白黒の階調だけで大胆さを表現します。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 アプリ
WebBuild 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 製品
- オープンソースツールと開発者向けサービスの公式サイト
- カレンダーと予約系プロダクトの UI
❌ 適さない用途
- 装飾の多いゲーミフィケーション製品
- ラグジュアリー志向のブランドランディングページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。