Apple HIG (pre-Liquid flat) demo
Apple HIG (pre-Liquid flat)

Apple's Human Interface Guidelines style from iOS 7 through iOS 18, defined by flat surfaces, soft translucency, rounded geometry, and clean San Francisco typography.
Category: Glass & Soft UI
Era: 2010s Modern
Prompt: 18.4 KB · 2363 words
# System Prompt — Build a Production-Ready Landing Page: Theme "Apple HIG (pre-Liquid flat)"

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page below correctly **on the first attempt** — no partial output, no clarifying questions. Where this spec is silent, make the choice most consistent with Apple's Human Interface Guidelines and proceed.

---

## 0. PROJECT BRIEF

* **Theme:** Apple HIG (pre-Liquid flat) — Cupertino / iOS 7–18 / macOS pre-Tahoe (2013–2025). Keywords: Deference (content over chrome), SF Pro type, generous spacing, subtle depth, blur/vibrancy accents, clarity, consistent system controls, flat platform, hairline separators.
* **Design principles (enforce everywhere):** Chrome recedes (translucent vibrancy nav, hairline `0.5px` separators instead of heavy borders, subtle shadows); content leads (generous `clamp()`-based section spacing, large fluid display type); controls are consistent system components (pill buttons, rounded cards, segmented control).
* **Light/Dark note (translated from source spec):** *The source specification does not declare color modes — you must define, validate, and ship both light and dark before publishing.*
* **Product & copy:** Invent one coherent fictional product — **"Cadence"**, a calm, focused productivity app for individuals and small teams. Write ALL user-facing copy in **English**, in Apple's marketing voice: short declarative headlines in sentence case, no exclamation marks, no hype, and the classic "Learn more >" chevron pattern for secondary links. No lorem ipsum anywhere.
* **Sections (in order):** ① Hero ② Features (3 cards) ③ How It Works (3 steps) ④ Testimonials ⑤ Pricing (3 tiers) ⑥ FAQ ⑦ Final CTA ⑧ Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **Never** use `style="..."` attributes in the HTML.
* Target every design property, layout rule, and state via class/ID selectors only.
* HTML stays clean, semantic, and style-agnostic — restyling must never require markup edits.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` (light) and override in `.dark` **and** `@media (prefers-color-scheme: dark)`. These exact names are mandatory:

```css
:root { /* LIGHT — Apple system palette */
  --primary: #007aff;          --secondary: #34c759;      /* system blue / green */
  --bg-primary: #f2f2f7;       --bg-secondary: #ffffff;   --bg-tertiary: #f9f9fb;
  --text-primary: #1c1c1e;     --text-secondary: #6e6e73;
  --text-success: #1a7a34;     --text-error: #d70015;     /* accessible text-level green/red */
  --fill-success: #34c759;     --fill-error: #ff3b30;     /* icon/graphic fills */
  --border-default: rgba(60,60,67,0.29);
  --border-success: #34c759;   --border-error: #ff3b30;
  --radius-sm: 8px;  --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --spacing-gap: 16px;         /* plus reference scale --space-1…--space-24 (4→96px) */
  --transition-fast: 150ms;   --transition-normal: 250ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --z-nav: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;
  --blur-backdrop: 20px;  --vibrancy: rgba(255,255,255,0.72);
  --hairline: 0.5px solid var(--border-default);
  --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, monospace;
  /* reference text scale --text-xs…--text-5xl (0.75rem→4rem); bind --font-base to body */
}
.dark { /* DARK — Apple system dark palette */
  --primary: #0a84ff;  --secondary: #30d158;
  --bg-primary: #000000; --bg-secondary: #1c1c1e; --bg-tertiary: #2c2c2e;
  --text-primary: #f2f2f7; --text-secondary: #98989d;
  --text-success: #30d158; --text-error: #ff453a;
  --fill-success: #30d158; --fill-error: #ff453a;
  --border-default: rgba(84,84,88,0.65);
  --border-success: #30d158; --border-error: #ff453a;
  --vibrancy: rgba(28,28,30,0.72);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}
```

* **Contrast pairing:** every light background token pairs only with dark text tokens and vice versa — enforced in **both** themes (e.g., `#ffffff` cards take `#1c1c1e` text; `#1c1c1e` surfaces in dark take `#f2f2f7` text).
* **Background rule:** the page background is `#f2f2f7` — never pure white. **Exception clause:** the reference palette explicitly defines `--bg-secondary: #ffffff` for card/surface fills; keep `#ffffff` for that token only — any *other* near-white surface you introduce must use `#fefefe`.
* Set `color-scheme: light` on `:root` and `color-scheme: dark` on `.dark` so native form controls match the theme.

