Bento Grid

Published on 2025-12-28 03:15:38

The "Bento Grid" style derives its name from the traditional Japanese lunchbox (Bento Box), where various dishes are neatly compartmentalized within a single container. In digital design, while it shares DNA with Microsoft's early Metro UI (Windows 8 Tiles), the modern Bento wave was largely propelled by Apple's promotional videos (feature summary slides), iOS Control Center, and Widget designs. Recently, popularized by tools like Bento.me and Linear, it has evolved into a standard paradigm for feature showcasing. It represents a philosophy of modularity, flat hierarchy, and content-first design. Visual Characteristics Modular Grid: The soul of this style. The page is divided into a strict grid system, with content encapsulated in cards (cells) of varying aspect ratios (e.g., 1x1, 2x1, 2x2). While card sizes differ, the gap between them remains mathematically consistent, creating a satisfying sense of order. Radius & Smoothing: The Bento style rejects sharp corners. All cards feature generous border radii (typically 20px-32px), often utilizing iOS-style "continuous curvature" (Squircle) to make the interface feel softer and more approachable. Density & Hierarchy: Each "Bento cell" is a self-contained microcosm of information. One cell might hold a single bold image, another a key metric, and another an interactive toggle. Importance is implied by size (the largest cell is the hero feature), allowing users to scan content like a display cabinet without cognitive overload.

About This Style

Bento Grid is a curated UI design style featuring light aesthetics. This style is well-suited for SaaS products, landing pages, portfolios, and any digital interface that aims to create a strong visual identity. The Bento Grid approach prioritises a consistent visual language — from color palette and typography to spacing rhythms and interactive states — so every element reinforces the overall design intent.

The Bento Grid design language emphasises [CONFIGURATION], [PROMPT], Subject:, Visual Atmosphere & Aesthetic:. Every visual decision — from component proportions to micro-interactions — is guided by the principle of palette:. This produces interfaces that feel purposeful and polished rather than decorative, making the style especially effective for products that need to communicate quality and clarity at a glance.

The Bento Grid source template is implemented using typography, Tailwind, gradient, Typography. The code is structured as a single, self-contained HTML file with no external dependencies, making it straightforward to inspect, adapt, and integrate into any frontend stack. Key implementation details — including layout structure, color tokens, and animation timing — are documented inline so you can understand every decision without guesswork.

**Role:** You are a Senior Frontend Architect and UI/UX Engineer with a specialization in Apple-inspired design systems and modular grid layouts. You have an obsession for "pixel-perfect" typography, smooth interactions, and performant CSS architectures. **Task:** Develop a complete, single-file landing page using the **Bento Grid (Apple Style)** aesthetic. **[CONFIGURATION]** - **[STYLE_NAME]:** Bento Grid / Apple Aesthetic - **[INDUSTRY]:** Next-Gen Productivity & Knowledge Base - **[PROJECT_NAME]:** GRID_OS - **[TECH_STACK]:** HTML5 + Modern CSS3 (CSS must be embedded within `<style>` tags. No external frameworks like Tailwind or Bootstrap). - **[PAGE_STRUCTURE]:** Header, Hero, Trust Bar, Feature Grid (The Core Bento Layout), Workflow, Metrics, Testimonials, Pricing, Multi-column Footer. **Technical Requirements:** 1. **Global Design Tokens (`:root`):** - **Palette:** Apple-style neutrals. `--bg-body: #F5F5F7;` (Off-white), `--bg-card: #FFFFFF;`, `--text-main: #1D1D1F;`, `--text-secondary: #86868B;`. - **Accent:** `--accent-color: #0071E3;` (Apple Blue) or a soft gradient `--accent-gradient: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);`. - **Geometry:** `--radius-sm: 12px;`, `--radius-md: 24px;`, `--radius-lg: 32px;`. - **Depth:** `--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);`, `--shadow-md: 0 12px 24px rgba(0,0,0,0.06);`. - **Typography:** `--font-main: 'SF Pro Display', 'Inter', -apple-system, sans-serif;`. 2. **Core Layout Logic (CSS Grid):** - The entire page layout should feel modular. - **The Bento Grid:** The "Feature Grid" section must use `display: grid` with `grid-template-columns: repeat(4, 1fr)`. - Use `grid-column: span x` and `grid-row: span y` to create the bento box effect where cards have different sizes (1x1, 2x1, 2x2, 4x2) but fit perfectly together. - Cards must have `overflow: hidden` to contain inner images/media perfectly. 3. **Advanced Visual Effects:** - **Frosted Glass:** The Header and floating UI elements must use `backdrop-filter: blur(20px)` and `background: rgba(255, 255, 255, 0.7)`. - **Squircle Smoothing:** If possible, simulate squircle corners using `clip-path` or standard border-radius with careful anti-aliasing. - **Micro-Interactions:** On `:hover`, Bento cards should slightly scale (`transform: scale(1.02)`) and shadows should deepen. Text content inside should shift slightly. - **Subtle Gradients:** Use ultra-subtle, barely-there mesh gradients inside specific cards to break the monotony of white. 4. **Scroll-Driven Animations:** - Use `animation-timeline: view()` with a simple reveal animation. - As the user scrolls, the Bento cards should stagger in (translate Y + opacity fade) for a premium feel. 5. **Custom Scrollbar (Minimalist):** - Target `::-webkit-scrollbar`. - Width: `8px`. - Track: Transparent. - Thumb: A rounded pill shape, colored `--text-secondary` with `opacity: 0.5`, mimicking the native macOS scrollbar behavior. 6. **Section Details:** - **Hero:** A split layout. Large text on the left, and a "Mini Bento" visual on the right representing the workspace interface. - **Metrics:** A horizontal scrollable bento row or a dense 4-column grid displaying big numbers. - **Pricing:** Three cards. The "Pro" card should have a soft, colorful border or shadow glow to stand out, maintaining the clean aesthetic.

