Bento Grid demo
Bento Grid

A clean modular layout of rounded, grid-arranged content blocks inspired by Japanese bento boxes and Apple's polished minimalist design language.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 13.1 KB · 1787 words
# SYSTEM PROMPT — SENIOR FRONTEND ENGINEER TASK: BUILD A COMPLETE "BENTO GRID" LANDING PAGE

**Role & Mission:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in the **Bento Grid** style (2020s Apple Design Language) **on the first attempt**. Generate the final `index.html`, `style.css`, and `script.js` in a single response — no scaffolding, no partial output. Every rule below is mandatory. Where a detail is unspecified, make the most professional Apple-style decision and proceed.

## 1. PROJECT BRIEF

- **1.1 Theme:** Bento Grid — modular, organized, compartmentalized, Apple-inspired ("bento box" aesthetic: tidy compartments, dedicated spaces, clean dashboard feel). Era: 2020s Apple Design Language. Full Light mode + Full Dark mode support.
- **1.2 Sections (in this order):** Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.
- **1.3 Copy:** Invent ONE coherent product identity (e.g., a modular productivity/workspace SaaS that matches the bento positioning). Write ALL user-facing copy in English, in a confident, concise Apple tone — realistic headlines, feature names, prices, testimonials, and Q&As. Lorem ipsum is prohibited.

## 2. BENTO GRID STYLE SPECIFICATION

