Acrylic (Fluent Material) demo
Acrylic (Fluent Material)

A translucent frosted-glass material from Microsoft's Fluent Design System featuring blurred backgrounds, subtle noise, and soft layered depth.
Category: Glass & Soft UI
Era: 2010s Modern
Prompt: 20.2 KB · 2712 words
# System Prompt: Build a Complete "Acrylic (Fluent Material)" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below **in a single attempt — output the final code immediately**, with no clarifying questions, no TODOs, and no truncated files. Every design decision has already been made for you in this document; implement it exactly as written.

**Theme:** Acrylic (Fluent Material) — Microsoft Fluent Design, Windows 11 acrylic, era 2017–present. Signature: translucent tinted layers with backdrop blur and a subtle noise texture used as the **base material sitting beneath interactive UI**; light-dismiss transient surfaces (menus, flyouts); mode-aware light/dark.

**Product brief:** Invent one coherent fictional product identity (suggested name: "Prism," a desktop-grade productivity workspace — any coherent name is acceptable) and write realistic marketing copy for it. **All user-facing copy must be written in English. Lorem ipsum is prohibited everywhere.**

**Required page sections (in this order, no extras):** sticky nav (command bar) · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials (3) · Pricing (3 tiers) · FAQ (accordion) · Final CTA (email capture) · Footer with secondary link groups.

---

## 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 `index.html`.
* Style only via class/ID selectors (structural pseudo-classes like `:hover`, `:focus-visible` allowed).
* Keep `index.html` semantic and style-agnostic: changing the theme must never require markup edits.

**1.2 CSS Variables & Theme Tokens**
Define all visual tokens as CSS custom properties in `:root`; repopulate them under the theme classes/media query in 1.3. The following token names are **mandatory**:

*Light mode (`:root`):*

| Token | Value |
|---|---|
| `--bg-primary` | `#f3f3f3` |
| `--bg-secondary` | `rgba(255,255,255,0.65)` |
| `--bg-surface-strong` | `rgba(255,255,255,0.85)` |
| `--primary` / `--primary-hover` | `#0067c0` / `#005aa8` |
| `--on-primary` / `--secondary` / `--on-secondary` | `#ffffff` / `#744da9` / `#ffffff` |
| `--text-primary` / `--text-secondary` | `#1b1b1b` / `#5c5c5c` |
| `--text-success` / `--text-error` | `#0f7b0f` / `#c42b1c` |
| `--border-default` / `--border-success` / `--border-error` | `rgba(0,0,0,0.08)` / `#0f7b0f` / `#c42b1c` |
| `--hover-overlay` / `--surface-fallback` | `rgba(0,0,0,0.05)` / `#fefefe` |
| `--acrylic-tint` | `linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45))` |
| `--acrylic-noise` | `repeating-conic-gradient(rgba(0,0,0,0.015) 0% 0.5%, transparent 0% 1%)` |
| `--acrylic-border` | `1px solid rgba(255,255,255,0.5)` |
| `--radius-sm / --radius-md / --radius-lg / --radius-pill` | `4px / 8px / 12px / 999px` |
| `--shadow-sm / --shadow-md / --shadow-lg` | `0 1px 2px rgba(0,0,0,0.08)` / `0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04)` / `0 12px 32px rgba(0,0,0,0.14)` |
| `--blur-backdrop / --blur-backdrop-strong` | `30px / 40px` |
| `--spacing-gap` | `16px` (retain the reference `--space-1…--space-24` scale) |
| `--transition-fast / --transition-normal` | `150ms / 250ms` |
| `--ease-standard / --ease-entrance / --ease-exit` | `cubic-bezier(0.8,0,0.2,1)` / `cubic-bezier(0.1,0.9,0.2,1)` / `cubic-bezier(0.7,0,0.84,0)` |
| `--z-dropdown / --z-modal / --z-toast` | `1000 / 2000 / 3000` (never use arbitrary z-index elsewhere; sticky nav = 900) |
| `--font-base / --font-display` | `'Inter','Segoe UI Variable','Segoe UI',system-ui,sans-serif` |
| `--text-xs … --text-5xl` | reference scale (`0.75rem … 4rem`) |

