Flat Design demo
Flat Design

A clean two-dimensional interface style using bold solid colors, simple geometric shapes, and crisp lines with no shadows, gradients, or ornamentation.
Category: Minimalism & Swiss
Era: 2010s Modern
Prompt: 14.2 KB · 2050 words
# SYSTEM PROMPT — FLAT DESIGN LANDING PAGE (FULL BUILD)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt. Generate the final code immediately — no clarifying questions, no partial deliverables, no TODOs.

**Project:** A single-page marketing landing page for a fictional product you invent (e.g., a team productivity, design, or budgeting SaaS — pick one concept and keep all copy consistent with it). All user-facing copy must be real, realistic marketing copy written in **English**.

**Sections (in this exact order):** Sticky Header (nav + theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 0. DESIGN DIRECTION — FLAT DESIGN (2010s MODERN)

**0.1 Visual Language:** 2D, minimalist, bold colors, clean lines, simple geometric shapes, typography-focused, icon-forward (simple geometric icons, no decorative clutter), minimal ornamentation.

**0.2 Hard Flat Constraints (non-negotiable):**
* **Solid colors only:** every background, fill, border, and text color is a single solid value. No gradients, shadows, glows, blurs, or textures anywhere.
* `box-shadow` is forbidden in all rules and states, including focus rings and overlays.
* Border-radius is capped at **4px**; borders are **1–2px solid** strokes.
* Hover feedback = color shift (darker variant of the same hue) or opacity shift only.
* All transitions run in **150–200ms ease** — nothing slower.
* Hero/decorative visuals are built from pure CSS shapes (solid circles, squares, rectangles, triangles via `clip-path`) and large Material Symbols. No raster images.

**0.3 Color Palette (4 accent hues + neutrals):**
* **Blue** = `--primary` (brand, links, primary buttons) · **Orange** = `--secondary` (highlights, featured pricing, Final CTA band) · **Green** = success/valid states and pricing checkmarks · **Red** = error/danger states only.
* Suggested starting values (adjust lightness — never hue — to pass contrast): Light mode: blue `#2471a3` (text/fills) with `#3498db` for large decorative shapes; orange `#e67e22` / deep `#d35400`; green `#27ae60` / deep `#1e8449`; red `#e74c3c` / deep `#c0392b`; backgrounds `#ecf0f1` and `#fefefe`; text `#2c3e50` / `#5d6d7e`; borders `#bdc3c7`. Dark mode: backgrounds `#1e272e` / `#2a3a45`; text `#f5f6fa` / `#bdc3c7`; brightened accents (e.g., blue `#5dade2`, orange `#f39c12`, green `#2ecc71`, red `#ec7063`).
* On dark backgrounds, bright accent fills may pair with very dark text where that yields higher contrast — this is on-brand for flat design.

**0.4 Typography:** Bold sans-serif with strong hierarchy — weight 800 headlines, 600 subheads/labels, 400 body. Uppercase eyebrow labels with letter-spacing above each section heading.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
* All design properties, layout rules, and states are targeted via class or ID selectors only.
* HTML remains clean, semantic (`header`/`nav`/`main`/`section`/`footer`, exactly one `h1`, logical `h2`/`h3` order), and style-agnostic — changing the site's look must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`, overridden per theme:
* **Colors:** `--primary`, `--secondary`, `--accent-green`, `--accent-red`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in both themes. Verify WCAG AA (4.5:1 normal text; 3:1 large text ≥19px bold / 24px, and UI borders); adjust token lightness until passing.
* **Light mode background:** never pure white — use a flat off-white (e.g., `#ecf0f1`); use `#fefefe` where a near-white surface is needed.
* **Radius:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 4px` (4px hard cap).
* **Shadows:** `--shadow-sm: none`, `--shadow-md: none` — tokens exist for architectural consistency but must resolve to `none`; never introduce real shadows.
* **Motion & spacing:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 200ms`, `--ease-standard: ease`.
* **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.
* `--font-base` bound to the Google Font.

**1.3 Mandatory Dark Mode Support**
* Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`.
* Theme switching swaps variables only — no HTML restructuring, no duplicated markup.
* Persist the user's choice in `localStorage`; first visit falls back to `prefers-color-scheme`. Theme initialization must be the first operation in `script.js`.
* Visible toggle in the header: icon-only button using Material Symbols (`dark_mode` / `light_mode`), minimum 44×44px, with `aria-pressed` reflecting current state and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structure with Flexbox.
* Every flex container defaults to `align-items: center` unless an exception is justified (e.g., card columns stretch, form groups stack) — mark each exception with a short CSS comment.
* Mobile-first: single-column base; multi-column rows only at `min-width` breakpoints; `flex-wrap` where content could overflow. No horizontal scrolling at any viewport from 320px up.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (Play CDN acceptable) or clean custom CSS organized with `@layer` / `@apply`. All utilities must map back to the CSS variables or to reusable component classes (`.btn`, `.card`, `.input-group`, `.section-header`, `.container`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Google Fonts — Poppins (weights 400, 600, 700, 800) loaded via preconnect + stylesheet link, bound to `--font-base`.
* **Icons:** Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.
* **Exception clause:** the source style spec requests "simplified SVG" icons; this is overridden by the mandatory icon rule — Google Material Symbols provide the simplified, geometric, flat icon style required.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn` + variants)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, bold sans-serif label, solid fill, `--radius-md`, `--transition-fast`.
* **Variants:** `.btn-primary` (blue fill), `.btn-secondary` (orange fill), `.btn-outline` (2px solid accent border, transparent background), `.btn-danger` (red — visually distinct in both themes).
* **Hover:** swap to a pre-defined darker variant of the same hue (e.g., `--primary-hover`) or `filter: brightness(0.92)`; `cursor: pointer`; no shadow.
* **Focus:** 3px solid high-contrast outline with 2px offset — visible in both themes; no glow.
* **Active:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** `pointer-events: none`, prevents double submission, renders a CSS border-spinner or animated Material Symbol without changing button dimensions.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` after form submissions.

**2.2 Card Component (`.card`)**
* **Default:** flex column (documented `align-items` exception), `--bg-secondary` surface, 2px solid `--border-default`, 4px radius, no shadow.
* **Hover (interactive cards — pricing):** border-color shift to the accent hue and/or background tint shift; optional `translateY(-2px)` with no shadow.
* **Focus-within:** 2px accent border when a child button/link receives focus.
* **Loading (skeleton):** opacity-pulse keyframe animation on neutral blocks — must not use a gradient shimmer (flat constraint).
* **Empty state:** Material Symbol + short guidance text pattern defined for any JS-populated region.

**2.3 Form & Input (`.input-group`)**
* **Structure:** flex column wrapping `<label>`, the input, and a dedicated error `<p>` container with `aria-live="polite"`.
* **States:** empty, focused (2–3px solid `--primary` ring), filled, valid (green border + check icon), invalid (red border + error icon + specific message), disabled, read-only.
* Never rely on color alone — pair border color with icon and text. Used by the Final CTA email capture and the modal form.

**2.4 Modal / Popup**
* Triggered by the hero primary CTA and all pricing-tier CTAs (simple "Get started" email signup).
* **States:** opening (200ms fade + slight scale), open, loading (on submit), success (check icon + confirmation) / error, closing — all animated via CSS transitions.
* **UX:** centered flex overlay (`align-items: center; justify-content: center`), solid-color backdrop at reduced opacity (no blur), `--z-modal`, Material Symbol close button (44×44px), `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, keyboard focus trap, close via `Esc` and overlay click, focus returns to the triggering element.

