3x3 Grid Design demo
3x3 Grid Design

A structured landing page organized into nine uniform grid boxes, ideal for Instagram feeds, moodboards, and portfolios.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 17.8 KB · 2496 words
You are a **Senior Frontend Engineer and Expert UI Designer**. Build a complete, production-ready landing page in a single attempt — every section, every component state, and both color themes fully working. No stubs, no TODOs, no partial deliveries.

**Theme:** "3x3 Grid Design" — Structured, Modular, Uniform, Grid-Based. Modern Digital Layout. Full Light Mode + Full Dark Mode. The aesthetic is a rigid, Instagram-feed/moodboard-style system: content organized in uniform, thin-bordered boxes on a strict grid, white/grey neutrals with a single blue accent.

---

## 0. Theme Specification & Page Map

**0.1 Grid Visual Contract (mandatory)**
- Signature layout: strict CSS Grid — `grid-template-columns: repeat(3, minmax(0, 1fr))`, uniform `gap: var(--spacing-gap)` (16px), thin `1px solid var(--border-default)` borders on every cell, `border-radius: var(--radius-md)` (8px), cell background `var(--bg-secondary)`, cell padding `1.5rem`.
- Grid-item hover: `transform: scale(1.02)` plus `box-shadow: var(--shadow-sm)` (0 1px 3px rgba(0,0,0,0.05)), with `transition: transform var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard)` (200ms). Apply the scale to all cells per the theme, but `cursor: pointer` only on genuinely interactive cells.
- Scroll reveal: every grid cell fades in as it enters the viewport (mechanics in §3.2).
- Always use `minmax(0, 1fr)` for grid tracks (never bare `1fr`) and `min-width: 0` on cells so long content can never cause horizontal overflow.

**0.2 Color Palette → Token Mapping (define exactly)**
Palette: Pure White #FFFFFF, Soft Grey #F5F5F5, Charcoal #333333, Accent Blue #2563EB, Light Grey #E5E5E5, Medium Grey #9CA3AF, Dark Grey #1F2937, Accent Coral #FF6B6B.

Define in `:root` (light theme):
```css
:root {
  --primary: #2563EB;         /* Accent Blue — buttons, links, featured tier */
  --primary-hover: #1D4ED8;
  --primary-text: #2563EB;    /* accent text/icons/links — AA on light surfaces */
  --secondary: #FF6B6B;       /* Accent Coral — badges, highlights, danger */
  --bg-primary: #F5F5F5;      /* Soft Grey — page background */
  --bg-secondary: #FEFEFE;   /* cell/card surface */
  --text-primary: #333333;    /* Charcoal */
  --text-secondary: #9CA3AF;  /* Medium Grey — see usage constraint below */
  --text-on-primary: #FEFEFE; /* text on blue fills */
  --text-success: #16A34A;  --text-error: #DC2626;
  --border-default: #E5E5E5; --border-success: #16A34A; --border-error: #DC2626;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --spacing-gap: 16px;
  --transition-fast: 150ms; --transition-normal: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
```
Dark theme overrides (duplicated under `.dark` and under `@media (prefers-color-scheme: dark)` gated with `html:not(.light):not(.dark)` — see §1.3):
```css
--primary-hover: #3B82F6;  --primary-text: #60A5FA; /* lighter accent step, AA on dark */
--bg-primary: #1F2937;    --bg-secondary: #374151;  /* elevated surface, derived step of #1F2937 */
--text-primary: #F5F5F5;  --text-secondary: #9CA3AF; /* now AA-compliant on dark */
--text-success: #4ADE80;  --text-error: #F87171;
--border-default: #4B5563; --border-success: #4ADE80; --border-error: #F87171;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.50);
color-scheme: dark;
```
- **Near-white rule:** implement the palette's "Pure White #FFFFFF" as **#FEFEFE** — the literal value `#ffffff` must never appear in the project.
- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token with a light text token — enforced in both themes.
- **#9CA3AF constraint (light mode):** Medium Grey fails AA for small text on light surfaces — in light mode, use `--text-secondary` only for text ≥24px (or ≥18.5px bold) and decorative labels; smaller secondary copy uses `--text-primary`.
- Success/error greens/reds are required system tokens outside the given palette — use exactly the values above.

