Flat 2.0 / Semi-Flat demo
Flat 2.0 / Semi-Flat

A semi-flat design language popularized by Google Material (2014) that reintroduces subtle shadows, layered surfaces, and tactile depth to fix pure flat design's usability problems.
Category: Glass & Soft UI
Era: 2010s Material
Prompt: 19.0 KB · 2494 words
# SYSTEM PROMPT — Coding Agent Build Order: "Flat 2.0 / Semi-flat" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single pass — no partial output, no TODOs, no follow-up questions. Write all user-facing copy in **English**.

## 0. PROJECT DEFINITION

- **Deliverable:** A complete marketing landing page for a fictional but coherent SaaS product. Invent one product name and use it consistently across the header, hero, and footer.
- **Visual Style:** Flat 2.0 / Semi-flat (2015–present) — a flat foundation with subtle shadows and depth cues restored; layered "ghost" shadows (two soft offset layers instead of one); subtle gradients; long/ghost shadows; clear affordances without skeuomorphic texture; layered card surfaces. Lineage: Google Material Design and modern SaaS dashboards.
- **Sections (in this order):** Header/nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **Copy:** Realistic, specific marketing copy. No lorem ipsum, no stub text.

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No inline styles:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID selectors only:** every design property, layout rule, and state lives in `style.css`, targeted via class or ID selectors.
- **Minimal HTML modifications:** markup stays semantic and styling-agnostic; restyling the page must never require touching `index.html`.

### 1.2 CSS Variables & Theme Tokens
All tokens are defined in `:root` (dark overrides per 1.3) using these mandatory names and values:

| Token | Light | Dark |
|---|---|---|
| `--bg-primary` | `#eef1f6` | `#141a24` |
| `--bg-secondary` (surface) | `#ffffff` * | `#1c2430` |
| `--surface-strong` | `#f4f6fa` | `#242e3d` |
| `--border-default` | `#dbe1ea` | `#323d4e` |
| `--text-primary` | `#1c2430` | `#eef1f6` |
| `--text-secondary` | `#5a6472` | `#97a1b0` |
| `--primary` | `#3f6df0` | `#3f6df0` |
| `--primary-deep` (filled buttons, white text) | `#3560dc` | `#3560dc` |
| `--primary-strong` (small primary text/links) | `#2f57c9` | `#8fa6f9` |
| `--secondary` / `--accent` | `#ff7a45` | `#ff7a45` |
| `--accent-contrast` (text on accent fills) | `#2b1200` | `#2b1200` |
| `--text-success` | `#1a7f4b` | `#4ade80` |
| `--text-error` | `#c5221f` | `#ff8a80` |
| `--on-success` (text on success fills) | `#ffffff` | `#052e16` |
| `--on-error` (text on error fills) | `#ffffff` | `#2b1200` |
| `--border-success` | `#1a7f4b` | `#4ade80` |
| `--border-error` | `#c5221f` | `#ff8a80` |
| `--focus-ring` | `rgba(63,109,240,0.18)` | `rgba(63,109,240,0.35)` |
| `--shadow-sm` | `0 1px 2px rgba(28,36,48,0.06), 0 4px 8px rgba(28,36,48,0.06)` | `0 1px 2px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.35)` |
| `--shadow-md` | `0 2px 4px rgba(28,36,48,0.07), 0 10px 24px rgba(28,36,48,0.10)` | `0 2px 4px rgba(0,0,0,0.40), 0 10px 24px rgba(0,0,0,0.45)` |
| `--shadow-lg` | `0 4px 8px rgba(28,36,48,0.08), 0 24px 48px rgba(28,36,48,0.14)` | `0 4px 8px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55)` |
| `--shadow-xl` (long ghost shadow — hero visual only) | `0 8px 16px rgba(28,36,48,0.08), 0 40px 80px rgba(28,36,48,0.16)` | `0 8px 16px rgba(0,0,0,0.50), 0 40px 80px rgba(0,0,0,0.60)` |

- **Additional required tokens:** `--radius-sm: 6px`, `--radius-md: 10px`, `--radius-lg: 16px`, `--radius-pill: 999px`; text scale `--text-xs: 0.75rem` through `--text-5xl: 4rem`; space scale `--space-1: 4px` through `--space-24: 96px`; `--spacing-gap: 16px`; `--transition-fast: 180ms`, `--transition-normal: 240ms`; `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, `--ease-entrance: cubic-bezier(0,0,0.2,1)`; `--lift-hover: translateY(-2px)`; `--z-header: 40`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — in both themes. All text/background pairs must pass WCAG AA (4.5:1 normal text, 3:1 large text ≥24px or ≥18.66px bold) in **both** modes. Never pair `#3f6df0` with white for normal-size text (4.49:1) — use `--primary-deep` for filled surfaces and `--primary-strong` for small primary-colored text.
- **Light background:** the page background is `#eef1f6`, never pure white; any near-white beyond the declared surface must be `#fefefe`. **Exception:** the source palette explicitly declares surface `#ffffff`; retain it for card/button surfaces only, never as a page background.
- **Signature effect:** the layered ghost shadow (two soft offset layers) plus the hover lift (`--lift-hover` + deeper shadow) repeats across `.nav`, `.card`, and `.btn`.

