Coquette demo
Coquette

A soft romantic aesthetic built on delicate pastel pinks, feminine flourishes, and elegant details suited for beauty, fashion, and boutique branding.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 13.9 KB · 1886 words
**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a **single attempt** — full code, no clarifying questions, no TODOs, no truncated output.

**Theme:** **Coquette** — soft pastel, romantic, delicate florals, bows, lace, charming silhouettes, feminine, dainty, Valentine-like. Mood keywords: blush pink, soft cream, dusty rose, pearl white, lavender, soft gold, baby blue, warm ivory; thin elegant serif with script accents; hairline borders (0.5–1px); feathered shadow edges; gentle pink gradients.

**Sections (in this order):** sticky header (site chrome), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (with email capture), Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in a dedicated `style.css`. **Forbidden:** any `style="..."` attribute in the HTML.
* All design properties, layout rules, and states are targeted via class or ID selectors only.
* HTML stays clean, semantic, and style-agnostic — re-theming the page must require editing CSS only, never markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` (and theme classes) as CSS variables:

* **Colors (light/default):** `--primary: #D4A0A0` (Dusty Rose), `--secondary: #D8C4E8` (Lavender), `--bg-primary: #FFF8F0` (Soft Cream), `--bg-secondary: #F8F0F0` (Pearl White), `--bg-accent: #FFD6E0` (Blush Pink), `--bg-ivory: #FFF5E6` (Warm Ivory), `--text-primary: #6A4A5A` (deep plum-mauve), `--text-secondary: #8A6474` (muted mauve), `--text-success: #5F7A6A` (muted sage), `--text-error: #B85C6C` (dusty raspberry), `--border-default: rgba(212,160,160,0.4)`, `--border-success`, `--border-error`, `--accent-gold: #D4C090`, `--accent-blue: #B8D8E8`.
* **Contrast Pairing (enforced in every theme):** every light background token (blush, cream, ivory, pearl) pairs with `#6A4A5A` text; every dark background pairs with light blush-tinted text. Never place white text on blush or dusty-rose fills (fails contrast). Primary CTA = blush fill + deep plum text. Verify all pairings ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI borders.
* **Light background rule:** never default to pure white; the page background is `#FFF8F0`. If a near-white is needed, use `#fefefe`, never `#ffffff`.
* **Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--shadow-sm: 0 2px 12px rgba(255,214,224,0.3)`, `--shadow-md: 0 8px 28px rgba(212,160,160,0.28)` — feathered edges only (large blur, low opacity, no hard edges).
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.
* **Typography tokens:** `--font-base: 'Cormorant Garamond', serif`, `--font-accent: 'Dancing Script', cursive`. Base body: `font-weight: 300; letter-spacing: 0.04em; line-height: 1.7`. Base surface style: `border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm)`.

**1.3 Mandatory Dark Mode — "Midnight Coquette"**
* **Exception (theme conflict):** the Coquette spec marks dark mode "Not Recommended" — dark mode is nevertheless mandatory; implement it as a "Midnight Coquette" variant built from deep plum/mauve tones (pure black `#000000` is forbidden) so the romantic mood survives.
* Dark tokens: `--bg-primary: #2A1F26`, `--bg-secondary: #382B34`, `--bg-accent: #4A3540`, `--text-primary: #F8E8EE`, `--text-secondary: #C9AEBB`, borders `rgba(212,160,160,0.3)`, shadows become deep-plum glows with a faint blush rim. Re-verify all contrast pairings.
* Implement via **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`: the media query serves system-preference users with zero flash; the class serves the persisted manual choice.
* **Persistence:** store the choice in `localStorage` (e.g., key `coquette-theme`), fall back to `prefers-color-scheme` on first visit, and apply the stored theme as the very first operation in `script.js`. Provide a visible toggle in the header (Material Symbol `light_mode`/`dark_mode`) with correct `aria-pressed` and `aria-label` state.

**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 explicitly justified in a CSS comment (e.g., text blocks needing `stretch`).
* Mobile-first: all flex rows wrap to columns below 768px; no horizontal scrolling at any viewport width from 320px up; content sits in a centered `max-width: 1140px` container.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS via the Play CDN with an inline `tailwind.config` that maps colors and fonts to the CSS variables above. Reusable component classes (`.btn`, `.card`, `.input-group`, `.accordion-item`) are defined in `style.css` using `@layer components` with `@apply` or plain CSS bound to variables. Utilities must never hardcode hex values that duplicate tokens.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Cormorant Garamond** (300/400/500/600 + italics) and **Dancing Script** (400/500) from Google Fonts via `<link>`; bind to `--font-base` and `--font-accent`.
* Script accents (`Dancing Script`) are reserved for flourishes only — hero accent word, section eyebrow labels, badge text, step numerals, quotation marks — never for body copy or button labels (legibility).
* Icons: **Google Material Symbols (Rounded variant)** via `<link>`. Local icon files are forbidden.
* **Exception (icon conflict):** Material Symbols ships no bow, lace, or ribbon glyphs — decorative bow/ribbon/floral ornaments are the *only* permitted inline SVG (or CSS-drawn) elements, and must be `aria-hidden="true"` with `pointer-events: none`; every functional icon (buttons, steps, stars, chevrons, social, toggle) must still be a Material Symbol.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-ghost`, `.btn-danger`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; Cormorant Garamond 500.
* **Hover:** slight `scale(1.02)` + blush glow (`box-shadow: 0 6px 20px rgba(255,214,224,0.55)`); `cursor: pointer`.
* **Focus:** distinct 2px dusty-rose outline with 3px offset via `:focus-visible`, visible on both cream and plum backgrounds.
* **Active:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** `aria-busy="true"`, pointer events disabled (prevents double-clicks), CSS spinner or animated `progress_activity` Material Symbol that does not shift button dimensions (fixed `min-width`).
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
* **Success/Error:** temporary feedback classes tinting border/text with `--text-success` / `--text-error`, announced via `aria-live`.
* **`.btn-danger`:** dusty raspberry tint, visually distinct in both light and dark themes.