**1.3 Mandatory Dark Mode**
* Dark tokens defined under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; switching swaps variables only — zero HTML restructuring.
* Persistence: save the user's choice to `localStorage` (key `cadence-theme`); on first visit fall back to `prefers-color-scheme`; when no preference is stored, react live to system changes.
* Provide a **visible toggle** in the nav: 44×44px icon button using Material Symbols (`dark_mode` / `light_mode`), with correct `aria-pressed` state (true when dark active) and a dynamic `aria-label` ("Switch to dark appearance" / "Switch to light appearance").

**1.4 Flexbox Layout & Mobile-First**
* Build every layout with Flexbox. Every flex container defaults to `align-items: center` unless an exception is justified in a comment (e.g., full-width stretch rows in footer columns).
* Mobile-first: all multi-column rows collapse to a single column under 768px; no horizontal scrolling at any width from 320px up; no fixed pixel widths that can overflow.

**1.5 Framework & Cascade Layers**
* Use clean custom CSS driven by Tailwind's cascade convention: organize `style.css` as `@layer tokens, base, layout, components, utilities;` and define generic reusable classes (`.container`, `.section`, `.grid-3`, `.visually-hidden`, `.btn`, `.card`, `.input-group`) that reference the CSS variables.
* Do **not** load Tailwind via CDN or any inline config script — that would violate the single-script-entry rule in Section 5.
* The reference base classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are mandatory starting points — extend them with BEM elements/modifiers; never delete them.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Include these Google Fonts links in `<head>`:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
```
* **Exception clause:** SF Pro is Apple-proprietary and unavailable on Google Fonts — load **Inter** from Google Fonts as the universal fallback and keep `-apple-system, SF Pro` first in the stacks so Apple devices render SF Pro natively. Bind body text to `--font-base` and large headings to `--font-display` with tracking `-0.02em` at `--text-2xl` and above.
* All icons are Google Material Symbols **Rounded** via `<span class="material-symbols-rounded" aria-hidden="true">…</span>`, with base `font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;`. **Explicitly forbidden:** raw inline SVGs, local icon files, and emoji used as icons.
* No external images anywhere: avatars are CSS monogram circles; the hero visual is CSS-built (styled `div`s only).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
* **Default `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `--radius-pill`, weight 600, transitions on opacity/transform/background/box-shadow using `--transition-fast --ease-standard`, `cursor: pointer`.
* **Variants:** `.btn--primary` (filled `--primary`, white text), `.btn--secondary` (tonal `--bg-tertiary`, `--primary` text), `.btn--link` (transparent, `--primary` text + trailing `chevron_right` symbol), `.btn--danger` (filled `--fill-error`, white text — define it and keep it clearly distinct in both themes even if unused).
* **Hover:** opacity `0.85` (Apple-style dimming) with `cursor: pointer`.
* **Focus:** `.btn:focus-visible` → `outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px;`.
* **Active:** `transform: scale(0.97)`.
* **Loading:** `[aria-busy="true"]` / `.btn--loading` — pointer-events disabled, JS prevents double-clicks, a CSS ring spinner (or animated Material Symbol) replaces the icon slot **without changing button dimensions**.
* **Disabled:** `opacity: 0.5; filter: grayscale(100%); cursor: not-allowed;`.
* **Success/Error:** `.btn--success` / `.btn--error` temporary submit-feedback states (check/error icon in `--fill-success` / `--fill-error`), announced via `aria-live`.

**2.2 Cards**
* **Default `.card`:** flexible flexbox column, `--bg-secondary`, `--radius-lg`, padding `--space-6`, `--shadow-md`, hairline border.
* **Hover:** `.card--interactive:hover` → `transform: translateY(-2px)` + `--shadow-lg` with `--transition-normal`.
* **Focus-within:** card border shifts to `--primary` when a child button/link is focused.
* **Loading (skeleton):** `.skeleton` shimmer keyframes (gradient sweep over `--bg-tertiary`) with stable heights — no layout jumps; shimmer disabled under `prefers-reduced-motion`.
* **Empty state:** `.empty-state` — centered flex layout with a large Material Symbol, a title, and guidance text.

