Hero architecture
Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.
Style 39 · General · Wedding/Event Planning
Bento Box Grid
Modular cards, asymmetric grid, varied sizes, Apple-style, dashboard tiles, negative space, clean hierarchy, cards. This mock website translates the UI/UX Pro Max style notes into a client-ready landing/dashboard hybrid with its own palette, typography, chart module, and component system.
Live product surface
NOVA Wedding/Event OS
Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS
81%
style fit score
Effects
grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions
A full-page mock website in this style
Component language
display: grid, grid-template-columns: repeat(4, 1fr), grid-auto-rows: 200px, gap: 16px, border-radius: 24px, background: #FFFFFF, box-shadow: 0 4px 6px rgba(0,0,0,0.05)
Best-fit market
Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS
Palette used
Romantic pink + elegant gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Typography pairing
Startup Bold
Clash Display / Satoshi
Note: Clash Display on Fontshare. Outfit as Google alternative.
Implementation checklist
- ☐ Grid responsive (4→2→1 cols)
- ☐ Card spans varied
- ☐ Rounded corners consistent
- ☐ Shadows subtle
- ☐ Content fits cards
Chart module: Radar / Spider Chart
Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)
Interaction spec
Accessibility: ✓ WCAG AA · B
Performance: ⚡ Excellent
Mobile: ✓ High
Avoid: Dense data tables, text-heavy content, real-time monitoring
Visual system samples
Gallery rhythm
Conversion section
One primary action, one secondary proof path, clear visual hierarchy, focus states, 44px+ hit targets, and token-driven colors.
Primary CTA