- **2.1 Lattice (the only permitted CSS Grid context):** Each major section renders as its own bento lattice: `display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: var(--spacing-gap)` (16px). Compartments use varied spans — 1x1, 2x1 (`grid-column: span 2`), 1x2 (`grid-row: span 2`), 2x2. No section may collapse into a flat row of identical boxes. Responsive collapse: 4 columns ≥1024px → 2 columns 640–1023px (2-wide cells become full-width) → 1 column <640px (all cells full width; relax `grid-auto-rows` to `auto`). Never allow horizontal overflow at any viewport.
- **2.2 Compartments:** Surface `var(--bg-secondary)`; padding: 24px; `border-radius: var(--radius-lg)` (20px); clean border `1px solid var(--border-default)`; `box-shadow: var(--shadow-sm)` = `0 2px 8px rgba(0,0,0,0.04)`. Hover: `translateY(-2px)` lift + `var(--shadow-md)`, with `transition: transform var(--transition-fast) var(--ease-standard)` (200ms). Page background: `var(--bg-primary)` (#F5F5F7) — the page background is never pure white.
- **2.3 Light Tokens (`:root`):** `--primary: #0071E3` (accent blue — all primary actions; derived hover tone `#0071E3` → `#0077ED`) · `--secondary: #1D1D1F` (dark grey — inverted contrast blocks) · `--bg-primary: #F5F5F7` · `--bg-secondary: #FFFFFF` — **Explicit exception to the near-white rule:** the Bento palette mandates Pure White for elevated compartment surfaces, so `#FFFFFF` is permitted ONLY on `--bg-secondary` surfaces; `--bg-primary` must remain `#F5F5F7`, never `#FFFFFF` · `--text-primary: #1D1D1F` · `--text-secondary: #6E6E73` (contrast-adjusted from `#86868B` to meet WCAG AA on light surfaces; `#86868B` is allowed only for large/decorative text) · `--text-success: #34C759` · `--text-error: #FF3B30` · `--border-default: #E8E8ED` · `--border-success: #34C759` · `--border-error: #FF3B30` · `--radius-sm: 12px` (buttons/inputs) · `--radius-md: 16px` · `--radius-lg: 20px` (compartments) · `--shadow-sm: 0 2px 8px rgba(0,0,0,0.04)` · `--shadow-md: 0 8px 24px rgba(0,0,0,0.08)` · `--spacing-gap: 16px` · `--transition-fast: 200ms` · `--transition-normal: 300ms` · `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)` · `--z-dropdown: 100` · `--z-modal: 200` · `--z-toast: 300` · `--font-base: 'Inter', -apple-system, 'Segoe UI', sans-serif`.
- **2.4 Contrast Pairing (enforced in every theme):** Light surfaces (`#F5F5F7`/`#FFFFFF`) always carry dark text; dark surfaces (`#1D1D1F`/`#000000`) always carry light text.
- **2.5 Dark Tokens (mandatory, defined under BOTH `@media (prefers-color-scheme: dark)` AND a `.dark` class):** `--primary: #0A84FF` · `--secondary: #F5F5F7` · `--bg-primary: #000000` · `--bg-secondary: #1D1D1F` · `--text-primary: #F5F5F7` · `--text-secondary: #86868B` · `--border-default: #2C2C2E` · success/error unchanged · shadows black-based. Set the `color-scheme` property per theme so native controls match.

## 3. STRICT ARCHITECTURE RULES

- **3.1 CSS-First & Zero Inline CSS:** All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML. Style only via class/ID selectors. HTML stays semantic and presentation-agnostic — a full re-theme must be achievable by editing CSS alone.
- **3.2 Token-Driven CSS:** Every color, radius, shadow, spacing, transition, easing, and z-index value must be consumed as `var(--...)` — no hardcoded hex/px values inside component rules (exceptions: the token blocks in 2.3/2.5 and the mandated grid metrics in 2.1).
- **3.3 Mandatory Dark Mode:** Visible header toggle button using a Material Symbol (`light_mode`/`dark_mode`) with correct `aria-pressed` and `aria-label` (e.g., "Switch to dark mode"); switching tokens must require zero HTML restructuring. Persist the user's choice in `localStorage` (e.g., key `"theme"`); first visit falls back to `prefers-color-scheme`; honor OS-level changes while no explicit choice exists; the page must still render correct dark styles with JavaScript disabled (via the media query).
- **3.4 Flexbox & Mobile-First:** Every non-grid layout (header, buttons, compartment interiors, form rows, footer columns) uses Flexbox and **must default to `align-items: center`** unless an explicitly justified exception applies; rows must convert to columns at small viewports with no horizontal scrolling. **Explicit exception:** the bento lattices themselves use CSS Grid as mandated by the theme (2.1); Flexbox remains the rule for everything inside and between compartments.
- **3.5 Framework:** Use Tailwind CSS (Play CDN permitted as framework infrastructure) OR clean hand-written CSS organized with Tailwind's `@layer` philosophy (tokens → base → components → utilities). Utility classes must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`). Declare your choice and stay consistent.
- **3.6 Typography & Icons (Google-only):** Load **Inter** (weights 400/500/600/700) via Google Fonts `<link>`, bound to `--font-base`; fluid headings via `clamp()`; body ~16px with line-height ≥1.5. Icons exclusively via **Google Material Symbols (Outlined)** (`<span class="material-symbols-outlined">check_circle</span>`). Inline SVGs, local icon files, and emoji-as-icons are forbidden.

## 4. COMPONENT SPECIFICATIONS (ALL STATES REQUIRED)

- **4.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):** Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-sm`. Hover: brightness/shadow shift with `cursor: pointer`. Focus: distinct ring (`outline: 2px solid var(--primary); outline-offset: 2px`) visible in both themes. Active: `transform: scale(0.97)`. Loading (`.btn--loading`): blocks interaction and double-clicks, renders a CSS spinner or rotating Material Symbol without changing button dimensions. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`. Success/Error (`.btn--success` / `.btn--error`): temporary feedback styled via `--text-success`/`--text-error` with matching borders. `.btn--danger` must be defined and read clearly in both light and dark themes.
- **4.2 Cards / Bento Compartments (`.card`):** Default: Flexbox interior, `--bg-secondary`, `--border-default` border, `--shadow-sm`. Hover: `translateY(-2px)` + `--shadow-md` (200ms). Focus-within: border highlights to `--primary` when a child link/button receives focus. Loading (`.card--skeleton`): CSS shimmer animation that reserves real dimensions (no layout jump). Empty (`.card--empty`): centered Material Symbol icon + short guidance text. Skeleton and empty-state classes must exist in the CSS even where the static page does not mount them.
- **4.3 Forms & Inputs (`.input-group`):** Flex container wrapping a `<label>`, an `<input>`, and a dedicated error-feedback element linked via `aria-describedby` inside an `aria-live="polite"` region. States: empty; focused (outline ring from `--primary`); filled; valid (`.is-valid`: `--border-success` + check icon); invalid (`.is-invalid`: `--border-error`, red helper text, error icon); disabled; read-only. Never communicate state by color alone — always pair with text or icon.
- **4.4 Accordion (FAQ) & Modal Policy:** No modal is required on this page. FAQ = accessible accordion: each item is a `<button aria-expanded aria-controls>` + panel; Material Symbol chevron rotates on toggle; open/close animated via CSS transitions; fully keyboard operable. IF any dialog is ever introduced, it must implement opening/open/loading/success/closing states (all CSS-animated), a centered flex overlay (`align-items: center`), a backdrop, a Material Symbol close button, keyboard focus trapping, Esc and overlay-click close, and `z-index: var(--z-modal)`.

