Duolingo is the language-learning platform that teaches by playing a game. Its style is bright and bold: Owl Green (#58cc02) floods 30%+ of the surface, every button carries a chunky 4px bottom shadow for a tactile press, borders are 2–3px solid rather than hairlines, Feather Bold rounds the display type, and display sizes start at 48px.
SaaSBold
Prompt Template
Base Template
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:.
Variant Prompts
📱 Mobile
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.
📊 Dashboard
Design a dashboard with Duolingo design language. Use Duolingo color identity with #58cc02 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Duolingo visual identity. Use Duolingo color identity with #58cc02 accents. Compelling, conversion-focused.
Usage Examples
Duolingo App
WebBuild a web app with Duolingo design language and #58cc02 color system.
Duolingo Dashboard
DashboardCreate a dashboard using Duolingo style with data visualization and - Background: typography.
✅ Best For
- SaaS
- Gamified learning products
- Friendly consumer apps
❌ Avoid For
- Rigorous financial trading systems
- Minimalist art sites
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.