Art Deco demo
Art Deco

An opulent 1920s-30s style featuring bold geometric symmetry, lavish gold detailing, and Great Gatsby-era elegance suited to luxury packaging, cocktail bars, and hotels.
Category: Luxury & Editorial
Era: 1920s Art Deco
Prompt: 11.7 KB · 1560 words
## ART DECO LANDING PAGE — FULL BUILD SPECIFICATION

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Art Deco landing page on the first attempt. Every rule below is mandatory. Do not omit states, do not skip sections, do not leave stubs.

---

## 0. PROJECT BRIEF & ART DIRECTION

**Theme:** Art Deco — elegant, glamorous, symmetric, geometric, metallic. Era: 1920s–1930s (Great Gatsby luxury, clean deco patterns).

**Sections (in order):** Sticky Header (logo, nav links, theme toggle, CTA button, mobile hamburger menu), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers, middle tier featured), FAQ (accessible accordion), Final CTA (with newsletter signup + "Book a Consultation" modal trigger), Footer (brand blurb, secondary link columns, social icons, copyright).

**Color Palette:**
- Primary: Jet Black `#0A0A0A`, Gold Metallic `#D4AF37`, Deep Navy `#1B2838`, Ivory `#FFFFF0`
- Secondary: Emerald `#046307`, Ruby Red `#9B111E`, Silver `#C0C0C0`, Champagne `#F7E7CE`

**Visual Effects (all CSS-only):** Geometric symmetric patterns — chevrons (`repeating-linear-gradient`), sunbursts (`conic-gradient`), fan shapes and stepped deco frames (`clip-path` polygons). Metallic gold borders (2px solid `#D4AF37`) and metallic fills via `linear-gradient` gold gradients. Clean, sharp lines — corners are crisp, geometry comes from `clip-path`, never from rounded corners. Subtle shimmer animation (animated `background-position` on gold gradients). Elegant fade transitions at 400ms.

**Typography:** Google Fonts — 'Poiret One' for display headings, 'Cinzel' for subheadings, eyebrow labels, and deco numerals, 'Jost' (geometric 1920s-inspired sans) for body copy. Headings and labels: `text-transform: uppercase; letter-spacing: 0.15em`. Body copy: normal case, modest letter-spacing for readability.

**Copy:** Author original English copy in an elegant Art Deco voice (no lorem ipsum anywhere). Invent a fitting brand name. Write real labels for every nav link, button, form, and FAQ entry.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Explicitly forbid** the `style="..."` attribute anywhere in the HTML.
- Target all design properties, layouts, and states exclusively via class or ID selectors.
- HTML must remain semantic and styling-agnostic: changing the theme requires editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` and override per theme:
- **Colors:** `--primary: #D4AF37` (Gold Metallic), `--secondary: #1B2838` (Deep Navy).
- **Light theme:** `--bg-primary: #FFFFF0` (Ivory), `--bg-secondary: #F7E7CE` (Champagne), `--text-primary: #0A0A0A`, `--text-secondary: #1B2838`, `--border-default: #D4AF37`.
- **Dark theme overrides:** `--bg-primary: #0A0A0A`, `--bg-secondary: #1B2838`, `--text-primary: #FFFFF0`, `--text-secondary: #C0C0C0` (Silver), `--border-default: #D4AF37`.
- **Feedback:** `--text-success` / `--border-success` = Emerald `#046307` in light mode (brighten for ≥4.5:1 contrast in dark mode); `--text-error` / `--border-error` = Ruby Red `#9B111E` in light mode (brighten likewise in dark mode).
- **Metallic tokens:** `--gold-gradient: linear-gradient(135deg, #B8860B, #D4AF37, #F7E7CE, #D4AF37, #B8860B)` for metallic fills and featured borders; a `--gold-gradient-text` variant for `background-clip: text` on display headlines.
- **Geometry:** `--radius-sm: 0`, `--radius-md: 2px`, `--radius-lg: 4px` — Art Deco demands sharp lines; never round corners beyond these values.
- **Shadows/Spacing/Motion:** `--shadow-sm`, `--shadow-md` (soft black elevations), `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 400ms`, `--ease-standard`.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component conflicts.
- **Contrast pairing (enforced in both themes):** gold/metallic backgrounds pair only with Jet Black text; Ivory/Champagne backgrounds pair only with Jet Black or Deep Navy text; Jet Black/Navy backgrounds pair only with Ivory, Gold, or Silver text. Gold text on Ivory is permitted only for large display type (≥24px); body text is never gold-on-light.
- **Never use `#ffffff`.** Ivory `#FFFFF0` is the lightest surface in the entire deliverable.

**1.3 Mandatory Dark Mode Support**
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; the class is toggled by JS and all variables must swap seamlessly with zero HTML restructuring.
- **Persistence:** store the choice in `localStorage`; on first visit fall back to `prefers-color-scheme`; if the OS reports no preference, default to **dark** (the signature Gatsby look).
- **Toggle:** a visible control in the header using a Google Material Symbol (`dark_mode` / `light_mode`), with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in CSS comments.
- Mobile-first: multi-column rows (features, steps, pricing, footer columns) wrap to single column on small viewports. **No horizontal scrolling at any width.** All interactive targets ≥44×44px. Content container max-width ~1200px, centered.