## 5. SECTION-BY-SECTION REQUIREMENTS

- **5.1 Header (minimal, sticky):** Translucent surface + `backdrop-filter: blur()`, `--z-dropdown`, brand (wordmark or Material Symbol + name), the mandatory theme toggle (3.3), and one small `.btn--primary` "Get started" anchor. Include a skip-to-content link.
- **5.2 Hero:** 4×2 lattice — one 2x2 flagship compartment (eyebrow, `h1` clamp-scaled, subcopy, `.btn--primary` + `.btn--secondary` pair) + one 1x2 visual compartment (CSS-only decoration: radial-gradient field or composed oversized Material Symbols — no image assets) + two 1x1 stat compartments (large metric + label).
- **5.3 Features (3 cards):** Spans 2x1 + 1x1 + 1x1 (or mirrored). Each: tinted rounded icon chip (Material Symbol), title, one-to-two-line description.
- **5.4 How It Works (3 steps):** Spans 1x1 + 2x1 + 1x1. Each: numbered badge (01/02/03), Material Symbol, title, description. Reading order must remain step 1→3 at every breakpoint.
- **5.5 Testimonials:** Two-row lattice — one featured 2x2 quote + one 2x1 quote + two 1x1 quotes (4 total). Quote text, name, role, and a CSS initials-circle avatar (no external images); optional Material Symbol star rating.
- **5.6 Pricing (3 tiers):** A dedicated 3-column bento row (same 16px gap): tier name, price, feature list with check icons, CTA button. Middle tier = "Most Popular": badge, `--primary` border, stronger shadow, `.btn--primary` (flanking tiers use `.btn--secondary`). The highlight must be distinct in both themes without color-only cues.
- **5.7 FAQ:** One full-width compartment; internal two-column flex layout (heading + blurb | accordion of ≥5 realistic Q&As), collapsing to one column on mobile.
- **5.8 Final CTA:** Full-width compartment styled `background: var(--secondary); color: var(--bg-primary);` so it auto-inverts with correct contrast pairing in both themes. Contains an `h2`, supporting copy, and an email-capture `.input-group` (label + email input + `.btn--primary` submit + aria-live error container). JS behavior: invalid email → `.is-invalid` + error message; valid → button loading state, double-submit blocked, then success state + polite `aria-live` confirmation.
- **5.9 Footer:** Brand + tagline block plus 3–4 secondary link columns (Product, Company, Resources, Legal) in a wrapping flex layout; bottom bar with © line and legal links. Labels must be real; `href="#"` is permitted only where targets are unspecified. Every link has visible hover and focus states.

## 6. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** Fluid type and spacing, breakpoints per 2.1, zero horizontal overflow.
- **Smooth motion:** Every state change transitions via `var(--transition-fast)` / `var(--transition-normal)`; all non-essential motion (lifts, shimmer, chevron rotation, smooth scrolling) must be disabled under `prefers-reduced-motion`.
- **Accessibility:** WCAG AA contrast in both themes; never color-only state; semantic HTML5 (`header`/`main`/`section`/`nav`/`footer`, one `h1`, logical heading order); correct ARIA on the toggle, accordion, and form; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback.
- **Mandatory visual feedback:** Every click, hover, focus, and submission produces a visible state change.
- **Destructive actions:** `.btn--danger` (4.1) must remain visually distinct in both light and dark themes.

## 7. DELIVERABLES & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, and `script.js`. `index.html` contains only: Google Fonts + Material Symbols `<link>` tags, (optionally) the Tailwind CDN reference, semantic markup, and exactly ONE `<script src="script.js" defer></script>`. Zero inline styles; zero inline script blocks.
- **Naming convention:** One convention only — BEM for all custom classes (`.bento__cell--2x2`, `.btn--primary`, `.input-group__error`, `.card--skeleton`). If Tailwind utilities are used, restrict them to layout concerns and never mix conventions.
- **script.js scope:** Theme toggle + persistence, FAQ accordion behavior, email form validation + button states, reduced-motion-safe anchor scrolling. Nothing else.
- **Completeness:** Ship the finished page in this single response — all sections populated with real English copy, all component states styled, no TODOs, no lorem ipsum, and no unrequested placeholder content.