Bento Curated News demo
Bento Curated News

A clean bento-grid landing page that organizes curated news into modular, well-spaced cards with modern minimal typography.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 13.7 KB · 1826 words
**ROLE & TASK**

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt for **"Bento Curated News"** (English rendering of the source theme *"Bento Notícias Curadas"*) — a personalized, curated news platform. Design language: **Minimalism & Swiss** — strict grid discipline, generous whitespace, typography-led hierarchy, restrained ornamentation, functional color. Era: 2026+ intelligent news consumption. Keywords: personalized news, content curation, bento grid, organized, informative, clean, intuitive, modern, relevant, engaging.

---

**1. STRICT RULES & ARCHITECTURE**

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden in HTML.
* All design properties, layout rules, and states are targeted via class/ID selectors only.
* HTML remains semantic and style-agnostic; changing the look must never require markup edits.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`:
* **Colors (light/default):** `--primary: #001F3F` (navy); `--secondary: #FFDAB9` (soft orange); `--bg-primary: #fefefe`; `--bg-secondary: #F5F5F5`; `--text-primary: #001F3F`; `--text-secondary: #333333`; `--text-success: #1E7C2E` (darkened emerald for AA text contrast — reserve `#2ECC40` for icons/borders/accents); `--text-error: #C62828`; `--border-default: rgba(0,31,63,0.12)`; `--border-error: #C62828`; `--border-success: #2ECC40`; plus accent tokens `--accent-emerald: #2ECC40`, `--accent-lavender: #E6E6FA`, `--accent-yellow: #FFD700`, `--accent-orange: #FFDAB9`.
* **Exception (white):** the source palette lists `#FFFFFF`; per mandatory token rules, render every white background/surface as `#fefefe` — never `#ffffff`.
* **Contrast pairing:** every light token (`#FFDAB9`, `#E6E6FA`, `#FFD700`, `#F5F5F5`, `#fefefe`) pairs only with dark text (`#001F3F`/`#333333`); every navy surface pairs only with light text (`#fefefe`/`#FFDAB9`/`#F5F5F5`). Enforce in both themes.
* **Shape/elevation:** `--radius-sm: 6px`; `--radius-md: 8px`; `--radius-lg: 16px`; `--shadow-sm: 0 2px 5px rgba(0,0,0,0.03)`; `--shadow-md: 0 10px 28px rgba(0,31,63,0.12)`.
* **Motion/space:** `--spacing-gap: 1.5rem`; `--transition-fast: 0.15s ease-in-out`; `--transition-normal: all 0.3s ease-in-out`; `--ease-standard: ease-in-out`.
* **Stacking:** `--z-dropdown: 1000`; `--z-modal: 1050`; `--z-toast: 1100`.

**1.3 Mandatory Dark Mode**
* Define a complete dark token set under both `@media (prefers-color-scheme: dark)` and a class/attribute override (`.dark` or `[data-theme="dark"]`) — the class override wins.
* Dark tokens derive from navy: `--bg-primary: #001224`; `--bg-secondary: #00284D` (card surface `#002B4D`); `--text-primary: #F5F5F5`; `--text-secondary: rgba(245,245,245,0.72)`; `--border-default: rgba(245,245,245,0.16)`; shadows deepened; all accents (`#FFDAB9`, `#FFD700`, `#2ECC40`, `#E6E6FA`) verified for AA contrast on navy.
* Visible toggle in the header with `aria-pressed` and dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode"); persist via `localStorage`, falling back to `prefers-color-scheme` on first visit; switching requires zero HTML restructuring.
* **Exception:** the source specification marks light mode as the primary presentation — light is the default and design-critical target, but the complete, toggleable dark mode remains mandatory.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Flexbox for all linear layouts and component internals; every flex container defaults to `align-items: center` unless a justified exception is stated (e.g., `.input-group` stacks label/input with `align-items: stretch`).
* **Justified exception:** the bento tile arrangement itself uses CSS Grid (a bento grid cannot be expressed in flexbox); every card's internals remain flex.
* Mobile-first: single column ≤640px; rows collapse to columns on small viewports; zero horizontal scroll at any width ≥320px.

**1.5 Styling Approach**
* Clean custom CSS only (no framework) — the source spec supplies raw CSS values and semantic class names; honor them. Reusable component classes: `.btn`, `.card`, `.input-group`, `.bento-news-card`, `.article-thumbnail`, `.summary-hover`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Roboto (weights 400, 500, 700, 900) via Google Fonts `<link>` with preconnect; `--font-base: 'Roboto', sans-serif`. Swiss hierarchy: bold, tight-tracked fluid display sizes via `clamp()`, body line-height 1.6–1.7, uppercase letter-spaced eyebrow labels.
* **Icons:** Google Material Symbols (Outlined) via Google Fonts. Inline SVGs, local icon files, and emoji icons are forbidden.