*Dark mode (repeat under both `.dark` and the media query in 1.3):*

| Token | Value |
|---|---|
| `--bg-primary` | `#202020` |
| `--bg-secondary` / `--bg-surface-strong` | `rgba(43,43,43,0.65)` / `rgba(58,58,58,0.85)` |
| `--primary` / `--primary-hover` / `--on-primary` | `#4cc2ff` / `#6cd5ff` / `#1b1b1b` |
| `--secondary` / `--on-secondary` | `#b4a0ff` / `#1b1b1b` |
| `--text-primary` / `--text-secondary` | `#f3f3f3` / `rgba(245,245,245,0.65)` |
| `--text-success` / `--text-error` | `#6ccb5f` / `#ff99a4` |
| `--border-default` / `--border-success` / `--border-error` | `rgba(255,255,255,0.08)` / `#6ccb5f` / `#ff99a4` |
| `--hover-overlay` / `--surface-fallback` | `rgba(255,255,255,0.06)` / `#272727` |
| `--acrylic-tint` | `linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))` |
| `--acrylic-noise` | `repeating-conic-gradient(rgba(255,255,255,0.02) 0% 0.5%, transparent 0% 1%)` |
| `--acrylic-border` | `1px solid rgba(255,255,255,0.08)` |
| `--shadow-sm / --shadow-md / --shadow-lg` | `0 1px 2px rgba(0,0,0,0.45)` / `0 4px 16px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.06)` / `0 12px 32px rgba(0,0,0,0.55)` |

Radius, blur, spacing, transition, z-index, and text-scale tokens are shared by both modes.

* **Contrast pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — in both modes (`--on-primary`/`--on-secondary` enforce this on filled controls).
* **Never pure white for fills:** the page background is `#f3f3f3` (light). Any near-white fill (hover fills, no-blur fallbacks) must use **`#fefefe`, never `#ffffff`**. `#ffffff` is permitted only as text/icon color on `--primary`.
* Base layer: `box-sizing: border-box` globally; `body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font: 400 var(--text-base)/1.5 var(--font-base); }`.

