macOS Vibrancy / Translucency demo
macOS Vibrancy / Translucency

Apple OS X Yosemite-era visual style featuring frosted translucent panels, background blur, and vibrant soft layers that let content glow through interface surfaces.
Category: Glass & Soft UI
Era: 2010s Modern
Prompt: 15.6 KB · 2028 words
**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page specified below on the first attempt. Write **all user-facing copy in English**. The source style spec declares light mode only and explicitly requires you to **design and validate both light and dark modes before considering the work complete** — dark mode is mandatory, not optional.

**PRODUCT & COPY:** Invent one coherent fictional product (suggested: a macOS-native productivity/desktop app) and write realistic, concise, Apple-toned marketing copy for it. No lorem ipsum.

---

# 0. PAGE BLUEPRINT — SECTION-BY-SECTION REQUIREMENTS

Every layout container is Flexbox, mobile-first, and defaults to `align-items: center` unless an exception is justified below. No horizontal scrolling at any viewport width.

**0.0 Global Chrome**
- Floating glass navigation bar, sticky at top, centered in a max-width container: brand mark (Material Symbol + wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle icon button, primary CTA ("Get Started" → anchors to Pricing).
- At ≤ 820px, links collapse into a "menu" icon button that opens a glass dropdown panel (material tier *menu*, `--z-dropdown`): `aria-expanded`, `aria-controls`, Esc closes, click-outside closes, focus returns to the trigger.
- Include a skip-to-content link as the first focusable element.

**0.1 Hero**
- Flex column on mobile → row on desktop (text block + visual). Contains: glass badge pill (accent dot + short label), display headline (`--font-display`, `--text-4xl`/`--text-5xl`, tight tracking), muted subhead, two CTAs (`.btn--primary` + secondary `.btn` linking to How It Works).
- Visual: a glass "app window" (material tier *HUD*) — decorative traffic-light dots (define `--tl-red: #ff5f57; --tl-yellow: #febc2e; --tl-green: #28c840;` as local tokens, `aria-hidden`), a fake sidebar, and skeleton-style content bars. Mark the whole window `role="img"` with an `aria-label`.

**0.2 Features — 3 Cards**
- Section heading + subheading, then 3 `.card` blocks (flex wrap, `flex: 1 1 300px`): Material Symbol icon inside a glass circle, title, description, "Learn more" link. Cards are interactive: hover lift + `:focus-within` highlight (see 2.2).

**0.3 How It Works — 3 Steps**
- 3 steps in a flex row (desktop) → column (mobile): numbered glass badge (01/02/03), step title, description. Connect steps with a decorative hairline on desktop only (hide on mobile).

**0.4 Testimonials**
- 3 glass cards: quote, avatar (glass circle with initials — no external images), name, role, 5 star Material Symbols in `--color-accent` (`aria-hidden` + visually-hidden "Rated 5 out of 5" text). These cards are **non-interactive**: no hover lift, no false affordance.

**0.5 Pricing — 3 Tiers**
- 3 cards: tier name, price, feature list (check Material Symbols in `--color-success`), CTA button. Middle tier is featured: `.pricing-card--featured` uses material tier *HUD* (`--color-surface-strong` + `--vibrancy-strong` + `--shadow-lg`), an accent "Most Popular" badge, and the `.btn--primary` CTA; side tiers use default `.btn`. Clicking any CTA triggers the loading → success button flow (see 2.1).

**0.6 FAQ**
- 5–6 items using native `<details>`/`<summary>` inside glass panels. Summary: flex, `align-items: center`, `justify-content: space-between`, `expand_more` icon rotating 180° when `[open]`, hover background shift, `:focus-visible` ring. Content fades/slides in. Optional JS: close siblings when one opens.

**0.7 Final CTA**
- Full-width glass panel (tier *panel*): headline, subhead, and an email capture form (see 2.3) — label, `.input`, submit `.btn--primary`, and a reserved error/feedback container with `aria-live="polite"`.

**0.8 Footer**
- Flex-wrap columns: brand + tagline, link groups (Product, Company, Resources), social icon buttons (Material Symbols, 44×44px, `aria-label` each). Bottom bar: copyright, Privacy/Terms secondary links (destinations were not specified — `href="#"` stubs are permitted here and only here). Top hairline border, muted text.

---

# 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, inline `<style>` blocks, presentational HTML attributes, inline SVGs.
- Style exclusively via class/ID selectors. HTML stays semantic and style-agnostic — retheming must require editing CSS only.
- Decorative elements (traffic lights, connectors, shimmer bars) are empty spans/divs or pseudo-elements, `aria-hidden`.

**1.2 CSS Variables & Theme Tokens**
Adopt the source token set verbatim as the light theme, extended with the mandatory additions below. All values are CSS variables in `:root` — no hardcoded hexes in component rules.

```css
:root {
  /* color — light (source spec) */
  --color-bg: #dfe6ee;
  --color-surface: rgba(255,255,255,0.55);
  --color-surface-strong: rgba(255,255,255,0.78);
  --color-border: rgba(0,0,0,0.08);
  --color-text: #1d1d1f;
  --color-text-muted: rgba(29,29,31,0.6);
  --color-primary: #007aff;
  --color-on-primary: #ffffff;
  --color-accent: #ff9f0a;
  --color-scrim: rgba(255,255,255,0.4);
  /* mandatory additions */
  --color-success: #34c759;
  --color-error: #ff3b30;
  --color-border-success: rgba(52,199,89,0.55);
  --color-border-error: rgba(255,59,48,0.55);
  --surface-fallback: #f2f5f9;
  /* radius / shadow / blur / fonts / type scale / spacing: use source values */
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);
  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.6);
  --blur-backdrop: 20px; --blur-backdrop-strong: 30px;
  --vibrancy: blur(var(--blur-backdrop)) saturate(1.8);
  --vibrancy-strong: blur(var(--blur-backdrop-strong)) saturate(1.8);
  --font-sans: 'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', ui-monospace, monospace;
  /* motion + stacking (mandatory additions) */
  --transition-fast: 150ms; --transition-normal: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;
  /* wallpaper */
  --bg-image: linear-gradient(160deg, #a7c6f2 0%, #dfe6ee 45%, #f3d9c4 100%);
}
```

- **Signature material recipe** — every glass surface combines: translucent background token + `backdrop-filter: var(--vibrancy)` (with `-webkit-` prefix) + 1px `--color-border` hairline + `--shadow-inset-hi` inner highlight. `body` carries `background: var(--bg-image); background-attachment: fixed;` so materials sample the wallpaper.
- **Material tiers:** *menu* (nav, dropdown) = `--color-surface` + `--vibrancy` + `--shadow-sm`; *panel* (cards, FAQ, form) = `--color-surface` + `--vibrancy` + `--shadow-md`; *HUD* (badges, toggle, featured pricing, hero window) = `--color-surface-strong` + `--vibrancy-strong` + `--shadow-md`/`--shadow-lg`.
- **Fallbacks (mandatory):** `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` and `@media (prefers-reduced-transparency: reduce)` both swap glass surfaces to solid `var(--surface-fallback)` and disable filters.
- **Contrast pairing:** every light background token pairs with dark text tokens, every dark background token with light text tokens — enforced in both themes. Never use `#ffffff` as a page background; the wallpaper `#dfe6ee` is the light base; use `#fefefe` if a near-white is ever needed.

**1.3 Mandatory Dark Mode Support**
- Declare tokens in this cascade order: (1) `:root` light; (2) `@media (prefers-color-scheme: dark) { :root { …dark tokens… } }`; (3) `.light { …light tokens… }` and `.dark { …dark tokens… }` so explicit user choice always wins. Also set `color-scheme: light` / `color-scheme: dark` accordingly.
- Reference dark tokens (adapt if you verify better contrast):
```css
--color-bg: #1c1c1e;
--color-surface: rgba(44,44,46,0.55);
--color-surface-strong: rgba(58,58,60,0.78);
--color-border: rgba(255,255,255,0.12);
--color-text: #f5f5f7;
--color-text-muted: rgba(245,245,247,0.6);
--color-primary: #0a84ff;
--color-accent: #ff9f0a;
--color-scrim: rgba(0,0,0,0.45);
--color-success: #30d158; --color-error: #ff453a;
--color-border-success: rgba(48,209,88,0.55);
--color-border-error: rgba(255,69,58,0.55);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 8px 24px rgba(0,0,0,0.45);
--shadow-lg: 0 20px 48px rgba(0,0,0,0.55);
--shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.08);
--bg-image: linear-gradient(160deg, #16233f 0%, #1c1c1e 45%, #33241b 100%);
--surface-fallback: #26282c;
```
- **Theme toggle:** visible icon button in the nav using Material Symbols `dark_mode`/`light_mode`. `script.js` resolves theme on load: `localStorage.getItem('theme')` → apply `.dark`/`.light` to `<html>`; no stored value → let the media query decide. The toggle flips the class, persists to `localStorage`, and maintains `aria-pressed` + a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").
- **Validation requirement (from source spec):** verify text contrast against composited surfaces in **both** modes before finishing (≥ 4.5:1 body text, ≥ 3:1 large text and UI borders). If `#007aff` + white fails for your text sizes, darken the light-mode primary (e.g., `#0066d6`) — never ship failing contrast.

**1.4 Flexbox Layout & Mobile-First Alignment**
- `display: flex` with `align-items: center` is the default for every container; justify exceptions in a CSS comment (e.g., form fields use `flex-direction: column; align-items: stretch`).
- Rows convert to columns at ≤ 768px; nav collapses at ≤ 820px. Fluid type via `clamp()` on the display scale. No fixed widths that can overflow; no horizontal scroll.

**1.5 Styling Approach**
- Plain modern CSS (no framework). One naming convention only: **BEM** (`block__element--modifier`). The source base classes — `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` — are the canonical blocks; extend BEM-style (`.nav__link`, `.card__title`, `.pricing-card--featured`, `.faq__item`). Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Google Fonts** via `<link>` with `preconnect`: Inter (weights 400–800) bound to `--font-sans`/`--font-display`; Roboto Mono if monospace is used.
- **Exception clause:** the source spec's Apple system stack (`-apple-system`, `'SF Pro Text'`, `'SF Pro Display'`, `'SF Mono'`) is retained as fallback families *after* the Google Font inside the font variables — Google Fonts remain the mandatory primary.
- Icons: **Google Material Symbols (Rounded)** via the official stylesheet. Inline SVGs and local icon files are forbidden. Decorative icons get `aria-hidden="true"`; every icon-only control has an `aria-label`.

---

# 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons — all states as CSS classes**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min-height 44px (44×44px touch target), `--radius-md`, 500 weight, glass material recipe, `transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)`.
- **Hover:** `--shadow-md` + subtle `filter: brightness(1.03)`, `cursor: pointer`.
- **Focus-visible:** `outline: 2px solid var(--color-primary); outline-offset: 2px;`.
- **Active:** `transform: scale(0.97);`.
- **Loading (`.is-loading`):** `aria-busy="true"`, pointer-events disabled to prevent double-clicks, label hidden via opacity, CSS border spinner (currentColor) absolutely centered — button dimensions must not change.
- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback states driven by `--color-success`/`--color-error` with a Material Symbol icon swap.
- **Variants:** `.btn--primary` (solid `--color-primary` bg + `--color-on-primary` text, no translucency); `.btn--danger` (defined in the stylesheet from `--color-error`, visually distinct in both themes, even if unused in copy).

**2.2 Cards**
- **Default:** glass material recipe (tier *panel*), `--radius-lg`, `padding: var(--space-6)`, flex column.
- **Hover (interactive cards only):** `transform: translateY(-2px);` + elevation shift to `--shadow-lg`.
- **Focus-within:** border-color shifts to `--color-primary` + 3px ring when a child link/button is focused.
- **Loading (skeleton):** define a `.skeleton` shimmer (sweeping `--color-scrim` gradient keyframes) — use it for the hero window's fake content bars.
- **Empty state:** define a `.card--empty` pattern (Material Symbol + guidance text) in the stylesheet for system completeness; not required in markup.

**2.3 Forms & Inputs**
- **States:** empty, focused (source ring: `--color-primary` border + `color-mix` 3px glow), filled, valid (`.input--valid`: success border + check icon), invalid (`.input--invalid`: error border, error icon, red message), `[disabled]`, `[readonly]`.
- **Structure:** `.field` = flex column (`align-items: stretch` — justified exception), label, `.input`, and a dedicated `.field__error` container with **reserved min-height** (no layout shift), `aria-live="polite"`, wired via `aria-describedby` + `aria-invalid`.
- **Submit flow (Final CTA):** click → `.is-loading` → validate email → invalid: `.input--invalid` + message; valid: `.is-success` button state + polite live-region confirmation. Prevent double submission.

**2.4 Modals**
- No modal is required for this page. If you introduce any overlay, it must use: centered flex container, `--color-scrim` backdrop, Material Symbol close button, focus trap, Esc + overlay-click close, `--z-modal`.

---

# 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, breakpoints per 1.4, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully disabled under `@media (prefers-reduced-motion: reduce)`.
- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav` with `aria-label`, `main`, `footer`), one `h1`, logical heading order, full keyboard operability, visible focus everywhere, `aria-live` for all dynamic feedback, ≥ 4.5:1 contrast in both modes, and **never color alone** to communicate state (pair error/success colors with icons + text).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
- **Anchors:** smooth in-page scrolling (respecting reduced motion) with `scroll-margin-top` on sections to clear the sticky nav.
- **Optional:** IntersectionObserver reveal animations (opacity/translate) — guarded by reduced-motion and fully visible when JS is absent.

---

# 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer></script>` — no inline script blocks, no inline styles, no inline SVGs.
- **`<head>`:** `lang="en"`, title, meta description, Google Fonts preconnect + link, Material Symbols Rounded stylesheet.
- **`script.js` scope (behavior only):** theme toggle with `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav dropdown (aria + Esc + outside click); optional FAQ single-open; email validation/submit with loading → success states; smooth anchor scrolling; optional guarded reveal animations. Nothing else.
- **Naming:** BEM only, ASCII/English class names, file names, and variable names throughout.
- **Copy:** realistic English marketing copy for the invented product — no lorem ipsum; `href="#"` stubs permitted only for the unspecified footer secondary links.
- **Final validation gate:** render and verify both light and dark themes, all button/input/card states, keyboard-only navigation, and mobile widths before delivering.