### 1.3 Mandatory Dark Mode Support
- The source specification does not declare dark-mode values — you must derive them (table above) and **validate both light and dark rendering before publishing.**
- **Implementation:** light tokens in `:root`; dark tokens in `@media (prefers-color-scheme: dark)`; then explicit `.dark` and `.light` class overrides on `<html>` placed after the media block so JS-set classes always win. Include `<meta name="color-scheme" content="light dark">`.
- **Persistence:** store the user's choice in `localStorage` (key `"theme"`); first visit falls back to `prefers-color-scheme`; apply via the deferred `script.js`.
- **Toggle:** a visible icon button in the header — Material Symbol `"dark_mode"` in light theme / `"light_mode"` in dark theme — with correct `aria-pressed` state, `aria-label="Toggle dark mode"`, and a polite `aria-live` announcement ("Dark mode enabled"/"Dark mode disabled").

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Flexbox only** for all layout structures (`display: flex`); do not use CSS Grid.
- **Default alignment:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., How-It-Works step columns use `flex-start` to align tops).
- **Mobile-first:** rows collapse to columns below 768px; zero horizontal scrolling at any viewport ≥320px; fluid type via `clamp()` on the token scale.

### 1.5 Framework & Styling Approach
- **Clean custom CSS** is the chosen approach (the source spec supplies the token system — extend it). If you introduce Tailwind, every utility must be composed via `@layer`/`@apply` from the CSS variables. Reusable component classes — `.nav`, `.btn`, `.card`, `.input`, `.badge`, `.input-group` — must exist and carry the styling; utilities never replace component classes.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Fonts:** Google Fonts — Roboto (400/500/700) bound to `--font-base` and `--font-display`; Roboto Mono bound to `--font-mono`. Include `preconnect` + stylesheet links in `<head>`.
- **Icons:** Google Material Symbols Outlined via a Google Fonts `<link>`, styled through a `.material-symbols-outlined` class with `font-variation-settings` (define a `FILL 1` variant for star icons). **Inline SVGs and local icon files are forbidden.** Icons are `aria-hidden="true"` unless they carry meaning, in which case pair them with text or an `aria-label`.

## 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; `padding: var(--space-3) var(--space-6)`; `border-radius: var(--radius-md)`; `font: 500 var(--text-base)/1 var(--font-base)`; `cursor: pointer`; transitions on transform, box-shadow, background-color, and filter (`var(--transition-fast) var(--ease-standard)`).
- **Variants:** `.btn--primary` (background `--primary-deep`, white text); `.btn--accent` (background `--accent`, color `--accent-contrast`); `.btn--secondary` (background `--bg-secondary`, 1px `--border-default` hairline, `--shadow-sm`, color `--text-primary`); `.btn--danger` (background `#c5221f`, white text — identical in both themes so destructive actions stay distinct); `.btn--lg` (larger padding, `--text-lg`) for hero and final CTA.
- **Hover:** `transform: var(--lift-hover); box-shadow: var(--shadow-md);` filled variants also brighten (`filter: brightness(1.06)`).
- **Focus:** `:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }` — visible in both themes.
- **Active/pressed:** `transform: scale(0.97); box-shadow: var(--shadow-sm);` — click feedback plus lift removal.
- **Loading (`.btn--loading` / `aria-busy="true"`):** blocks pointer events and double-clicks; renders a rotating Material Symbol or CSS ring spinner positioned so button dimensions never change.
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no hover/active transforms.
- **Success/Error feedback:** `.btn--success` (background `--text-success`, color `--on-success`, `"check"` icon) and `.btn--error` (background `--text-error`, color `--on-error`) as temporary submit states, announced via `aria-live`.

### 2.2 Cards
- **Base `.card`:** background `--bg-secondary`; `border-radius: var(--radius-lg)`; `box-shadow: var(--shadow-md)`; `padding: var(--space-6)`; `border: 1px solid transparent` (enables focus highlight without layout shift); transition on box-shadow/transform.
- **Hover (interactive cards only):** `transform: var(--lift-hover); box-shadow: var(--shadow-lg);`. Purely static cards (testimonials) keep `--shadow-md` and must NOT lift — never imply false interactivity.
- **Focus-within:** `.card:focus-within { border-color: var(--primary); box-shadow: var(--shadow-lg); }` when a child link/button is focused.
- **Skeleton (`.card--skeleton`):** shimmer via a subtle gradient sweep (`linear-gradient(100deg, transparent, rgba(63,109,240,0.08), transparent)`, `background-size: 200% 100%`, `@keyframes shimmer` 1.4s infinite) over `--surface-strong` blocks with reserved heights so nothing jumps; disabled under `prefers-reduced-motion`.
- **Empty state (`.card--empty`):** centered flex column with a 48px Material icon in `--text-secondary` and guidance text — define the pattern for reuse.