**2.2 Card Component (`.card`)**
* **Default:** `--bg-secondary` fill, `1px solid var(--border-default)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`, flex layout.
* **Hover (interactive):** `translateY(-2px)` + `--shadow-md` blush glow.
* **Focus-within:** border shifts to higher-alpha dusty rose when a child link/button receives focus.
* **Loading (skeleton):** `.card--skeleton` shimmer keyframes (gradient sweep) matching final dimensions — no layout jump.
* **Empty state:** centered Material Symbol (`local_florist` or `favorite`) plus gentle guidance text.

**2.3 Form & Input Requirements (`.input-group`)**
* **Structure:** flex wrapper containing label, input, and a dedicated error-feedback container (`aria-live="polite"`).
* **States:** empty, focused (dusty-rose ring + blush tint), filled, valid (sage border + `check` icon), invalid (raspberry border + `error` icon + message text — never color alone), disabled, read-only.
* The Final CTA email capture must validate in JS: submit → button loading → success (sage message with heart icon) or error (raspberry message), all announced via `aria-live`.

**2.4 Modal / Popup (Conditional)**
* No modal is required by the section list — do not invent one. If any overlay becomes genuinely necessary: centered flex container (`align-items: center; justify-content: center`), plum-tinted backdrop with blur, CSS-transitioned open/close states, Material Symbol close button (44px), `Esc` and overlay-click close, keyboard focus trap, `role="dialog"` + `aria-modal="true"`, `z-index: var(--z-modal)`.

**2.5 FAQ Accordion (`.accordion`)**
* Each item: trigger `<button>` with `aria-expanded` + `aria-controls`, panel with `role="region"` + `aria-labelledby`; `expand_more` Material Symbol chevron rotating 180° on open.
* Panel height animates via CSS (grid `0fr → 1fr` technique or `max-height`), respecting `prefers-reduced-motion`.
* Fully keyboard operable (Tab, Enter, Space); first item open by default; no mouse-only interactions.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography, breakpoints without horizontal overflow.
* **Smooth animations:** every state change uses `transition: var(--transition-normal) var(--ease-standard)`; wrap all transforms/animations in `@media (prefers-reduced-motion: reduce)` to disable them.
* **Accessibility:** semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, logical `h1→h3` order), skip-to-content link, ARIA roles/labels on all custom widgets, logical DOM/focus order, full keyboard operability, `aria-live` regions for dynamic feedback. Never rely on color alone — pair success/error tints with icons and text.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Decorative elements** (bows, lace, florals) are `aria-hidden`, non-interactive, and never obscure content or targets.