**0.3 Product & Copy**
- Invent one coherent fictional product fitting the theme: a modular portfolio & moodboard builder for creatives — suggested name **"Ninefold"** ("your portfolio, built from nine perfect blocks"). Pick one name and keep it consistent across every section.
- All user-facing copy in **English**, real and specific. Lorem ipsum is forbidden.

**0.4 Page Map — build all of the following, in order**
1. **Utility header (sticky, slim):** brand wordmark (text only) left, dark-mode toggle right; `border-bottom: 1px solid var(--border-default)`, `position: sticky; top: 0; z-index: var(--z-dropdown)`, background `var(--bg-secondary)`. This bar exists to host the mandatory theme toggle — keep it minimal.
2. **Hero — the signature 3×3 grid:** nine uniform cells; `grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(3, minmax(0,1fr))`; container `min-height: clamp(480px, 70vh, 720px)`.
   - **Center cell (row 2, col 2):** `<h1>` headline, one-line subcopy, and a CTA pair — primary "Get started" (opens the modal, §2.4) and secondary "See how it works" (smooth-scrolls to How It Works).
   - **The other eight cells:** one big-number stat cell ("9 blocks. Infinite layouts."), 3–4 mini-feature cells (Material icon chip + title + one-liner), one social-proof cell (overlapping avatar chips + "Trusted by 2,000+ creatives"), one short quote-snippet cell, one tagline/moodboard cell. Every cell holds distinct, real content; no empty cells.
   - **Mobile:** below 768px the grid collapses to one column and the headline cell is reordered first via CSS `order`.