**2.5 FAQ Accordion (Disclosure)**
* Native `<details>` / `<summary>` (or ARIA button + region with `aria-expanded` / `aria-controls`).
* Chevron Material Symbol rotates 180° over 200ms; 1–2px solid dividers between items; fully keyboard operable.

**2.6 Toast (`.toast`)**
* Solid background, check/error Material Symbol + message, `role="status"` with `aria-live`, `--z-toast`, slides in over 200ms, auto-dismisses (~4s), dismissible. Used for newsletter success/error feedback.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type and spacing, breakpoints without horizontal overflow from 320px up.
* **Smooth animations:** every state change transitions in 150–200ms ease; `prefers-reduced-motion` disables transforms, spinners, and slide-ins.
* **Accessibility:** AA contrast in both themes; never communicate state by color alone; semantic HTML5; correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, toasts, and loading states; visible focus ring on every interactive element; include a "Skip to content" link.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** any delete/danger action uses `.btn-danger` and remains distinct in both themes.
* **Flat discipline:** no shadows, gradients, glows, or blurs anywhere — including focus states, overlays, and toasts.

---

## 4. PAGE SECTION SPECIFICATIONS

**4.1 Sticky Header:** brand wordmark (bold text logo), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, compact `.btn-primary` CTA. Mobile: hamburger button toggles a dropdown panel (`--z-dropdown`, `aria-expanded`, closes on link click and `Esc`). Solid `--bg-secondary` with 2px bottom border; readable in both themes.