# Visual Design Prompt for Midjourney v7 / Nano Banana **[CONFIGURATION]** [STYLE_NAME] = Bento Grid / Apple Style [INDUSTRY] = Next-Gen Productivity & Knowledge Base [PROJECT_NAME] = GRID_OS [PAGE_STRUCTURE] = Header, Hero, Trust Bar, Core Bento Grid, Workflow, Metrics, Testimonials, Pricing, Footer. **[PROMPT]** **Subject:** A high-fidelity, photorealistic UI design of a landing page for a productivity software called "GRID_OS". The design follows a strict "Bento Grid" layout philosophy, reminiscent of Apple's promotional materials and modern SaaS aesthetics. **Visual Atmosphere & Aesthetic:** * **Vibe:** Ultra-clean, organized, premium, and calm. * **Palette:** An off-white, light gray background (#F5F5F7) with stark white cards (#FFFFFF). High contrast black text for headings. Subtle splashes of color (Soft Blue, Pastel Purple) used only within the cards as accents. * **Materiality:** Smooth matte surfaces, soft dispersed shadows (ambient occlusion), and subtle frosted glass effects on the navigation bar. Corners are deeply rounded (24px - 32px squircle). **Detailed Section Breakdown:** 1. **Header:** A floating, pill-shaped navigation bar with a glassmorphism effect, containing the logo and a "Get Started" button. 2. **Hero Section:** A split layout. Large, tracking-tight typography on the left: "ORGANIZE EVERYTHING." On the right, a hero image displaying a 3D tilted view of the software interface. 3. **The Core Bento Grid (Centerpiece):** A strictly aligned grid of modular cards in varying sizes (1x1, 2x1, 2x2). * *Card 1:* A graph showing productivity up 300%. * *Card 2:* A close-up of a UI toggle switch in active state. * *Card 3:* A minimalist icon set. * *Card 4:* A photo of a user smiling, looking at a tablet. * *Note:* The gap between cards is perfectly consistent (e.g., 20px). 4. **Workflow:** A horizontal scroll section showing "drag and drop" interactions. 5. **Metrics:** Large, bold numbers displayed inside white rounded squares. 6. **Testimonials:** Two large cards featuring user avatars and concise quotes in a serif font for contrast. 7. **Pricing:** Three simple, vertical cards. The center card has a very subtle, colorful glowing border. 8. **Footer:** A clean 4-column layout with grey text on the light grey background. **Rendering Quality:** Figma expert export, 8k resolution, pixel-perfect typography (San Francisco / Inter), soft studio lighting, architectural layout.