### 2.3 Forms & Inputs
- **Structure `.input-group`:** flex column, `gap: var(--space-2)`, wrapping a `<label>`, the field, and a dedicated `.input-group__error` container (flex row, `"error"` icon + message, `--text-sm`, `--text-error`, `aria-live="polite"`).
- **Field states:** default (background `--surface-strong`, 1px `--border-default`, `--radius-sm`); focused (`border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: none`); filled; valid (`.input--valid`: `--border-success` + inline `"check_circle"` icon); invalid (`.input--invalid`: `--border-error` + `"error"` icon + message text in `--text-error`); disabled (`opacity: 0.5; cursor: not-allowed`); read-only (background `--bg-primary`, color `--text-secondary`).
- **Never color-only:** every valid/invalid state pairs its border color with an icon and a text message.

### 2.4 Overlays (Modal / Popup)
- Only build a modal if the design includes a dialog; do not add unrequested popups. If built: opening/open/closing states animated with opacity + `scale(0.96→1)` using `--ease-entrance`; backdrop `rgba(20,26,36,0.55)`; centered flex container (`align-items: center; justify-content: center`); `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; Material `"close"` icon button ≥44px; keyboard focus trap; close via `Esc` and overlay click; body scroll lock; loading and success/error feedback inside; `z-index: var(--z-modal)`; focus restored to the opener. The mobile nav menu is a dropdown (`--z-dropdown`), not a modal.

### 2.5 FAQ Accordion (Disclosure)
- Each item: `<button class="faq__question">` (min-height 44px, flex row, space-between, `align-items: center`, `aria-expanded`, `aria-controls`) + `.faq__answer` (`role="region"`, `aria-labelledby`).
- `"expand_more"` icon rotates 180° via a transform transition; panels animate height with the `grid-template-rows: 0fr → 1fr` technique, `var(--transition-normal)`.
- Multiple items may be open at once; buttons are natively keyboard-operable; `:focus-visible` ring; instant toggle under `prefers-reduced-motion`.

### 2.6 Header Navigation
- Sticky header (`top: 0`, `z-index: var(--z-header)`); `.nav` bar per tokens: flex, `gap: var(--space-4)`, `align-items: center`, `padding: var(--space-3) var(--space-6)`, background `--bg-secondary`, `--radius-md`, `--shadow-sm`, 1px hairline `--border-default`.
- Brand: Material `"layers"` icon + product wordmark; `.nav__link` links (hover: color `--primary-strong` + underline offset; `:focus-visible` ring); compact `.btn--primary` CTA; `.theme-toggle` icon button per 1.3.
- Mobile (<768px): link list hidden; hamburger `.nav__toggle` (`"menu"` icon, `aria-expanded`, `aria-controls`) opens `.nav__menu` — an absolutely positioned dropdown panel (background `--bg-secondary`, `--radius-md`, `--shadow-md`, `--z-dropdown`, stacked links); closes on `Esc`, outside click, and link activation; focus moves into the panel on open and returns to the toggle on close; animated with opacity/translateY.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing from the token scale; no horizontal overflow at any width ≥320px.
- **Smooth animations:** every state change transitions with `var(--transition-fast)`/`var(--transition-normal)` + `--ease-standard`; the ghost-shadow lift is the signature hover feedback; `html { scroll-behavior: smooth }` only inside `@media (prefers-reduced-motion: no-preference)`, with `scroll-padding-top` for the sticky header; a global `prefers-reduced-motion: reduce` block disables transitions, transforms, and animations.
- **Accessibility:** WCAG AA contrast in both themes; never rely on color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with `aria-label` on nav; one `h1` (hero), `h2` per section, `h3` for card titles; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, billing changes, and theme announcements; a skip-to-content link.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. `script.js` is loaded once via `<script defer>`; no other inline scripts; no inline styles; no external JS libraries; no `<img>` elements (build all visuals from styled elements).
- **Naming convention:** BEM (`block__element--modifier`) everywhere — e.g., `.btn--primary`, `.card--highlight`, `.nav__link`, `.faq__question`. Never mix conventions.
- **No unrequested placeholders:** all copy is real English marketing copy for the invented product; no lorem ipsum, no TODOs. Footer/legal links may use `href="#"` but must remain keyboard-focusable with visible feedback.
- **First-attempt completeness:** ship the entire page in one response; both themes validated; zero console errors.

## 5. LANDING PAGE COMPOSITION (SECTION-BY-SECTION)

- **Hero:** two-column flex (text + visual) → column on mobile. Left: accent `.badge` (pill, background `--accent`, color `--accent-contrast`, Material icon); `h1` (`clamp(--text-3xl → --text-5xl)`); subhead (`--text-lg`, `--text-secondary`); dual CTAs (`.btn--primary .btn--lg` + `.btn--secondary .btn--lg`); microcopy. Right: layered card-surface composition — 3+ stacked `.card` elements forming a mini dashboard (stat chips, a bar chart built from divs with `--primary` fills), staggered offsets, top layer carrying `--shadow-xl`, with a subtle radial gradient wash `rgba(63,109,240,0.08)` behind.
- **Features:** section eyebrow (`--text-sm`, `--primary-strong`, uppercase), `h2`, lead; 3 `.card` items in a flex row (wrap → column): `.icon-tile` (48px, `--radius-md`, background `rgba(63,109,240,0.12)`, Material icon in `--primary-strong`), `h3`, body text, and a "Learn more" link with `"arrow_forward"` icon — making each card interactive (hover lift + focus-within per 2.2).
- **How It Works:** 3 steps in a flex row (`align-items: flex-start` — documented exception) → column on mobile; each step: numbered circle (40px, background `--primary`, white 700-weight number, `--shadow-sm`), Material icon, `h3`, text; circles connected by a 2px `::after` line in `--border-default`, hidden on mobile.
- **Testimonials:** 3 static `.card` quotes (no lift): 5-star rating (Material `"star"` icons, `FILL 1`, `--accent`, container `aria-label="Rated 5 out of 5 stars"`, icons `aria-hidden`); quote; footer row (flex, `align-items: center`): `.avatar` (48px circle, `rgba(63,109,240,0.12)`, initials in `--primary-strong`) + name and role.
- **Pricing:** billing toggle — segmented control in a pill container (background `--surface-strong`, `--radius-pill`, 4px padding) with "Monthly" / "Annual — save 20%" buttons (`aria-pressed`; active segment: background `--bg-secondary`, `--shadow-sm`, `--text-primary`; inactive: `--text-secondary`), changes announced via `aria-live`. Three tier cards in a flex row → column: tier name, price (JS swaps monthly/annual values from `data-monthly`/`data-annual` attributes), feature list with `"check"` icons in `--text-success`, CTA (`.btn--primary` on the highlighted tier, `.btn--secondary` elsewhere). Middle tier `.card--highlight`: `--shadow-lg`, 1px `--primary` border, accent `.badge` "Most popular", larger padding.
- **FAQ:** 6 realistic Q&As per 2.5, max-width ~760px, centered, hairline separators.
- **Final CTA:** `.cta-panel` — a `.card` with `--radius-lg`, `--shadow-lg`, and a subtle gradient (`linear-gradient(135deg, --bg-secondary, --surface-strong)` plus a faint primary radial tint); centered flex column: `h2`, supporting line, `.input-group` email capture (input + `.btn--primary` "Get started"), microcopy "Free 14-day trial · No credit card required". Submission flow: invalid → `.input--invalid` + `aria-live` error; valid → `.btn--loading` (~800ms) → `.btn--success` with `"check"` icon and confirmation copy.
- **Footer:** background `--surface-strong` with top hairline border; flex-wrap columns: brand blurb + Product / Company / Resources / Legal link groups (the secondary links); social icon buttons (Material Symbols, 44px targets, `aria-label`s); bottom bar (flex, space-between): © dynamic-year product name + legal links. Links: `--text-secondary` → hover `--primary-strong`, `:focus-visible` ring.

## 6. JAVASCRIPT BEHAVIOR (`script.js`, VANILLA, DEFERRED)

1. **Theme:** read `localStorage("theme")` → fallback `matchMedia("(prefers-color-scheme: dark)")` → set `.dark`/`.light` on `<html>`; toggle flips and persists the choice, swaps the Material icon, updates `aria-pressed`, and announces via live region.
2. **Mobile menu:** open/close with `aria-expanded`, `Esc`, outside click, and focus management per 2.6.
3. **FAQ accordion:** `aria-expanded` sync + icon rotation class per 2.5.
4. **Billing toggle:** `aria-pressed` swap, price updates from data attributes, `aria-live` announcement.
5. **Email form:** `preventDefault`, regex validation, error render + `aria-live`, simulated loading → success state per Section 5.
6. **Footer year:** dynamic copyright year.
7. **Optional:** IntersectionObserver scroll-reveal (opacity + 8px translate, once, disabled under reduced motion). Do not add any behavior beyond this list.