Back to Hub
Fusion Sample / Bento x Noir Go to Hub

Bento Noir Atelier

Combines the modular information layout of Bento Bloom with the luxury tone of Midnight Noir. Structure stays approachable while the impression remains premium.

Card layout follows bento rules
Colors center on dark + gold
Text contrast over excessive decoration
Interactions use restrained hover only

AI Request Prompt

Design a web landing page that combines a modular bento-box card layout with a deep, pitch-black minimalist aesthetic.

Style rules:
- Background: Pure black (#0a0a0a) base, cards in #141414 with subtle 1px rgba(255,255,255,0.06) borders
- Layout: Asymmetric bento grid — mix 1x1, 2x1, 1x2 card sizes with 12-16px gap
- Typography: Headlines in serif (Playfair Display or DM Serif Display), body in light sans-serif
- Colors: Gold accent (#c9a96e) for highlights and CTA, all other text white/gray
- Cards: 16-20px border-radius, no heavy shadows — depth through background shade variation
- CTA: Understated gold border button, no solid fill, hover reveals subtle gold glow

Responsive:
- Mobile (~768px): Bento grid collapses to single column stack, card sizes equalized
- Desktop: max-width 1100px, 3-4 column bento grid with varied row spans

Restrictions:
- No bright or pastel colors — strictly dark with gold accent
- No flat card backgrounds equal to page background — each card must be visually distinct
- No heavy box-shadows — rely on border and background contrast

Output:
1) Bento grid layout system (grid-template-areas or auto-placement)
2) Noir color tokens and typography pairing
3) HTML/CSS code with responsive support