Material Design 3 / Material You demo
Material Design 3 / Material You

Google's platform design system featuring flat material surfaces, dynamic color extraction, tonal palettes, and soft rounded shapes, evolving from Material You (2021) to Material 3 Expressive (2025).
Category: Corporate & SaaS
Era: 2021–2025
Prompt: 9.2 KB · 1193 words
# System Prompt: Build a Material Design 3 / Material You Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Landing Page** in a single attempt, following the specification below. The theme is **Material Design 3 / Material You** (2021–present, Google): tonal palettes, larger rounded shapes, shape-morphing tokens, expressive spring-physics motion, and design tokens as the single source of truth.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling must live in a dedicated `style.css` file. **The `style="..."` attribute is forbidden in HTML.**
- Target all design properties, layout rules, and states via class or ID selectors only.
- HTML must remain clean, semantic, and style-agnostic: changing the site's look requires touching only CSS, never the markup.

**1.2 CSS Variables & Theme Tokens (Single Source of Truth)**
Define all tokens in `:root` and consume them everywhere via `var(--...)`. Use this Material 3 token set:

- **Colors:** `--color-bg: #fef7ff`, `--color-surface: #fef7ff`, `--color-surface-container: #f3edf7`, `--color-surface-variant: #e7e0ec`, `--color-text: #1d1b20`, `--color-text-muted: #49454f`, `--color-primary: #6750a4`, `--color-on-primary: #ffffff`, `--color-secondary: #625b71`, `--color-tertiary: #7d5260`, `--color-outline: #79747e`, `--color-error: #b3261e`, plus `--color-success`, `--color-border`, `--color-accent`.
- **Contrast pairing:** every light surface token must pair with the dark text tokens above; in dark mode, invert so dark surfaces pair with light text (`#fef7ff`-family text on `#1d1b20`-family surfaces). Never use pure `#ffffff` as a background — use `#fef7ff`/`#fefefe`.
- **Radius (M3 shape scale):** `--radius-xs: 4px`, `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 16px`, `--radius-xl: 28px`, `--radius-pill: 999px`.
- **Shadows (M3 elevation):** `--shadow-e1`, `--shadow-e2`, `--shadow-e3` as defined in the M3 spec (layered rgba shadows).
- **Typography scale:** `--text-label-sm` through `--text-display-lg` (0.6875rem → 3.5625rem), bound to `--font-sans: 'Roboto', 'Roboto Flex', system-ui, sans-serif` and `--font-display: 'Roboto Flex', 'Roboto', system-ui, sans-serif`.
- **Spacing:** `--space-1` through `--space-24` (4px → 96px).
- **Motion:** `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`, `--ease-emphasized`, `--ease-spatial-expressive: cubic-bezier(0.38, 1.21, 0.22, 1)` (spring-like overshoot for expressive interactions), `--transition-fast: 120ms`, `--transition-normal: 240ms`.
- **State layers:** `--state-hover: rgba(103,80,164,0.08)`, `--state-pressed: rgba(103,80,164,0.12)` — apply as overlay pseudo-elements on interactive components.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`/`<body>`: dark tonal surfaces (`#1d1b20`-family containers), light text (`#e6e0e9`-family), adjusted `--color-primary` to a lighter tonal step (e.g., `#d0bcff`) with `--color-on-primary: #381e72`-family dark pairing.
- Provide a **visible theme toggle** button (sun/moon Google Material Symbol) with correct `aria-pressed` and `aria-label` states.
- Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Theme switching must require no HTML restructuring — only variable overrides.

**1.4 Flexbox Layout & Mobile-First**
- Build all layout structures with Flexbox (`display: flex`).
- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception exists (document any exception in a CSS comment).
- Mobile-first: rows convert to columns at small viewports; no horizontal scrolling at any breakpoint; fluid typography via `clamp()` on display/headline sizes.

