Duolingo はゲーム化された方法で語学を学ぶプラットフォームです。スタイルは大胆で明るく、フクロウグリーン（#58cc02）が表面積の 30% 以上を覆い、すべてのボタンの下部に 4px の塗りつぶしシャドウがあって「押せる」触感をつくります。ボーダーはヘアラインではなく 2〜3px で固定され、Feather Bold の丸みある見出し書体に Mona Sans の本文、見出しは 48px から始まります。教育、ゲーミフィケーション、楽しいプロダクトに適しています。
Duolingo生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Duolingo-inspired interface. - Owl green (#58cc02) as the dominant brand color, used in 30%+ of the surface; - Chunky 4px bottom-shadow on every button (the "tactile press" affordance); - 2–3px solid borders, never hairlines; - Feather Bold (rounded display) + Mona Sans (body); - Big confident type — display sizes start at 48px and climb. Colors: #58cc02, #58a700, #89e219, #dbf8c5 with #58cc02 accent. Typography: - Background:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Duolingo aesthetics. Use Duolingo color identity with #58cc02 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Duolingo style. Use Duolingo color identity with #58cc02 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Duolingo design language. Use Duolingo color identity with #58cc02 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Duolingo visual identity. Use Duolingo color identity with #58cc02 accents. Compelling, conversion-focused.
使用例
Duolingo アプリ
WebBuild a web app with Duolingo design language and #58cc02 color system.
Duolingo ダッシュボード
ダッシュボードCreate a dashboard using Duolingo style with data visualization and - Background: typography.
✅ 適した用途
- SaaS 製品
- ゲーム化された学習プロダクト
- 親しみやすさが必要なコンシューマーアプリ
❌ 適さない用途
- 厳密な金融取引システム
- ミニマリズムのアートサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。