Hero architecture
Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.
Style 53 · General · Photography Studio
Bento Grids
Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft. 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 Photography OS
Product features, dashboards, personal sites, marketing summaries, galleries
95%
style fit score
Effects
Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
A full-page mock website in this style
Component language
display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle
Best-fit market
Product features, dashboards, personal sites, marketing summaries, galleries
Palette used
Pure black + white contrast
Typography pairing
Neubrutalist Bold
Lexend Mega / Public Sans
Lexend Mega has distinct character and variable weight.
Implementation checklist
- ☐ Grid layout (CSS Grid)
- ☐ Rounded corners 16-24px
- ☐ Varied card spans
- ☐ Content fits card size
- ☐ Responsive re-flow
Chart module: Pie Chart or Donut
≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values
Interaction spec
Accessibility: ✓ WCAG AA · C
Performance: ⚡ Excellent
Mobile: ✓ High
Avoid: Long-form reading, data tables, complex forms
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