Bento organizes interfaces on a lunchbox metaphor: a modular grid slices content into cards of varying sizes with uniform gaps and radii, each item finding its cell. Muted blue-gray (#80A1C1) keeps the lead calm, and hierarchy comes from size and whitespace rather than decoration. Made for feature overviews, dashboards, and profiles that must be scanned at a glance.
MinimalCreative
Prompt Template
Base Template
Design a Bento-inspired interface. Colors: #80A1C1, #16A34A, #D97706, #DC2626 with #80A1C1 accent. Typography: #FAD4C0.
Variant Prompts
📱 Mobile
Design a mobile app with Bento aesthetics. Use Bento color identity with #80A1C1 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bento style. Use Bento color identity with #80A1C1 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Bento design language. Use Bento color identity with #80A1C1 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Bento visual identity. Use Bento color identity with #80A1C1 accents. Compelling, conversion-focused.
Usage Examples
Bento App
WebBuild a web app with Bento design language and #80A1C1 color system.
Bento Dashboard
DashboardCreate a dashboard using Bento style with data visualization and #FAD4C0 typography.
✅ Best For
- Layout
- Product feature overview pages
- Personal homepages and portfolios
❌ Avoid For
- Long-form reading pages
- Immersive video player pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.