**2.3 Forms & Inputs**
* Structure: `.input-group` flex column (`gap: --space-2`) wrapping a `<label>`, the `.input` field, and a dedicated error feedback container (`aria-live="polite"`).
* **States:** empty; `:focus` (border `--primary` + `box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent)`); filled; valid (`.input--valid` — `--border-success` border + adjacent check icon); invalid (`.input--invalid` — `--border-error` border, `--text-error` message, error icon: **never color-only**); disabled (opacity 0.5, `cursor: not-allowed`); read-only (`--bg-secondary`, no focus ring).
* JS validation (email regex on blur and submit) populates the error container and drives the success path.

**2.4 Modal**
* Use the native `<dialog class="modal">` with `showModal()`; `::backdrop` gets dim overlay **plus** vibrancy blur (`backdrop-filter: blur(var(--blur-backdrop))`) — on-theme.
* **States (all CSS-animated):** opening (fade + scale from 0.96, `--transition-normal`), open, loading (submit button in `aria-busy` spinner state), success (icon + confirmation text, `aria-live`), error (message + retry), closing (reverse animation before `dialog.close()`).
* Centered flex panel (max-width 480px), top-right close button (Material Symbol `close`, 44×44px, `aria-label="Close"`), Esc closes natively, overlay click closes via JS, body scroll locked while open, focus trapped natively and **restored to the invoker** on close.
* Trigger: FAQ's "Contact us" link opens a contact modal (email + message) exercising both modal and form states end-to-end.

---

## 3. LANDING PAGE SECTION SPECIFICATIONS

Global: `.container { max-width: 1100px; margin-inline: auto; }`; sections use `padding-block: clamp(64px, 10vw, 96px)`; one `h1` (Hero), one `h2` per section, `h3` inside cards; every `<section>` has `aria-labelledby`; skip-to-content link first in DOM.

**3.1 Global Nav (fixed):** `position: fixed`, `z-index: var(--z-nav)`, `background: var(--vibrancy)`, `backdrop-filter: blur(var(--blur-backdrop)) saturate(1.8)` (with `-webkit-` prefix and an `@supports` fallback to solid `--bg-secondary`), hairline bottom border. Contents: logo (Material Symbol + "Cadence" wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ) with `opacity: .7` hover, the theme toggle (1.3), a `.btn--primary` "Get started", and a mobile `menu` button (`aria-expanded`, `aria-controls`) revealing a vibrancy dropdown panel (`--z-dropdown`, column flex, hairline separators, Esc closes, focus moves inside). Smooth anchor scrolling with `scroll-margin-top` compensating for the fixed nav.

**3.2 Hero:** centered flex column, `--space-24` top padding. H1 in `--font-display` fluid `clamp(2.5rem, 6vw, 4rem)`, subhead `--text-secondary` max-width 34rem. CTA row: flex wrap, `items-center`, `gap: --space-4` — `.btn--primary` "Get started" + `.btn--link` "Learn more >". Below: a **CSS-only app-window mockup** (`.hero__visual`) — window with hairline border, `--radius-lg`, `--shadow-lg`, three traffic-light dots (`#ff5f57` / `#febc2e` / `#28c840`), a sidebar, and skeleton-style content bars; a subtle radial tint of `color-mix(in srgb, var(--primary) 8%, transparent)` behind it; optional gentle float animation (disabled under reduced motion).

**3.3 Features (3 cards):** `.grid-3` (1 column → 3 columns at ≥768px, `gap: --space-6`). Each `.card`: a 48px tinted icon square (`--radius-md`, `color-mix(in srgb, var(--primary) 12%, transparent)` bg, `--primary` Material Symbol), `h3`, body copy. Cards are static (deference) — no hover transform; the interactive-card states from 2.2 still ship in CSS.

**3.4 How It Works (3 steps):** `.grid-3`; each step: a 32px circle (tinted bg, `--primary` 600-weight numeral), `h3`, text; hairline connector line between steps on desktop only.

**3.5 Testimonials (3 cards):** each `.card` with `format_quote` symbol (`--primary`), quote in `--text-lg`, then a flex row (`items-center`, `gap: --space-3`): 44px monogram avatar circle (CSS initials on `color-mix(in srgb, var(--primary) 15%, transparent)`), name (600, `--text-primary`), role (`--text-secondary`, `--text-sm`).