3. **Features — 3 cards:** one row of the 3-column grid. Each card: Material icon in a tinted square chip, title, ≤2-line description. Hover per §0.1.
4. **How It Works — 3 steps:** 3-column grid; each cell: oversized step number (01/02/03 in accent color), Material icon, title, description. Optional connector between steps via CSS pseudo-elements only — never by adding DOM nodes.
5. **Testimonials — 3 quote cells:** 3-column grid; each cell: circular avatar chip (Material `person` icon on a tinted circle — no external images), quote, name, role, and a 5-star rating as Material `star` icons with an accessible text alternative ("Rated 5 out of 5").
6. **Pricing — 3 tiers:** 3-column grid. Middle tier is **featured**: `2px solid var(--primary)` border, "Most popular" badge (coral background, **#1F2937 text** — never white-on-coral), subtle elevation. Each tier: plan name, price, billing note, check-icon feature list, CTA button (primary style on featured tier, secondary on others). Every pricing CTA opens the Get Started modal with the headline reflecting the chosen plan.
7. **FAQ — accordion:** single centered column, `max-width: 768px`; each item a uniform bordered cell. Question row is a `<button>` with `aria-expanded` + `aria-controls` and a Material `expand_more` icon rotating 180° when open. Answer panel: `role="region"` labelled by the button, height animated with the CSS `grid-template-rows: 0fr → 1fr` technique (no JS height measuring). One item open at a time. Write 5–6 real Q&As.
8. **Final CTA:** one full-width bordered cell (`--radius-lg`): headline, supporting line, and an **inline email capture form** exercising every state in §2.3 — empty → focus → validation (invalid: error border + icon + specific message; valid: success border + check icon) → submit → loading (button spinner, form disabled) → success (button success state + confirmation announced in an `aria-live` region). Simulate the request with `setTimeout` (~800ms); no backend.
9. **Footer:** 3-column link grid (Product / Company / Resources) + brand block with one-line mission + secondary links row (Privacy, Terms, Contact — `href="#"` permitted here and only here) + copyright line.

---

## 1. Strict Rules & Architecture

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **No `style="..."` attributes and no `<style>` blocks** anywhere in the HTML.
- Style exclusively via class/ID selectors. Keep HTML semantic and style-agnostic — re-theming the page must require editing CSS only, never markup.

**1.2 CSS Variables & Theme Tokens**
- Define the exact token blocks from §0.2. Every color, radius, shadow, gap, transition, easing, and z-index used in components must reference `var(--...)` — the token definitions are the only literals allowed in the stylesheet.

**1.3 Mandatory Dark Mode**
- Provide dark token overrides under **both** a `.dark` class on `<html>` and `@media (prefers-color-scheme: dark)` (gate the media query with `html:not(.light):not(.dark)` so an explicit user choice always wins). Switching themes must never require HTML restructuring.
- **Toggle control** (utility header): a button with a Material `dark_mode`/`light_mode` icon that swaps with the theme, `aria-pressed="true"` when dark mode is active, and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").
- **Persistence:** store the choice in `localStorage` (key `theme`); with no stored value, fall back to `prefers-color-scheme`. Theme initialization must be the very first statements in `script.js` (loaded with `defer`), always setting exactly one of `.light`/`.dark` on `<html>`; the media-query fallback guarantees a correct first paint for first-time and no-JS visitors.

**1.4 Flexbox Layout & Mobile-First Alignment (+ Sanctioned Grid Exception)**
- Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- **Explicit exception clause:** the theme's signature 3×3 hero grid and the 3-column section grids use **CSS Grid** exactly as specified in §0.1 — this is the single sanctioned exception to the Flexbox rule. All non-grid alignment (button contents, card internals, form rows, header bar, footer columns) uses Flexbox with `align-items: center`.
- **Mobile-first:** below 768px every grid collapses to a single column (`grid-template-columns: minmax(0, 1fr)`); at ≥768px the 3-column layouts apply; at ≥1024px use a centered `max-width: 1200px` container. Fluid type via `clamp()`. No horizontal scrolling at any viewport width.

**1.5 Styling Stack**
- Use **clean, custom, token-driven CSS** organized in native cascade layers in `style.css` (`@layer tokens, base, layout, components, utilities`). Do **not** load Tailwind via CDN (it would add a second script dependency and encourage off-token values); all reusable component classes (`.btn`, `.cell`, `.input-group`, …) are hand-authored against the CSS variables.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Inter** (weights 400, 500, 600, 700, 800) from Google Fonts via `<link>` with `preconnect`; bind to `--font-base` and apply globally. Headings may use `-0.02em` letter-spacing for the structured, modern feel.
- Load **Google Material Symbols Outlined** via `<link>`; render icons as `<span class="material-symbols-outlined">icon_name</span>`.
- **Forbidden:** raw inline SVGs, local icon font files, images used as icons, and emoji used as UI icons. The page must be fully self-contained apart from the Google Fonts/Icons links.

---

## 2. Component Design Specifications

**2.1 Buttons**
- Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `font-weight: 600`, transitions via motion tokens. Modifiers: `.btn--primary` (bg `--primary`, text `--text-on-primary`), `.btn--secondary` (transparent, `1px solid var(--border-default)`, text `--text-primary`, hover bg `--bg-secondary`), `.btn--danger` (bg `--secondary` coral, text **#1F2937** — never white-on-coral).
- **Hover:** brightness/elevation shift (`--primary-hover` for primary) + `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--primary-text); outline-offset: 2px` — clearly visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** set `aria-busy="true"`, disable pointer events to prevent double-submits, and render a pure-CSS spinner (animated border ring) while keeping the button's dimensions stable — no layout shift.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** transient post-submit feedback styled with `--text-success` / `--text-error`, always paired with an icon and/or text — never color alone.

**2.2 Cards / Grid Cells**
- Base `.cell`: `background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.5rem;` internal layout is a flex column with `align-items: center` and centered text (the moodboard look); a `.cell--prose` modifier left-aligns copy exceeding two lines (documented Flexbox exception).
- **Hover:** per §0.1 (scale 1.02 + `--shadow-sm`).
- **Focus-within:** when a child link/button receives focus, the cell border shifts to `var(--primary)`.
- **Skeleton:** define a `.cell--skeleton` shimmer animation (gradient-sweep keyframes) that preserves exact cell dimensions — apply to any async-loaded content.
- **Empty state:** define a `.cell--empty` pattern — Material icon + short guidance text — available for any cell whose content can be absent.

**2.3 Forms & Inputs**
- Structure `.input-group`: flex container wrapping a `<label>` (explicitly bound with `for`), the `<input>`, and a dedicated error-message container.
- **States to implement:** empty, focused (accent ring via `--primary-text`), filled, **valid** (success border + Material `check` icon), **invalid** (error border + Material `error` icon + specific message tied via `aria-describedby` and announced in an `aria-live="polite"` region), disabled, read-only.
- Validate email format in JS on blur and on submit; clear the error as soon as the user corrects the input. Messages must be specific ("Please enter a valid email address."), never color-only.

**2.4 Modal — "Get Started" Dialog**
- Triggered by the hero primary CTA and every pricing CTA (headline reflects the selected plan).
- Use the native `<dialog>` element with `showModal()`; style the backdrop via `::backdrop` (`rgba(31, 41, 55, 0.5)`); `z-index: var(--z-modal)`.
- **States:** opening (fade + slight scale via CSS transition), open, loading (submit-button spinner), success/error (inline feedback + `aria-live`), closing (reverse transition).
- **UX:** centered overlay, close button with Material `close` icon and `aria-label="Close dialog"`, closable via `Esc` (native) and overlay click; focus moves into the dialog on open and returns to the triggering button on close — do not break native `<dialog>` behavior. Contains the reusable email form from §2.3 with the same simulated submit flow.

---

## 3. Core UX & Micro-Interaction Rules

**3.1 Responsive by Default**
- Breakpoints: base (mobile, 1 column) → ≥768px (3 columns) → ≥1024px (centered 1200px container). Fluid heading sizes with `clamp()`. `scroll-margin-top` on sections to offset the sticky header; `scroll-behavior: smooth` for anchor CTAs.

**3.2 Smooth Animations & Scroll Reveal**
- Every state change transitions through the motion tokens (`transition: transform var(--transition-normal) var(--ease-standard)` pattern).
- **Fade-in on scroll:** an IntersectionObserver in `script.js` adds `.is-visible` to each grid cell as it enters the viewport (threshold ~0.15), with a CSS-only stagger (`nth-child` transition-delays, up to 9 steps). The pre-reveal hidden state (opacity 0, `translateY(8px)`) must apply **only** when JS is present (gate on a `.js` class added to `<html>` by script.js) so no-JS users see all content immediately. Unobserve each cell after it reveals.
- **`prefers-reduced-motion`:** show reveal content instantly and disable the hover scale, active-press transform, and smooth scrolling.

**3.3 Accessibility (a11y)**
- Sufficient contrast in both themes per the §0.2 constraints; never communicate state by color alone — always icon + text.
- Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`), exactly one `<h1>`, logical heading order, `lang="en"`, viewport and description meta tags.
- ARIA on all custom widgets: theme toggle (`aria-pressed` + `aria-label`), accordion (`aria-expanded`, `aria-controls`, `region` panels), modal (`aria-labelledby`), `aria-live` regions for form feedback and loading announcements.
- A visually hidden "Skip to content" link that appears on focus. Full keyboard operability for every interactive element, visible focus indicators everywhere, and logical DOM/focus order.

**3.4 Mandatory Visual Feedback & Destructive Actions**
- Every click, hover, and submission must produce a visible state change.
- `.btn--danger` and any delete-style action must be visually distinct in **both** themes (coral fill + dark #1F2937 text, per §2.1).

---

## 4. Deliverables & Output Format

- **Files:** `index.html`, `style.css`, `script.js` — three separate files. The only script reference is `<script src="script.js" defer></script>`; no inline scripts, no `<style>` blocks, no `style` attributes. `script.js` is responsible for: theme initialization (first statements), toggle handling, IntersectionObserver reveal, accordion logic, modal open/close wiring, and form validation + simulated submit.
- **Naming convention:** BEM only (`block__element--modifier`), used consistently across HTML classes and CSS — never mix conventions.
- **Copy:** real English copy per §0.3. `href="#"` is permitted only for footer links. No lorem ipsum, no placeholder images.
- **Completeness:** deliver the full page in one attempt — all nine page-map items, every component state in §2, both themes, and every rule above. Before finishing, verify: zero inline styles; zero occurrences of `#ffffff`; every styled value comes from `var(--...)`; dark mode persists across reload; all interactive elements are keyboard-operable; no horizontal scroll at 320px width.