**1.7 Language**
* All user-facing copy in English. Translate the Portuguese source theme: the brand renders as "Bento Curated News". No non-English strings in UI copy, class names, or file names.

---

**2. PAGE STRUCTURE & SECTION SPECIFICATIONS**

**2.0 Header (sticky)**
* Logo: Material Symbol `grid_view` + wordmark "Bento Curated News"; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle; primary CTA "Get Started" (opens signup modal, §3.4).
* Mobile: hamburger button (`aria-expanded`, `aria-controls`), slide-down panel, `Esc` closes, focus moves into the panel and returns to the trigger on close. Subtle shadow appears after scroll.

**2.1 Hero**
* Two-column (stacks on mobile). Left: eyebrow ("PERSONALIZED NEWS CURATION"), H1 (e.g., "Your news, arranged like a bento box."), subheadline on relevance and curation, primary CTA "Start Curating — Free" (opens modal), secondary anchor CTA "See How It Works", trust microcopy.
* Right: product preview — a bento grid of 4–6 `.bento-news-card` tiles of mixed spans (one feature tile, rest standard). Each card: `.article-thumbnail` (image via `https://picsum.photos/seed/<unique-seed>/…`, `object-fit: cover`, meaningful alt text), category chip with a Material Symbol icon (`science`, `sports_soccer`, `business_center`, `memory`), headline, source + read time, and a `.summary-hover` overlay (§3.2) revealing a 1–2 sentence summary.
* Cards initially render as `.skeleton` shimmer tiles (≤800ms simulated load), then reveal; skip the skeleton phase under `prefers-reduced-motion`.

**2.2 Features (3 cards)**
* Section header: eyebrow + H2 + one-line lede. Three `.feature-card` in a responsive row:
  1. "Smart Curation" — icon `auto_awesome` — AI assembles only stories relevant to your interests.
  2. "Your Bento, Your Rules" — icon `grid_view` — drag, resize, and organize category tiles.
  3. "Zero-Noise Reading" — icon `chrome_reader_mode` — ad-free, clutter-free, save-for-later.
* Each card: icon in a tinted chip (lavender / soft-orange / emerald tints with dark text), title, ≤2-line description. Hover: lift + shadow.

**2.3 How It Works (3 steps)**
* Numbered badges (01/02/03), icons, titles, descriptions:
  1. "Pick your interests" — icon `tune` — choose categories and trusted sources.
  2. "We curate your daily bento" — icon `auto_stories` — a fresh, relevant grid every morning.
  3. "Refine as you read" — icon `thumb_up` — likes and hides tune future editions.
* Desktop: three columns joined by a subtle rule; mobile: vertical timeline.

**2.4 Testimonials**
* Three `.testimonial-card`: 5-star rating (Material Symbol `star`, plus an accessible "Rated 5 out of 5" label — never color alone), quote, avatar as an initial circle (navy/orange tints), name + role (realistic, e.g., "Product Designer · daily reader"). 3-column → 1-column.

**2.5 Pricing (3 tiers)**
* Billing toggle: segmented control (Monthly / Yearly) with `aria-pressed`; updates prices via `data-monthly`/`data-yearly` attributes with a CSS transition; yearly shows a "Save 20%" chip.
* Tier 1 "Reader" — Free — 1 curated bento/day, 3 categories, standard layout — outline CTA "Start Free".
* Tier 2 "Curator" — $8/mo ($6/mo yearly) — "Most Popular" badge (yellow `#FFD700` chip, navy text), visually elevated (navy border or navy card with light text), unlimited categories, custom layouts, saved searches, offline reading — primary CTA "Choose Curator".
* Tier 3 "Newsroom" — $16/mo ($13/mo yearly) — 5 profiles, shared bentos, priority sources, API access — outline CTA.
* Feature lists use Material Symbol `check`. The highlighted tier must be distinct in both themes.

**2.6 FAQ**
* 5 questions as an ARIA accordion: `button.accordion-trigger` (`aria-expanded` + `aria-controls`), panel with `role="region"` + `aria-labelledby`; smooth height animation via `grid-template-rows: 0fr → 1fr`; `expand_more` chevron rotates 180°. Questions cover: how curation works, choosing sources, data privacy, changing categories, free plan/cancellation.

**2.7 Final CTA**
* Full-bleed navy band (light text, soft-orange accent): H2, supporting line, email capture `.input-group`: visible label, `input type="email"`, submit "Get Your First Bento". Full state flow: empty → focus ring → invalid (error border + `error` icon + message, `aria-describedby` + `aria-live`) → loading (button spinner, disabled) → success (button success state + toast "Check your inbox to confirm.", `role="status"`, `aria-live="polite"`, `--z-toast`). Simulate submission with a timeout; no backend.

