Cafe は居心地のよい喫茶店のような UI スタイルです。暖かなベージュの下地（#E9E3DD）に濃いブラウンの文字（#5D4432）、タイポグラフィは柔らかく丸みがあり、余白はゆったりと、まるで温かい飲み物を手にしているような感覚をつくります。色調はミルクコーヒーとキャラメルを基調に、緑のアクセントがほのかな清涼感を添え、全体の印象は温もりがあり人間味にあふれています。飲食、ライフスタイル、コミュニティ型プロダクトの温かな UI に適しています。
Cafeクリエイティブ
プロンプトテンプレート
基本テンプレート
Design a Cafe-inspired interface. Colors: #E9E3DD, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #5D4432.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Cafe aesthetics. Use Cafe color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Cafe style. Use Cafe color identity with #16A34A accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Cafe design language. Use Cafe color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Cafe visual identity. Use Cafe color identity with #16A34A accents. Compelling, conversion-focused.
使用例
Cafe アプリ
WebBuild a web app with Cafe design language and #16A34A color system.
Cafe ダッシュボード
ダッシュボードCreate a dashboard using Cafe style with data visualization and #5D4432 typography.
✅ 適した用途
- クリエイティブプロジェクト
- 飲食とライフスタイルブランド
- 温もりのあるコミュニティプロダクト
❌ 適さない用途
- 厳粛なテクノロジー管理画面
- 高コントラストのeスポーツ UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。