Flexible Productivity Bento demo
Flexible Productivity Bento

A modular bento-grid layout with clean, rounded cards that neatly organize productivity features in a tidy, modern SaaS aesthetic.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 17.8 KB · 2435 words
# SYSTEM PROMPT — CODING AI: BUILD THE "FLEXIBLE PRODUCTIVITY BENTO" LANDING PAGE

**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page in a single response, on the first attempt. Every rule below is mandatory unless explicitly marked as an exception.

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**0.1 Product & Theme**
- Build a marketing landing page for a **customizable, modular productivity platform** (Corporate & SaaS tone, trustworthy and clean).
- Style name: **"Flexible Productivity Bento"** (translated from the Portuguese source spec *"Bento Produtividade Flexível"*).
- Style type: Modular, Organized, Modern. Design era: **"2026+ Smart Organization."**
- Keywords: productivity, modular, customizable, bento grid, organized, efficient, modern, intuitive, flexible, clean.
- Invent a short, brandable product name (e.g., "BentoFlow") and use it consistently across the header, hero, and footer.

**0.2 Visual Direction**
- Bento grid layouts with rounded cards and soft shadows; clean sans-serif typography; minimalist icons; hover micro-interactions with card expansion; smooth, organized element transitions; light blue and mint green accents; an intuitive, flexible, modular feel throughout.

**0.3 Color Palette (source spec, translated)**
- **Primary:** Light Blue `#ADD8E6`, Mint Green `#98FB98`, White `#FFFFFF`, Soft Gray `#F0F2F5`
- **Secondary:** Pastel Yellow `#FFFACD`, Peach Pink `#FFDAB9`, Lavender `#E6E6FA`, Ink Black `#333333`
- **Exception clause (pure white):** The source spec lists `#FFFFFF` as the base background. Per mandatory token rules, **never use `#FFFFFF`** — the light page background is Soft Gray `#F0F2F5`, and near-white card surfaces use `#FEFEFE`.

**0.4 Required Sections (in this order)**
Sticky header/nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

**0.5 Copy Language (mandatory)**
- The source specification is in Portuguese. **All user-facing copy must be written in English** — do not output any Portuguese text.
- Write realistic, specific, production-quality marketing copy. Lorem ipsum and generic filler ("Feature 1", "Your text here") are prohibited.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states are applied via class/ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays clean and semantic; changing the site's look must require editing only `style.css`, never the markup.
- **Zero inline event handlers:** No `onclick="..."` attributes; all JavaScript listeners attach inside `script.js`.

### 1.2 CSS Variables & Theme Tokens
Store all visual tokens in `:root` exactly as defined below (light theme):

```css
:root {
  /* Brand pastels */
  --primary: #ADD8E6;           /* Light Blue — fills, badges, accents */
  --primary-strong: #1F6F82;    /* Accessible deepened light blue — links, focus rings */
  --secondary: #98FB98;         /* Mint Green — success fills, accents */
  --secondary-strong: #1E7A4E;  /* Accessible deep mint — success text/icons */
  --accent-yellow: #FFFACD;     /* Pastel Yellow — bento card tint */
  --accent-peach: #FFDAB9;      /* Peach Pink — bento card tint */
  --accent-lavender: #E6E6FA;   /* Lavender — bento card tint */

  /* Surfaces & text */
  --bg-primary: #F0F2F5;        /* Soft Gray page background */
  --bg-secondary: #FEFEFE;      /* Card surfaces — never #FFFFFF */
  --text-primary: #333333;      /* Ink Black */
  --text-secondary: #5B6472;
  --text-on-fill: #333333;      /* Text on pastel fills */

  /* Feedback */
  --text-success: #1E7A4E;
  --text-error: #C63C3C;
  --border-default: #E3E7EC;
  --border-error: #E0A3A3;
  --border-success: #B5E3C6;

  /* Shape, depth, motion */
  --radius-sm: 8px;
  --radius-md: 12px;            /* Per source spec */
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.05);   /* Per source spec */
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.10);
  --spacing-gap: 1.5rem;        /* Bento grid gap */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;    /* Per source spec */
  --ease-standard: ease-in-out;

  /* Elevation / stacking */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* Type */
  --font-base: "Inter", sans-serif;
}
```