**2.8 Footer**
* Brand block (logo + one-line description); secondary link columns: Product (Features, Pricing, FAQ, Changelog), Company (About, Careers, Press, Contact), Resources (Blog, Help Center, Community, API), Legal (Privacy, Terms, Cookies). In-page anchors where sections exist; others may use `href="#"`. Bottom bar: © 2026 Bento Curated News, social icons (Material Symbols `public`, `rss_feed`, `mail`).

---

**3. COMPONENT DESIGN SPECIFICATIONS**

**3.1 Buttons**
* `.btn` base: flex, `align-items`/`justify-content: center`, `gap: 0.5rem`, min 44×44px touch target, radius `--radius-md`, `transition: var(--transition-normal)`. Variants: `.btn-primary` (navy/light pairing), `.btn-secondary` (outline), `.btn-ghost`, `.btn-danger` (distinct in both themes).
* **Hover:** brightness/shadow shift + `cursor: pointer`. **Focus:** visible ring via `outline`/`box-shadow` tokens. **Active:** `transform: scale(0.97)`. **`.is-loading`:** disabled + `pointer-events: none` + rotating `progress_activity` icon spinner with no dimension change. **`[disabled]`:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success/Error:** temporary feedback states via `--text-success`/`--text-error`.

**3.2 Cards**
* `.card` base: `--bg-primary` surface, 1px `--border-default`, radius 8px, `--shadow-sm`; hover `translateY(-2px)` + `--shadow-md`; `:focus-within` border highlight.
* `.bento-news-card`: extends `.card`; the whole card is a single `<a>`; `.summary-hover` overlay (navy gradient scrim, light text) fades/slides in on hover and `:focus-within`; on `pointer: coarse` or `prefers-reduced-motion`, render the summary statically under the headline instead of as an overlay.
* Define `.skeleton` shimmer keyframes and an `.empty-state` pattern (Material Symbol + guidance text) in the stylesheet.

**3.3 Forms & Inputs**
* `.input-group`: flex column (justified `align-items: stretch` exception), label + input + `.input-feedback` container. States: empty, focus ring, filled, `.is-valid` (success border + `check_circle`), `.is-invalid` (error border + `error` icon + red message), disabled, read-only. Wire to the Final CTA form and the modal form.

**3.4 Modal**
* One signup modal ("Create your bento": name + email + submit), opened by the header "Get Started", hero primary CTA, and pricing CTAs. `role="dialog"`, `aria-modal`, `aria-labelledby`; backdrop overlay; opening/open/closing animated via CSS; focus trapped inside; `Esc` and overlay click close; focus returns to the trigger; submit shows loading → success (check icon + message) inside the modal; stacked at `--z-modal`.

**3.5 Accordion & Toast**
* Accordion per §2.6. Toast: fixed region, `role="status"`, `aria-live="polite"`, auto-dismiss ~4s, `--z-toast`, styled for both themes.

---

**4. CORE UX & MICRO-INTERACTION RULES**

* **Responsive by default:** fluid `clamp()` typography, breakpoints ~640/1024px, zero horizontal overflow.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `@media (prefers-reduced-motion: reduce)` removes transforms, overlay slide-ins, and shimmer (content renders immediately).
* **Accessibility:** WCAG AA contrast in both modes; never rely on color alone (pair icons/text with every state); semantic HTML5 landmarks and a single-`h1` heading hierarchy; ARIA on all custom widgets (theme toggle, mobile menu, accordion, modal, billing toggle); logical focus order; full keyboard operability; skip-to-content link; `aria-live` regions for form feedback and toasts.
* **Mandatory visual feedback** on every hover, click, and submission.
* `.btn-danger` visually distinct in both themes (define even if unused on this page).
* Optional and restrained (Swiss): subtle section fade-in on scroll only, disabled under reduced motion.

---

**5. DELIVERABLE & OUTPUT FORMAT**

* **Files:** separate `index.html`, `style.css`, `script.js` — complete, no TODOs. Exactly one `<script src="script.js" defer>` reference; no other inline scripts. Google Fonts links in `<head>`.
* **Naming:** one convention only — lowercase hyphenated semantic classes (`.bento-news-card`, `.article-thumbnail`, `.summary-hover`, `.pricing-card`, `.faq-panel`), state classes prefixed `.is-` (`.is-open`, `.is-loading`, `.is-invalid`). Never mix conventions.
* **Copy:** all English, realistic and specific to curated news — no lorem ipsum; invent plausible headlines, testimonials, FAQ answers, and feature descriptions where unspecified.
* **Images:** only seeded `picsum.photos` URLs for `.article-thumbnail`, with meaningful alt text.
* **Behavior:** theme toggle + persistence, mobile menu, billing toggle, accordion, modal with focus trap, email validation, toast, and skeleton reveal — all functional on the first attempt; no console errors.