---

## 4. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION

**Chrome — Sticky Header:** brand wordmark in Dancing Script; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (per 1.3); translucent blush-tinted `backdrop-blur` with a hairline lace bottom border; on mobile, links collapse behind a menu button opening an accessible dropdown panel (`--z-dropdown`). Smooth-scroll anchors with `scroll-margin-top`.

**4.1 Hero:** `min-height: 90vh` centered flex column over a gentle pink gradient (`linear-gradient(160deg, #FFF8F0, #FFD6E0 55%, #F8F0F0)`), a soft CSS floral overlay (layered radial-gradients ≤ 8% opacity), and scalloped lace edges top and bottom built from repeating radial-gradients on pseudo-elements. Dancing Script eyebrow, Cormorant H1 with one script/italic accent word, subcopy, two CTAs (`.btn-primary` + `.btn-outline`), decorative corner bows (permitted SVG/CSS) with a slow 6s floating animation, and a trust row (gold Material Symbol stars + short line).

**4.2 Features — 3 cards:** flex row wrapping to column. Each `.card`: blush-tinted circle holding a Material Symbol (`favorite`, `local_florist`, `auto_awesome`), Cormorant title, body text, thin lace divider along the card top. Alternate icon-circle tints: blush, lavender, baby blue. Hover lift + glow; focus-within border highlight.

**4.3 How It Works — 3 steps:** flex row → column. Steps numbered `01 / 02 / 03` in Dancing Script, joined by a dotted dusty-rose connector line (CSS pseudo-element, hidden on mobile). Each step: Material Symbol in a pearl circle, title, description.

**4.4 Testimonials:** warm-ivory band. Three `.card`s: oversized Dancing Script quotation mark, quote in Cormorant italic, five gold (`--accent-gold`) Material Symbol `star` icons, avatar as a CSS circle with a Dancing Script initial (no external images), name + role. Hover lift + glow.

**4.5 Pricing — 3 tiers:** three `.card`s; the middle tier is featured — slightly scaled, blush gradient or 1.5px soft-gold border, a "Most Loved" Dancing Script badge with a bow ornament, elevated shadow. Large Cormorant price, feature list with sage `check` Material Symbols, per-tier CTA (primary on featured, outline on others). All hover/focus/disabled button states per 2.1.

**4.6 FAQ:** 5–6 themed Q&As in the accordion per 2.5, on a pearl-white band with hairline borders.

**4.7 Final CTA:** full-width blush-gradient band with lace borders top and bottom, centered flex column: bow ornament, Dancing Script headline, one short line, inline email-capture `.input-group` (input + `.btn-primary`) with loading/success/error behavior per 2.3, plus a small privacy note.

**4.8 Footer:** blush-tinted pearl background with a top lace border. Brand wordmark + tagline; secondary link groups (Explore, Company, Support — real accessible names, `href="#"` acceptable since destinations are unspecified); social icons as Material Symbols with visible focus rings; copyright line with a small heart icon. Link hover = dusty-rose underline flourish (animated `text-decoration` offset).

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one script reference — `<script src="script.js" defer></script>` — and no other inline `<script>` blocks. `<head>` contains only the Google Fonts, Material Symbols, and Tailwind CDN links plus meta tags.
* **Naming convention:** BEM (`block__element--modifier`) for every custom class, consistently — never mixed with ad-hoc class names. Tailwind utilities are allowed for layout only.
* **Copy:** all user-facing copy in **English**, written fully on-theme (romantic, dainty, charming — e.g., "Wrap your world in ribbon and rose"). No lorem ipsum. Invent one coherent fictional brand name and keep it consistent across header, hero, CTA, and footer.
* **First-attempt completeness:** every section fully built with all states implemented; finish with a self-check — no horizontal scroll at 320px, full keyboard journey (nav → FAQ → form) works, both themes toggle and persist, all contrast pairings pass, reduced motion respected.