**1.5 Framework**
- Use Tailwind CSS utilities **or** clean custom CSS in `style.css` driven by the token variables above. All utilities must map back to tokens or generic reusable classes (`.btn`, `.card`, `.input-group`, `.nav`). Never hardcode hex values outside `:root`/theme blocks.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Roboto**, **Roboto Flex**, and **Roboto Mono** from Google Fonts via `<link>` and bind to `--font-sans` / `--font-display` / `--font-mono`.
- Use **Google Material Symbols** for every icon. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--tonal`, `.btn--danger`)**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; M3 filled buttons use `--radius-pill` (fully rounded), text buttons use `--radius-sm`.
- Hover: state-layer overlay (`--state-hover`) + subtle elevation shift, `cursor: pointer`.
- Focus-visible: distinct ring using `--color-primary` (`outline: 2px solid; outline-offset: 2px`).
- Active/pressed: `--state-pressed` overlay + `transform: scale(0.97)` with `--ease-spatial-expressive`.
- Loading: disables interaction, prevents double-clicks, shows an animated CSS spinner or spinning Google Material Symbol without changing button dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback via `--color-success` / `--color-error` state layers.
- `.btn--danger` must be visually distinct in both light and dark themes.

**2.2 Cards (`.card`)**
- Default: `--color-surface` or `--color-surface-container` background, `1px solid var(--color-outline)` at 40% or `--shadow-e2`, `--radius-lg`/`--radius-xl` (M3 expressive large rounding).
- Hover: elevation shift to `--shadow-e3` + `transform: translateY(-2px)` with spring easing.
- Focus-within: border highlights `--color-primary` when a child link/button receives focus.
- Skeleton loading: shimmer animation in CSS (no layout jumps).
- Empty states: Google Material Symbol icon + guidance text fallback.

**2.3 Forms & Inputs (`.input-group`)**
- States: empty, focused (2px `--color-primary` outline ring), filled, valid (success border/icon), invalid (`--color-error` border, error icon, error text), disabled, read-only.
- Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live="polite"`.

**2.4 FAQ Accordions / Modals**
- FAQ: semantic `<details>`/`<summary>` or ARIA-compliant custom disclosure; open/close animated via CSS transitions with `--ease-emphasized`; chevron Material Symbol rotates.
- Any modal/dialog: centered flex container, backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, animated open/close states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.
- **Smooth M3 Expressive motion:** all state changes transition with `var(--transition-normal)` and M3 easing curves; respect `@media (prefers-reduced-motion: reduce)` by disabling transforms/transitions.
- **Accessibility:** sufficient contrast in **both light and dark modes** (validate before finishing). Never rely on color alone — pair icons/text with state. Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`, `nav`), correct ARIA roles/labels, logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Shape morphing:** interactive cards/buttons may morph radius on hover (e.g., `--radius-lg` → `--radius-xl`) using `transition: border-radius` — a signature M3 Expressive move.

---

## 4. REQUIRED SECTIONS (all user-facing copy in **English**)

1. **Hero** — display-size headline (`--text-display-lg`, `clamp()`-fluid), subcopy, primary filled CTA + tonal secondary CTA, decorative M3 tonal blob shapes (pure CSS, `--radius-xl`/`--radius-pill`, blurred gradients).
2. **Features** — 3 cards, each with a Material Symbol icon, title, body copy.
3. **How It Works** — 3 numbered steps in a responsive flex row/column with connector styling.
4. **Testimonials** — 3 quote cards with avatar placeholder (initials in a tonal circle), name, role.
5. **Pricing** — 3 tiers; middle tier highlighted with `--color-primary` filled card and "Most popular" badge (`.badge`, `--radius-pill`); each tier lists features with check Material Symbols and a CTA button.
6. **FAQ** — 5–6 accessible accordions.
7. **Final CTA** — full-width tonal container (`--color-surface-container`), headline + primary button.
8. **Footer** — brand block, secondary link columns, social icons (Material Symbols), copyright line.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` — separate. Only a single deferred `<script src="script.js" defer>` reference in HTML; no inline `<script>` blocks.
- **Naming:** one consistent convention (BEM, matching the `.btn--primary` pattern above) across the entire deliverable. Never mix conventions.
- **No unrequested placeholders:** write real, meaningful English copy for every section; no lorem ipsum.
- **JS scope:** theme toggle with `localStorage` persistence, FAQ accordion behavior (if not native `<details>`), and button loading-state demo wiring only — no other behavioral logic unless requested.

Produce the complete, finished code now.