Filigree demo
Filigree

An elegant design style featuring intricate lace-like filigree patterns and sophisticated typography, ideal for weddings, jewelry, and luxury packaging.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 8.2 KB · 1076 words
# System Prompt: Build a "Filigree" Luxury Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Do not ask clarifying questions — deliver the full code immediately.

**Theme:** Filigree — intricate, lace-like, luxurious, arabesque, Renaissance craftsmanship.
**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
* **No Inline CSS:** The `style="..."` attribute is forbidden in HTML. All styling lives in `style.css`.
* **Class Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors.
* **Semantic HTML:** Use `<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`. Markup must remain agnostic of visual styling.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root`, plus a `.dark` theme class:

* **Colors:** `--primary: #C9A84C` (Antique Gold), `--secondary: #B76E79` (Rose Gold), `--bg-primary: #FFF8E7` (Cream), `--bg-secondary: #F5ECD7` (Warm Ivory), `--text-primary: #2C2C2C` (Deep Charcoal), `--text-secondary: #722F37` (Burgundy), `--text-success: #8A9A5B` (Sage), `--text-error: #722F37`, `--border-default: #C9A84C`, `--border-success: #8A9A5B`, `--border-error: #722F37`, `--accent-silver: #C0C0C0`.
* **Contrast Pairing:** Light backgrounds (`#FFF8E7`, `#F5ECD7`) pair with dark text (`#2C2C2C`); dark-mode backgrounds pair with light text (`#FFF8E7`). Enforce this pairing in **both** themes. Never use `#ffffff`; use `#fefefe` if a near-white is required.
* **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px` (keep radii small — filigree is angular/ornate, not rounded), `--shadow-sm: 0 2px 15px rgba(201,168,76,0.15)`, `--shadow-md: 0 4px 24px rgba(201,168,76,0.25)`.
* **Spacing & Motion:** `--spacing-gap: 1.5rem`, `--transition-fast: 250ms`, `--transition-normal: 500ms`, `--ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1)`.
* **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.

### 1.3 Mandatory Dark Mode
* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`: `--bg-primary: #2C2C2C`, `--bg-secondary: #3A3A3A`, `--text-primary: #F5ECD7`, `--text-secondary: #C9A84C`, borders `#C9A84C` at reduced alpha.
* **Theme Toggle:** A visible sun/moon toggle button in the header using Google Material Symbols icons (`light_mode` / `dark_mode`), with correct `aria-pressed` and `aria-label` ("Toggle dark mode").
* **Persistence:** Store choice in `localStorage` (`theme` key); fall back to `prefers-color-scheme` on first visit. Switching must require zero HTML restructuring — only variable overrides.

### 1.4 Flexbox Layout & Mobile-First
* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
* All layouts mobile-first: feature/pricing/testimonial rows become columns below 768px. No horizontal scrolling at any viewport. Use `flex-wrap` where appropriate.

### 1.5 Framework
* Use **Tailwind CSS via CDN** with a custom `@layer` block mapping utilities to the CSS variables above, plus generic component classes (`.btn`, `.card`, `.section-title`, `.ornament`). One consistent naming convention throughout — never mix conventions.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Google Fonts — `Cormorant` (display/headings, with ligatures enabled) and `Cormorant Garamond` or `Inter` for body. Bind to `--font-base`. Apply `letter-spacing: 0.06em` and `line-height: 1.8` to body text.
* **Icons:** Google Material Symbols only. **Exception clause:** the mandatory "no inline SVG" rule is waived **only** for decorative filigree ornaments (borders, corner arabesques, swirling flourishes, lace overlays) — these must be inline SVGs or CSS `border-image` patterns per the theme spec. All *functional* icons (buttons, toggles, FAQ chevrons, close buttons) remain Google Material Symbols.

---

## 2. COMPONENT SPECIFICATIONS

### 2.1 Buttons (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-danger`)
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px. Primary: gold `#C9A84C` background, charcoal text. Outline: 1px `#C9A84C` border, transparent background.
* **Hover:** Subtle metallic shimmer — animate a soft gold gradient sheen across the button (`background-position` shift) plus `--shadow-sm`.
* **Focus:** Distinct gold focus ring (`outline: 2px solid var(--primary); outline-offset: 2px`).
* **Active:** `transform: scale(0.97)`.
* **Loading:** Spinner via animated Material Symbol (`progress` icon with CSS rotation); button disabled during load; dimensions unchanged.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** Temporary border/text color shift using `--text-success` / `--text-error` (never color alone — pair with an icon).

### 2.2 Cards (Features, Pricing, Testimonials)
* **Default:** Flexbox layout, `--bg-secondary` background, `border: 1px solid var(--primary)`, `--shadow-sm`, small radius, decorative SVG corner ornament positioned absolutely (top-left and bottom-right arabesque flourishes).
* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + intensified gold border.
* **Focus-within:** Gold border highlight when a child link/button receives focus.
* **Skeleton:** Shimmer animation class (`.card--skeleton`) for loading states.
* **Empty/Fallback:** Not applicable — all sections have real content.

### 2.3 Forms (Final CTA email capture, FAQ search if included)
* **Structure:** Flex container wrapping `<label>`, `<input>`, and a dedicated `.field-error` container.
* **States:** Empty, focused (gold outline ring), filled, valid (sage border + check icon), invalid (burgundy border, error text, error icon — never color alone), disabled, read-only.
* **Feedback:** Errors announced via `aria-live="polite"` region.

### 2.4 Modal / FAQ Accordion
* FAQ answers expand/collapse as an accessible accordion (`<details>`/`<summary>` or ARIA `button` + `aria-expanded`), animated with `max-height` transition at `--transition-normal`.
* If any modal is used: centered flex overlay, backdrop, Material Symbol close button, focus trapping, `Esc` and overlay-click closing, opening/closing CSS transitions.

---

## 3. UX & MICRO-INTERACTION RULES

* **Scroll-Reveal:** All sections fade/translate in on scroll with a 500ms transition (`IntersectionObserver` in `script.js`, adding a `.is-visible` class). Respect `prefers-reduced-motion` — disable transforms/shimmer when set.
* **Ornamental Details:** Thin decorative 0.5–1px gold divider lines between sections; lace-like SVG overlay pattern (low opacity, `pointer-events: none`) on the hero; arabesque corner ornaments on cards and the hero frame. Use `border-image` with the filigree pattern where specified.
* **Accessibility:** WCAG AA contrast in both themes; semantic HTML5; logical focus order; full keyboard operability; `aria-live` for dynamic feedback; decorative SVGs marked `aria-hidden="true"`.
* **Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** N/A for this landing page, but define `.btn-danger` styles anyway (burgundy, distinct in both themes).

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` — fully separated. Only one `<script src="script.js" defer>` reference in HTML; no inline script blocks.
* **Content:** Write all user-facing copy in **English**, in a luxurious, editorial voice fitting the Renaissance-craftsmanship theme (e.g., hero headline, feature titles, testimonial quotes, pricing tier names like "Apprentice / Artisan / Master"). No lorem ipsum — author real copy for every section.
* **Pricing:** Three tiers, middle tier visually emphasized ("Most Cherished" badge), each with a CTA button.
* **Footer:** Secondary links (About, Craft, Journal, Contact, Privacy, Terms) + social icons (Material Symbols) + copyright.
* **Naming:** One consistent class convention across all files.
* Output the complete code for all three files immediately, in order: `index.html`, `style.css`, `script.js`.