**1.5 Framework Default**
- No framework was requested: use clean, hand-authored custom CSS in `style.css`, organized in clear layers (tokens → base → layout → components → sections → utilities → media queries), optionally ordered with `@layer`. All component styling must be reusable classes (`.btn`, `.card`, `.input-group`, `.accordion`, `.modal`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load 'Poiret One', 'Cinzel', and 'Jost' via Google Fonts `<link>` tags in `<head>`; bind them to `--font-display`, `--font-heading`, and `--font-base`.
- Icons: Google Material Symbols (outlined) only. **Explicitly forbid raw inline SVGs and local icon files.** *Exception clause: the source spec's "Art Deco fan dividers via SVG" must instead be built as pure CSS geometry (`clip-path` polygons, `conic-gradient` sunbursts, `repeating-linear-gradient` chevrons) — the document must contain zero inline SVG.*

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, uppercase, `letter-spacing: 0.15em`, sharp corners.
- Variants: `.btn--primary` (gold gradient background, Jet Black text), `.btn--secondary` (transparent, 2px solid gold border, theme-appropriate text), `.btn--danger` (Ruby Red — visually distinct in both themes).
- **States (all via CSS classes/attributes):** hover (brightness/shadow shift, `cursor: pointer`); focus-visible (distinct gold outline ring via `outline`/`box-shadow`); active (`.is-pressed` feel via `transform: scale(0.97)`); loading (`.is-loading` — disables interaction, prevents double-clicks, renders a CSS spinner or rotating Material Symbol without changing button dimensions); disabled (`opacity: 0.5`, greyscale, `cursor: not-allowed`); success/error (`.is-success` / `.is-error` temporary feedback driven by `--text-success` / `--text-error`).

**2.2 Card Component**
- `.card` base: flexbox column layout, `--bg-secondary` surface, 2px solid `--border-default` (gold) or stepped deco frame via `clip-path`, sharp corners.
- **Hover:** elevation shift + `transform: translateY(-2px)` on interactive cards only. **Focus-within:** gold border intensifies when a child link/button receives focus. **Loading:** define a `.card--skeleton` shimmer animation to prevent layout jumps. **Empty state:** structured fallback with a Material Symbol and guidance text.
- Apply to: **Features cards** (gold Material Symbol icon inside a diamond/stepped deco frame), **Testimonial cards** (`format_quote` gold icon, gold monogram circle avatar with initials, name + role), **Pricing cards** (featured middle tier: gold gradient border, subtle lift/scale, "Most Popular" badge in Champagne/Gold).

**2.3 Form & Input Requirements**
- Newsletter signup in the Final CTA: email input + submit button.
- `.input-group`: flex column wrapping `<label>`, `<input>`, and a dedicated error feedback container.
- **States:** empty, focused (gold outline ring), filled, valid (emerald border + check Material Symbol), invalid (ruby border, error text, error icon, message announced via `aria-live="polite"`), disabled, read-only. Inline validation runs in `script.js`; on success show a success message state.

**2.4 Modal / Popup Requirements**
- "Book a Consultation" modal triggered from the Final CTA (and pricing tier CTAs).
- **States:** opening, open, loading, success/error, closing — all animated with 400ms fade/scale CSS transitions.
- **UX:** centered flex overlay (`align-items: center`), dark backdrop, Material Symbol close button (`aria-label="Close dialog"`), `role="dialog"` + `aria-modal="true"`, keyboard focus trapping, close via `Esc` and backdrop click, focus returned to the trigger, body scroll locked while open.
- **FAQ accordion:** `<button aria-expanded="controls">` headers with rotating chevron Material Symbol, panels with `role="region"` + `aria-labelledby`, one-panel-open behavior, smooth 400ms height transition, fully keyboard operable.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type and spacing, standard breakpoints, zero horizontal overflow; chevron/fan dividers collapse gracefully on mobile.
- **Smooth animations:** `transition: var(--transition-normal)` (400ms) on state changes; all shimmer, transforms, and scroll reveals disabled under `@media (prefers-reduced-motion: reduce)`.
- **Shimmer:** subtle `background-position` keyframe animation on gold gradient elements (badges, dividers, featured pricing border).
- **Accessibility:** ≥4.5:1 body text contrast and ≥3:1 large-text contrast in **both** modes; never communicate state by color alone (pair with icons/text); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), exactly one `<h1>`, logical heading order; correct ARIA on the menu, accordion, dialog, and theme toggle; logical DOM/focus order; full keyboard operability; skip-to-content link; `aria-live` regions for form feedback and dynamic messages.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (nav hover deco underline, button presses, card lifts, chevron rotations, toggle icon swap).
- **Navigation:** smooth-scroll anchor links with `scroll-margin-top` compensating for the sticky header; mobile hamburger menu (Material Symbol `menu`/`close`) as an accessible disclosure.
- **Reveal-on-scroll:** subtle fade/translate-in via `IntersectionObserver` adding `.is-visible`, skipped under reduced motion.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single `<script src="script.js" defer></script>`; no inline event handlers — all behavior via `addEventListener`.
- **Head assets:** Google Fonts and Material Symbols `<link>` tags only; no other external dependencies, no external images — all ornament is CSS; testimonial avatars are gold monogram circles.
- **Naming:** BEM only (`.block__element--modifier`) across HTML, CSS, and JS hooks — never mix conventions; JS toggles state classes (`.is-open`, `.is-visible`, `.is-loading`).
- **Copy:** all user-facing copy in English, written in the Art Deco voice; real labels everywhere; placeholders only where content was genuinely unspecified (there should be none — author thematic copy).
- **Completeness:** deliver the full landing page — every section, every component state, dark/light themes, and all interactions — functional without errors on the first attempt.