**1.3 Mandatory Dark Mode**
* The source theme does not declare modes — therefore **you must design and validate the complete dark token set above and test both modes before finishing.**
* Define dark tokens twice: under `.dark` and under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`; define light tokens under `.light`. Duplication is the accepted technique (no build step).
* **Persistence:** `script.js` reads `localStorage['acrylic-theme']` (`'light'`/`'dark'`); the stored choice wins via the matching class on `<html>`; with no stored choice, first paint follows the OS preference (no flash, no inline bootstrap needed). The toggle only flips the class.
* **Visible toggle** in the nav: a `<button class="theme-toggle">` with the Material Symbol `dark_mode`/`light_mode` swapped, `aria-pressed` reflecting the dark state, and `aria-label="Toggle dark mode"`.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout with Flexbox; CSS Grid is allowed only for card rows (Features, Pricing, Testimonials) and footer columns. Both are mobile-first.
* **Every flex container defaults to `align-items: center`** unless a commented exception is required. Allowed exceptions: `.field` stacks, card content columns, footer columns (`stretch`/`flex-start`) — each exception must carry a CSS comment explaining why.
* No horizontal scroll at any width ≥ 320px; rows collapse to columns at breakpoints.

**1.5 Framework & Styling Approach**
* Use **clean custom CSS driven by Tailwind conventions**: declare `@layer tokens, base, layout, components, utilities;` and write plain CSS inside each layer in `style.css` (no build step, no Tailwind CDN required). If you choose the Tailwind Play CDN instead, every color/spacing utility must resolve from the CSS variables via arbitrary values — **hard-coded hex values in markup are forbidden either way.**
* Utility/helper classes must map back to CSS variables or reusable component classes (`.btn`, `.card`, `.field`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** load **Inter** (weights 400–800) via Google Fonts `<link>` (with preconnect) and bind it to `--font-base`/`--font-display` as listed in 1.2. *Exception clause:* the theme's native 'Segoe UI Variable' is not deliverable via Google Fonts, so the mandatory Google Font (Inter) takes priority; Segoe UI remains only as a local fallback in the stack.
* **Icons:** **Google Material Symbols Rounded** via the Google Fonts stylesheet. Include the official `.material-symbols-rounded` base-class styles in `style.css` (not inline). **Inline SVGs and local icon files are forbidden.**
* Use only valid ligature names, e.g.: `menu`, `dark_mode`, `light_mode`, `arrow_forward`, `expand_more`, `check_circle`, `error`, `close`, `progress_activity`, `star`, `person`, `bolt`, `layers`, `shield`, `download`, `tune`, `rocket_launch`, `auto_awesome`, `blur_on`, `mail`.
* Decorative icons get `aria-hidden="true"`; icon-only controls get `aria-label`.

## 2. Component Design Specifications

**2.0 The Acrylic Material (theme signature — apply wherever specified)**
* Base recipe for nav, cards, flyout sheets, hero mock, and CTA panel:

```css
.acrylic {
  background: var(--acrylic-tint), var(--acrylic-noise), var(--bg-secondary);
  -webkit-backdrop-filter: blur(var(--blur-backdrop));
  backdrop-filter: blur(var(--blur-backdrop));
  border: var(--acrylic-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
```
* Flyouts/modals use `--bg-surface-strong` + `--blur-backdrop-strong` (transient surfaces are more opaque).
* Interactive controls (buttons, inputs, badges) inside acrylic surfaces use `--bg-surface-strong` — the material **sits beneath** the interactive layer.
* **Ambient backdrop (required):** a fixed, `aria-hidden="true"` layer behind all content painted with 2–3 large radial gradients derived from `--primary`/`--secondary` at low opacity, so the blur has visible content to refract. It must never reduce text contrast.
* **Mandatory fallbacks:** under `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` and `@media (prefers-reduced-transparency: reduce)`, replace all acrylic fills with the solid `--surface-fallback` and remove blur.
* Performance: never nest backdrop filters; keep blurred layers on screen to ~6 maximum.

**2.1 Buttons** — `.btn`, variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`; `.btn--sm` (36px, nav only); all others min 44×44px.
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` font-weight 600; transitions on `background-color`/`transform`/`box-shadow` with `var(--transition-fast) var(--ease-standard)`.
* **Hover:** light default fill `#fefefe`; primary uses `--primary-hover`; generic translucent surfaces add the `--hover-overlay` veil via a `background-image` gradient; `cursor: pointer`.
* **Focus:** `:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }` — must be visible in both modes; if a ring ever lands on a same-color fill, switch that control's ring to `var(--bg-primary)`.
* **Active:** `transform: scale(0.97)`.
* **Loading:** `.is-loading` + `aria-busy="true"`: pointer events disabled, double-submit impossible, spinner = Material Symbol `progress_activity` rotated by CSS keyframes, button dimensions unchanged.
* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, pointer-events none.
* **Success/Error:** `.btn--success` / `.btn--error` driven by `--border-success`/`--border-error` + `check_circle`/`error` icon + an `aria-live` announcement — never color alone.

**2.2 Cards** — `.card` (acrylic); `.card--featured` (pricing highlight).
* **Default:** flexible flex layout, `--bg-secondary` acrylic fill, subtle border, `--shadow-md`.
* **Hover (interactive cards):** `transform: translateY(-2px)` + `--shadow-lg`, transitioned with `var(--transition-normal)`.
* **Focus-within:** border/glow highlight `0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent)` when a child link/button is focused.
* **Loading (skeleton):** `.card--skeleton` with a CSS shimmer keyframe (gradient sweep, 1.2s infinite) sized to match real cards — define it so layout never jumps.
* **Empty state:** `.empty-state` pattern defined — large Material Symbol + heading + guidance text.

**2.3 Forms & Inputs** — `.field` (flex column — commented exception), `.input`, `.field__error`, `.field__icon`.
* **States:** empty, `:focus` (border `--primary` + 3px `color-mix(in srgb, var(--primary) 25%, transparent)` ring), filled, `.is-valid` (`--border-success` + `check_circle` icon), `.is-invalid` (`--border-error` + `error` icon + `--text-error` message), disabled, read-only.
* **Structure:** flex container wrapping a real associated `<label>` (`.visually-hidden` allowed), the input, and a dedicated error-feedback container with `aria-live="polite"`; errors linked via `aria-describedby` + `aria-invalid`. Placeholders are hints only, never labels.

**2.4 Modal / Dialog (conditional)**
* No dialog is required by the section map. If you implement any dialog anyway, it must have: `role="dialog"` + `aria-modal="true"` + labelled heading; backdrop `rgba(0,0,0,0.45)` light / `0.60` dark with strong blur; `z-index: var(--z-modal)`; animated opening/closing (fade + scale 0.96→1, `--ease-entrance`/`--ease-exit`); loading, success, and error body states; a Material `close` icon button (44px); focus trapping; close via `Esc` and overlay click; focus returned to the trigger; body scroll locked.

**2.5 Light-Dismiss Flyout (required — theme signature)**
* Nav "Resources" dropdown and the mobile menu sheet. Trigger: `<button aria-haspopup="true" aria-expanded>`. Panel: `--bg-surface-strong` acrylic + `--blur-backdrop-strong`, `--radius-md`/`--radius-lg`, `--shadow-lg`, `z-index: var(--z-dropdown)`.
* **Motion:** opens with fade + `translateY(-4px)` in `var(--transition-fast) var(--ease-entrance)`; closes with `--ease-exit`.
* **Light dismiss:** closes on outside click, on `Esc`, and on focus leaving the panel; closing returns focus to the trigger; activating a link closes the panel. Mobile variant: full-width acrylic sheet below the nav, same dismiss rules.

**2.6 FAQ Accordion**
* Each item: `h3 > button.faq__trigger` with `aria-expanded` + `aria-controls`, Material `expand_more` chevron rotating 180°; panel animates `grid-template-rows: 0fr → 1fr` with `var(--transition-normal) var(--ease-standard)`; single-open behavior via JS; instant toggle under `prefers-reduced-motion`.

**2.7 Toast & Live Feedback**
* A global `aria-live="polite"` region (`.toast`, `z-index: var(--z-toast)`) announces form success/errors and any dynamic state; toasts carry state icons and `--border-success`/`--border-error` styling; feedback is never color-dependent alone.

## 3. Core UX & Micro-Interaction Rules

**3.1 Responsive by default:** mobile-first; breakpoints 640/768/1024px; fluid type via `clamp()`; `max-width: 100%` everywhere; validate 320px–1440px. Nav collapses to a hamburger flyout below 768px. Core anchors must still work without JS.

**3.2 Smooth motion:** every state change transitions via tokens; `prefers-reduced-motion: reduce` disables transforms, animations, and smooth scrolling.

**3.3 Accessibility:** validate contrast in **both** modes (body ≥ 4.5:1, large text ≥ 3:1); never rely on color alone for state; semantic landmarks (`header`, `nav[aria-label]`, `main`, `section[aria-labelledby]`, `footer`); skip link; logical focus order; full keyboard operability across flyout, accordion, and forms; visible focus everywhere; `scroll-behavior: smooth` + `scroll-margin-top` for sticky-nav anchors (disabled under reduced motion).

**3.4 Mandatory visual feedback:** every click, hover, and submission produces a visible state change. The email form simulates an async submit (loading ~900ms → success state + toast + `aria-live` announcement).

**3.5 Destructive actions:** none expected on a landing page; if one appears, `.btn--danger` must be visually distinct in both modes using `--text-error` tokens.

## 4. Deliverable & Output Format

* **Files:** `index.html`, `style.css`, `script.js` — all complete in one response, no truncation, no "rest similar" shortcuts. The only script tag is one `<script src="script.js" defer></script>`.
* **Naming convention:** BEM only (`block__element--modifier`: `.nav__link`, `.btn--primary`, `.faq__trigger`, `.card--featured`). Never mix conventions; all names ASCII/English; CSS comments in English.
* **Copy:** realistic English marketing copy for one coherent invented product; no lorem ipsum. Build **exactly** the sections in the map below — do not add unrequested sections.
* **`script.js` scope:** theme toggle + persistence, flyout light-dismiss (desktop + mobile), accordion behavior, email validation + simulated submit + live feedback, optional IntersectionObserver scroll-reveal (skipped under reduced motion).

## 5. Page Section Map

**5.0 Global shell:** skip link → `header.nav` (sticky) → `main` → `footer`. Container: `.container { width: min(100% - 2rem, 1120px); margin-inline: auto; }`. Anchor ids: `#features`, `#how-it-works`, `#pricing`, `#faq`.

**5.1 Nav (command bar):** floating acrylic pill (sticky top, inset margin, `--radius-lg`), flex row: logo (Material icon + wordmark) · desktop anchor links (Features, How It Works, Pricing, FAQ) · "Resources" light-dismiss flyout with 3 plausible links · theme toggle · `.btn--primary .btn--sm` "Get started". Mobile: links hidden, hamburger flyout sheet appears.

**5.2 Hero:** centered column: badge pill (`auto_awesome` + short eyebrow line), `h1` in `--font-display` weight 800 with `clamp(2.5rem, 5vw + 1rem, 4rem)`, subhead in `--text-secondary` (max ~60ch), CTA row: `.btn--primary` "Get started free" + `.btn--ghost` "See how it works" (anchor to `#how-it-works`). Below: `.hero__visual` — a purely CSS acrylic mock app window (toolbar chips, sidebar rows, gradient chart bars) demonstrating layered material; its inner content `aria-hidden="true"`. Strongest ambient gradients sit behind this section.

**5.3 Features:** section-heading pattern (small uppercase eyebrow, `h2`, one-line lede) + grid of 3 `.card`s (1 → 3 columns): acrylic icon chip + Material icon (`bolt`, `layers`, `shield` or equivalents), `h3` title, description, "Learn more" link with `arrow_forward`. Cards are interactive: hover lift + focus-within glow.

**5.4 How It Works:** 3 steps in a flex row on desktop with a decorative CSS connector line between numbered acrylic circles (1, 2, 3), each with an `h3` + description; optional step icons (`download`, `tune`, `rocket_launch`); stacks vertically with a left rail line on mobile.

**5.5 Testimonials:** 3 `.card`s: `figure > blockquote` quote, `figcaption` with an acrylic initials-avatar (`aria-hidden="true"`), bold name, role in `--text-secondary`, and a 5-star rating using `star` with `font-variation-settings: 'FILL' 1` applied via a CSS class, plus visually-hidden text "Rated 5 out of 5".

**5.6 Pricing:** grid of 3 `.card--pricing`; middle card `.card--featured`: 2px `--primary` border + `--shadow-lg` + "Most popular" badge pill — highlighted by structure and elevation, not color alone. Each card: tier name, large price in `--font-display` + "/month" muted, 4–6 feature list items with `check_circle` icons, full-width CTA (featured: `.btn--primary`; others: default `.btn`).

**5.7 FAQ:** `h2` + 5 accordion items per 2.6, with plausible English Q&A (pricing, platforms, data import, privacy, support).

**5.8 Final CTA:** full-width acrylic panel (`--bg-surface-strong`, `--radius-lg`, generous padding, ambient glow behind): centered `h2` + support line + inline email form (label + `.input` + `.btn--primary` "Start free"); flex row on desktop → column on mobile; validation, loading, success, and error behavior per 2.1/2.3/2.7.

**5.9 Footer:** flat `--bg-primary` with a `--border-default` top rule; grid of columns: brand block (logo + one-liner) + 2–3 secondary link groups ("Product", "Company", "Resources" — reuse anchors where applicable plus plausible extras such as Careers, Blog, Changelog, Status) + legal row (© year · Product name · Privacy · Terms) in `--text-secondary` small text; links show underline/veil hover feedback.

## 6. Definition of Done

* Page renders with zero console errors, zero inline styles, and one deferred script.
* Theme toggle works, persists across reloads, first paint follows the OS preference; **both light and dark modes manually validated** (the source spec declared no modes — this validation is mandatory).
* Acrylic surfaces visibly blur the ambient gradients; solid `--surface-fallback` fills exist for no-backdrop-filter and reduced-transparency environments.
* Keyboard-only journey works end to end: nav → flyout → FAQ accordion → email form with announced success.
* No horizontal scroll from 320px upward; all touch targets ≥ 44×44px; no lorem ipsum; every requested section present, in order, fully styled in both modes.