Back to Hub
Design Sample / Bento Bloom Go to Hub

SOFT BENTO UI SYSTEM

A friendly style combining soft colors with modular boxes. Well-suited for dashboards, education, and community pages. Your prompt should include "pastel tones," "large corner radius," and "irregular bento grid" together.

Pin key messages with wide cards
Group information through color clusters
Icon-centric
Friendly CTA
Short sentences

AI Request Prompt

Design a friendly and lightweight Bento UI style landing page.

Requirements:
- Colors: Pastel-based -- Mint (#bdf2e0), Peach (#ffd9bf), Lavender (#d9cbff), background in light lilac (#f8f5ff)
- Cards: Large rounded corners (18px), generous spacing (10px gap), thin border (1px solid #c6bae4)
- Grid: 6-column bento layout, each tile with different spans (3+3, 2+2+2, etc.) for irregular composition
- Typography: Headings in rounded friendly font (Jua), body in Nunito, line-height 1.75
- Motion: Pop-in animation (translateY 10px + scale 0.98 to 1, 0.6s ease, 0.08s stagger intervals)
- Color clusters: Different pastel backgrounds per tile for information grouping

Responsive:
- Mobile (~720px): All tiles span 6 columns (1-column stack)
- Desktop: max-width 1050px, 6-column grid

Restrictions:
- No dark tones
- No sharp right-angle corners
- No complex motion or 3D effects

Output:
1) Card system rules (color clusters/size variants/border/shadow)
2) Section layout (Hero/Feature Bento/Community/CTA)
3) HTML/CSS code with responsive support