**3.6 Pricing (3 tiers):** iOS-style **segmented billing control** on top — pill container (`--bg-tertiary`, hairline border) with Monthly/Yearly buttons (`aria-pressed`, sliding white selection pill with `--shadow-sm`); price changes announced via a visually hidden `aria-live="polite"` region. Three `.card`s (Free / Pro / Team): featured middle card gets `1px solid var(--primary)` border, `--shadow-lg`, and the reference `.badge` ("Most Popular") — **tokenize the badge** (bg `color-mix(in srgb, var(--secondary) 15%, var(--bg-secondary))`, color `var(--text-success)`) so it works in dark mode. Price in `--font-display` 700 with muted "/month"; feature rows with hairline separators and `check` symbols in `--secondary`; per-card CTAs (featured `.btn--primary`, others `.btn--secondary`); card borders highlight via `:focus-within`.

**3.7 FAQ:** centered max-width 720px; 5–6 real Q&As. Each item: full-width question `<button>` (flex row, `justify-between`, `items-center`, `aria-expanded`, `aria-controls`) with a rotating `expand_more` chevron, and an answer region animated via `grid-template-rows: 0fr → 1fr` (`--transition-normal --ease-standard`); hairline separators between items; reduced motion → instant open/close. A `.btn--link` "Contact us >" opens the modal (2.4).

**3.8 Final CTA:** centered flex column, `--space-6` gaps; `h2` in `--font-display`; inline email capture — flex row wrap (`items-center`): `.input` (`flex: 1; min-width: 240px`) + `.btn--primary` "Get early access". Full validation flow: error state in the `aria-live` container, button loading (spinner), success state (check icon), plus a `.toast` confirmation (fixed top-center, vibrancy bg + blur, `--radius-pill`, `--shadow-lg`, `z-index: var(--z-toast)`, `role="status"`, auto-dismiss 4s).

**3.9 Footer:** hairline top border on `--bg-primary`; flex-wrap layout with brand blurb + three secondary link columns (Product, Company, Legal; `--text-sm`, `--text-secondary` → `--text-primary` on hover); bottom row with hairline: "© 2025 Cadence." plus muted legal links. Unspecified URLs may use `href="#"` — no lorem ipsum.

---

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing; single column below 768px; zero horizontal overflow at any viewport from 320px to 1440px.
* **Smooth animations:** every state change transitions with `var(--transition-normal)` (fast interactions use `--transition-fast`); scroll-reveal via IntersectionObserver (`.reveal` → `.is-visible`: opacity 0→1, `translateY(12px)` → 0, no layout shift); **all** motion — reveals, shimmer, float, smooth scroll, chevron rotation — disabled under `prefers-reduced-motion`.
* **Accessibility:** WCAG AA contrast in **both** modes (validate `--text-secondary` on `--bg-primary`, white-on-`--primary` fills, focus rings ≥ 3:1); never communicate state by color alone (always icon + text); semantic HTML5 landmarks; correct ARIA roles/labels on all custom widgets (menu, accordion, segmented control, modal, toggle); logical DOM/focus order; full keyboard operability with a global `:focus-visible` ring; `aria-live` regions for form errors, loading, toasts, and price changes.
* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` defined and visually distinct in light and dark.

---

## 5. DELIVERABLES & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. The HTML contains **exactly one** `<script src="script.js" defer></script>` before `</body>` — no other script tags, no inline JS (all behavior via `addEventListener`), no inline styles.
* **Naming:** strict BEM everywhere (`.nav__link`, `.hero__title`, `.pricing-card__feature`, `.faq__question`, `.footer__link`…). Never mix conventions. All class names, tokens, and file names in English/ASCII.
* **No unrequested placeholders:** real English copy in every section per the brief; `#` hrefs permitted only for genuinely unspecified URLs.
* **Acceptance checklist — validate before publishing:**
  1. Light **and** dark both validated (source-spec requirement).
  2. Zero `style="..."` attributes, zero inline SVGs, zero emoji icons, single deferred script.
  3. All 8 sections present, responsive 320px→1440px, no horizontal scroll.
  4. Keyboard-only pass: skip link, visible focus rings, tab order, Esc closes menu/modal, focus trapped and restored.
  5. `prefers-reduced-motion` honored; AA contrast in both themes.
  6. Theme choice persists across reload; `aria-pressed`/`aria-label` correct on the toggle.
  7. Every button state (hover, focus, active, loading, disabled, success, error) is styled and reachable.