**4.2 Hero:** solid blue band (AA-verified against white text), flat CSS geometric shapes in orange/green/red (`aria-hidden="true"`), uppercase eyebrow, `h1` at weight 800 (largest type on the page), subheadline, two CTAs — primary (orange fill, dark text) opens the signup modal; secondary (2px white outline, transparent) anchors to How It Works.

**4.3 Features:** section header (eyebrow + `h2` + one-line intro) followed by 3 `.card`s in a wrapping flex row (`flex: 1 1 280px`; column on mobile). Each card: Material Symbol inside a solid accent tile (blue / orange / green — red reserved for errors), `h3` title, description. Hover: tile or border color shift.

**4.4 How It Works:** 3 steps in a flex row (column on mobile), each with a solid accent number badge (1, 2, 3 — cycling blue/orange/green, white bold numerals), `h3` + text; 2px solid connector line between steps on desktop only.

**4.5 Testimonials:** 3 quote cards; each with a solid-color circle avatar containing white initials (pure CSS, no images), quote, name, role. Alternate accent colors on avatars and borders.

**4.6 Pricing:** 3 tiers; the middle tier is featured via a 2px `--secondary` border, a solid orange "Most popular" chip, and a solid accent header band (no scale or shadow). Each card: tier name, large bold price + billing note, feature list with green `check` Material Symbols (and `close` for exclusions), CTA (featured = `.btn-secondary`; others = `.btn-outline`). All CTAs open the signup modal.

**4.7 FAQ:** 5–6 realistic Q&As per rule 2.5 inside a max-width column.

**4.8 Final CTA:** full-width solid orange band with dark text (verify AA — dark text on orange, not white), `h2` + supporting line + `.input-group` email capture + `.btn` submit. On submit: validate per 2.3, show loading, then success state + toast per 2.6. No backend — simulate with a short `setTimeout`.

**4.9 Footer:** solid dark surface (legible in both themes), brand + one-line tagline, 2–3 columns of secondary links (Product / Company / Support — anchor to page sections where a match exists; otherwise `href="#"`), social icon links (Material Symbols with `aria-label`), copyright line. All footer text meets AA on the dark surface.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. No inline `<style>` blocks, no inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer>`), no inline event handlers (`addEventListener` only).
* **Naming convention:** one consistent convention across the entire deliverable — BEM (e.g., `.btn`, `.btn--primary`, `.card__title`) or a fixed utility set; never mix conventions.
* **Copy:** real English marketing copy throughout — invent the product name, features, testimonials, prices, and FAQs. Lorem ipsum is forbidden.
* **Runtime:** must work by opening `index.html` directly (CDN references for Tailwind, Google Fonts, and Material Symbols are allowed; use `preconnect` for performance).
* **Pre-delivery self-check:** zero `style=` attributes; zero inline SVGs; zero box-shadows or gradients; dark mode persists across reload; all component states (hover, focus, active, loading, disabled, valid, invalid) are styled; every control is reachable and operable by keyboard alone; no horizontal scroll at 320px; all text meets AA in both themes.