Dark theme overrides (defined under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class):

```css
--primary: #ADD8E6;            /* Pastels remain as accent fills */
--primary-strong: #8FD6E8;     /* Lightened for dark backgrounds */
--secondary: #98FB98;
--secondary-strong: #8FE0B0;
--accent-yellow: #333224;      /* Darkened tint surfaces */
--accent-peach: #352A24;
--accent-lavender: #2A2736;
--bg-primary: #17191E;         /* Deep ink page, derived from #333333 */
--bg-secondary: #21242B;       /* Elevated card surface */
--text-primary: #F1F3F6;
--text-secondary: #A6ADB8;
--text-on-fill: #333333;       /* Pastel fills keep ink text in dark mode */
--text-success: #8FE0B0;
--text-error: #FF9C9C;
--border-default: #343943;
--border-error: #6E3B3B;
--border-success: #2F5B45;
--shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.40);
--shadow-md: 0 12px 28px rgba(0, 0, 0, 0.55);
```

**Contrast pairing (mandatory, both themes):** Buttons, badges, and chips keep pastel fills paired with `--text-on-fill` (#333333) in **both** themes. Tinted card surfaces switch from pastel (light mode → ink text) to darkened blends (dark mode → light text). Never place light text on pastel fills or dark text on dark surfaces.

### 1.3 Mandatory Dark Mode Support
- **Exception clause:** The source spec's Light/Dark line marks dark mode as not required; dark mode is nevertheless **mandatory** per core architecture — implement it with the deep ink tokens above, keeping the pastel palette as accent fills.
- Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; theme switching must require zero HTML restructuring.
- **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Apply the stored theme as the **first action** of `script.js` to prevent a flash of the wrong theme.
- **Visible toggle:** Header icon button using Material Symbols `light_mode` / `dark_mode`, with correct `aria-pressed` and dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment (e.g., stacked text blocks using `flex-start`).
- **Mobile-Friendly First:** Build single-column at base and scale up with `min-width` media queries; no horizontal overflow at any viewport ≥ 320px.
- **Exception:** `.bento-grid-container` uses **CSS Grid** (required for the bento aesthetic: `grid-template-columns`, column/row spans, `gap: var(--spacing-gap)`). All other layout containers use Flexbox.

### 1.5 CSS Approach & Class Convention
- Use **hand-written modern CSS in `style.css`** (no framework) — the source spec supplies raw CSS and custom class names.
- **Mandatory spec classes:** `.bento-grid-container`, `.bento-card`, and `.card-expand-hover` must exist and be used exactly as named.
- **One consistent convention:** flat, lowercase, hyphenated component classes (`.btn`, `.btn-primary`, `.btn-ghost`, `.section-header`, `.faq-item`, `.faq-answer`, `.input-group`, `.field-error`, `.theme-toggle`, `.nav-link`, `.badge`, `.skeleton`, `.empty-state`, `.tint-blue`, `.tint-mint`, `.tint-lavender`, …) plus `.is-*` state classes (`.is-loading`, `.is-open`, `.is-success`, `.is-error`, `.is-visible`). Never mix in camelCase or BEM `__`/`--` syntax.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load **Inter** from Google Fonts (weights 400, 500, 600, 700, 800) via `<link>`; bind to `--font-base` on `body`. Fluid type scale: `h1` ≈ `clamp(2rem, 5vw, 3.5rem)` weight 800 with tight line-height; section `h2` ≈ `clamp(1.5rem, 3vw, 2.25rem)` weight 700; body 1rem / 1.6.
- **Icons:** **Google Material Symbols Rounded** via its Google Fonts stylesheet. Every icon: `<span class="material-symbols-rounded" aria-hidden="true">icon_name</span>`. Use `font-variation-settings: 'FILL' 1` for filled icons (e.g., stars).
- **Raw inline SVGs, emoji icons, and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button (`.btn` + variants)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `border-radius: var(--radius-md)`; `font-weight: 600`; `transition: var(--transition-normal)`.
- **Variants:** `.btn-primary` (fill `--primary`, text `--text-on-fill`), `.btn-secondary` (fill `--secondary`, ink text), `.btn-ghost` (transparent, 1px `--border-default`, text `--text-primary`), `.btn-danger` (distinct error styling, clearly visible in both themes).
- **Hover:** brightness shift + elevation from `--shadow-sm` to `--shadow-md`; `cursor: pointer`.
- **Focus-visible:** distinct ring via `outline: 2px solid var(--primary-strong); outline-offset: 2px;` — never remove it.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** `pointer-events: none`, `aria-busy="true"`, an animated Material Symbol `progress` (CSS rotation) or CSS border spinner; button dimensions must not change; double-clicks prevented.
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` with the `disabled` attribute.
- **Success/Error (`.is-success` / `.is-error`):** border and text driven by `--text-success` / `--text-error`, icon swap to `check_circle` / `error`, announced via an `aria-live` region.

### 2.2 Bento Card (`.bento-card`)
- **Default:** `background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);` generous padding; internal layout is a flex column.
- **Hover (`.card-expand-hover`):** the signature micro-interaction — `transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md);` with the border shifting toward the card's pastel tint and the icon chip subtly scaling; `transition: var(--transition-normal)`.
- **Focus-within:** border turns `--primary-strong` with a soft ring when a child link/button receives focus.
- **Loading (skeleton):** a `.skeleton` shimmer utility (animated gradient sweep, `aria-hidden="true"`), applied to the hero preview grid on first paint and removed by JS; skeleton blocks must match final dimensions so nothing jumps.
- **Empty state (`.empty-state`):** centered Material icon + short guidance text; demonstrate it inside the hero preview mock (e.g., a "No tasks scheduled" mini-card).
- **Tints:** `.bento-card` accepts `.tint-blue`, `.tint-mint`, `.tint-yellow`, `.tint-peach`, `.tint-lavender` modifier classes mapped to the accent tokens.

### 2.3 Form & Input (`.input-group`)
- **Structure:** flex column wrapper containing `<label>`, `<input>`, and a dedicated `.field-error` feedback container with `aria-live="polite"`.
- **States (all via CSS):** empty, focused (ring `--primary-strong`), filled, valid (`--border-success` + `check` icon), invalid (`--border-error`, error text in `--text-error` + `error` icon), disabled, read-only.
- Apply to the Final CTA email capture; validate client-side in `script.js` with a visible success state.

### 2.4 FAQ Accordion & Modal / Popup Rules
- **FAQ accordion:** each item is a `<button class="faq-trigger" aria-expanded="false" aria-controls="...">` plus a `.faq-answer` region; smooth expand/collapse via CSS (`grid-template-rows: 0fr → 1fr` technique or equivalent); chevron Material icon rotates 180°; fully keyboard operable; never rely on color alone to show open state.
- **Modal/overlay (only if you add one, e.g., a demo lightbox):** centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, animated opening/closing, loading state, `z-index: var(--z-modal)`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing; bento grids collapse to 1 column on mobile, 2 on tablet, full asymmetric bento on desktop; zero horizontal overflow.
- **Smooth animations:** every state change transitions with `var(--transition-normal)` (use `--transition-fast` for small hovers); when animating `transform`/`box-shadow`, prefer listing specific properties for performance. **Respect `prefers-reduced-motion: reduce`** — disable transforms, shimmer, and scroll animations.
- **Accessibility (a11y):** WCAG AA contrast in both themes per the pairing rules in 1.2; never communicate state by color alone (always icon + text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), a single `h1`, logical heading order; skip-to-content link; full keyboard operability; visible focus; `aria-live` regions for form feedback, pricing updates, and loading states.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** any destructive control uses `.btn-danger`, visually distinct in both light and dark themes.
- **Scroll reveal:** subtle staggered entrance animations via IntersectionObserver adding `.is-visible` (opacity/translate), disabled under reduced motion.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** separate `index.html`, `style.css`, and `script.js`. A single `<script src="script.js" defer>` reference; no other script blocks, no inline styles, no inline handlers.
- **Naming convention:** one consistent convention per 1.5 across HTML, CSS, and JS — never mix conventions.
- **Copy:** original English copy per 0.5. Placeholder `href="#"` is allowed only for footer links with no corresponding section.
- **JS scope (vanilla, dependency-free, in `script.js` only):** theme toggle + persistence; mobile menu; FAQ accordion; pricing billing toggle; email validation with loading → success/error states; smooth anchor scrolling; header elevation on scroll; scroll-reveal; skeleton removal.

---

## 5. PAGE SECTION BLUEPRINT

**5.0 Header (sticky):** logo (Material `grid_view` icon + product name), anchor nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (per 1.3), `.btn-primary` "Get started", and a mobile hamburger button (`aria-expanded`, animated panel, `z-index: var(--z-dropdown)`, closes on `Esc`).

**5.1 Hero:** desktop bento split — left: copy block with an `h1` about flexible, modular productivity, a subhead, `.btn-primary` "Start for free" + `.btn-ghost` "See how it works" (anchor), and a trust line ("Free forever plan · No credit card required"); right: a **CSS-built product preview** — a mini bento dashboard (task cards, progress bars, a calendar chip, an `.empty-state` mini-card) using pastel tints, skeleton shimmer on first paint, and `.card-expand-hover` on each tile. Mobile: stacked, preview below copy.

**5.2 Features (3 cards):** `.bento-grid-container` with three `.bento-card`s in asymmetric desktop spans (one featured/wider), single column on mobile. Each card: pastel icon chip (blue / mint / lavender), `h3`, description, "Learn more" link. Topics aligned to the keywords: (1) modular boards & views, (2) customizable widgets & dashboards, (3) flexible workflows & automation.

**5.3 How It Works (3 steps):** three step cards with numbered pastel badges (01 / 02 / 03), a Material icon, title, and text; flex row on desktop, stacked on mobile; optional CSS-only connector line on desktop; staggered scroll reveal.

**5.4 Testimonials:** three `.bento-card`s with a 5-star rating (filled Material `star` icons), a quote, a CSS avatar circle with initials, and name + role; varied pastel tints; hover lift.

**5.5 Pricing (3 tiers):** a Monthly/Annual segmented billing toggle (`aria-pressed`, prices update with a transition and an `aria-live` announcement, annual shows a "Save 20%" badge). Three cards: Free, Pro (featured — "Most popular" badge, pastel tint or elevated shadow/scale, `.btn-primary`), and Team. Each card: tier name, price, feature list with Material `check` icons, and a CTA (featured `.btn-primary`, others `.btn-ghost`).

**5.6 FAQ:** 5–6 real questions (customization limits, integrations, pricing, data portability, offline access, security); accordion per 2.4; single column, max-width ~720px.

**5.7 Final CTA:** full-width band — light mode: pastel gradient (Light Blue → Mint) with ink text; dark mode: dark surface with a subtle pastel glow and light text. Contains an `h2`, subcopy, an `.input-group` email capture + `.btn-primary` demonstrating loading → success/error states, and a secondary "View pricing" link.

**5.8 Footer:** brand block (logo, one-line tagline), secondary link columns (Product → in-page anchors; Company → About, Careers, Contact; Resources → Blog, Help Center, Privacy, Terms), social icon links (Material Symbols with `aria-label`s), copyright with dynamic year. Do not duplicate the newsletter form here.

---

## 6. ACCEPTANCE CHECKLIST (verify before delivering)

- Zero `style="..."` attributes, zero inline handlers, zero inline SVGs; every icon is a Material Symbol.
- `.bento-grid-container`, `.bento-card`, and `.card-expand-hover` exist and are used.
- Dark mode toggle works, persists via `localStorage`, defaults to system preference; AA contrast in both themes.
- All states implemented: buttons (hover / focus / active / loading / disabled / success / error), cards (hover expansion / focus-within / skeleton / empty), inputs (all states in 2.3), FAQ accordion animated and keyboard operable.
- No horizontal scroll at 320px; `prefers-reduced-motion` respected.
- All copy in English, realistic, no lorem ipsum; files separated per Section 4.
- Deliver the complete landing page in a single response, on the first attempt.