Delicate Rococo demo
Delicate Rococo

An ornate 18th-century aesthetic of pastel palettes, gilded shell-shaped ornaments, and playful asymmetrical curves that traded Baroque grandeur for flirtatious elegance.
Category: Art & Illustration
Era: 1730s Rococo
Prompt: 16.3 KB · 2219 words
# CODING-AI SYSTEM PROMPT — "Delicate Rococo" Landing Page · Art & Illustration Atelier

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below **on the first attempt** — finished, fully functional code in a single pass. No drafts, no TODOs, no unstyled placeholders.

---

## 0. PROJECT BRIEF & THEME DIRECTION

**0.1 Objective & Brand**
Create a complete single-page marketing site for a boutique **Art & Illustration** studio. Working brand: **"Atelier Céleste — A Rococo Illustration House"** (keep this name). All user-facing copy must be authored in polished **English**, in-character for a charming 18th-century-inspired illustration atelier. No lorem ipsum.

**0.2 Theme Identity**
- **Name:** Delicate Rococo (source spec: "Rococó Delicado")
- **Type:** Ornate · Playful · Elegant
- **Era:** 18th-Century French Rococo
- **Keywords:** rococo, delicate, ornate, playful, elegant, pastel, gilded, asymmetrical, floral, charming
- **Mood:** A pastel Versailles salon — gilded scrollwork, shell motifs, floral garlands, ornate mirror frames, whimsical flourishes. Richly decorated yet airy; ornate but never cluttered; playful but never childish.

**0.3 Color System & Token Mapping**
Define every token in `:root`. No raw hex values may appear outside `:root`.

```css
:root {
  /* Accents */
  --primary: #FADADD;          /* Pastel Pink */
  --secondary: #B0E0E6;        /* Powder Blue */
  --accent-gold: #FFD700;      /* Gilded Gold */
  --accent-mint: #98FF98;      /* Mint Green — surfaces/badges ONLY, never text */
  --accent-lavender: #E6E6FA;  /* Lavender */

  /* Surfaces */
  --bg-primary: #FFFDD0;       /* Cream canvas (client-specified) */
  --bg-secondary: #FEFEFE;     /* Card surfaces — near-white, never #ffffff */
  --bg-tertiary: #E6E6FA;      /* Lavender alternate panels */

  /* Text — dark-on-light pairing, ≥ 4.5:1 on cream */
  --text-primary: #5C4033;     /* Warm cocoa (client-specified) */
  --text-secondary: #7A5C49;   /* Soft cocoa */
  --text-success: #2E7D4F;     /* Deep leaf green */
  --text-error: #B3453F;      /* Dusty crimson */

  /* Borders */
  --border-default: #FFD700;   /* Gilded 1px hairlines (client-specified) */
  --border-success: #2E7D4F;
  --border-error: #B3453F;

  /* Shape, depth, rhythm, motion, stacking */
  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px;
  --shadow-sm: 0 2px 6px rgba(92, 64, 51, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);        /* client-specified */
  --shadow-lg: 0 10px 24px rgba(92, 64, 51, 0.16);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;

  /* Type */
  --font-display: 'Great Vibes', cursive;
  --font-base: 'Cormorant Garamond', serif;
  --font-ui: 'Montserrat', sans-serif;
}
```

- **Contrast pairing (mandatory):** every pastel, gilded, or cream surface carries cocoa text (`--text-primary` / `--text-secondary`). Never place white or pastel text on pastel backgrounds. Mint `#98FF98` is decoration only.
- **Client CSS directives → token translation (honor all):** `background: #FFFDD0` → `--bg-primary`; `color: #5C4033` → `--text-primary`; `border: 1px solid #FFD700` → default hairlines via `--border-default`; `box-shadow: 0 4px 8px rgba(0,0,0,0.1)` → `--shadow-md`; `text-shadow: 1px 1px 0 #FFFFFF` → an emboss token applied to display headings over pastel panels; `animation: shimmer-effect 3s infinite` → gilded shimmer keyframes (see Section 3); `background-image: url('floral-rococo.png')` + `background-blend-mode: soft-light` → see 0.5.

**0.4 Typography System (Google Fonts mandatory)**
- Load via `<link>`: **Great Vibes** (display), **Cormorant Garamond** (body serif), **Montserrat** (UI micro-copy), bound to the font tokens above.
- **Great Vibes** is reserved for the hero headline, section titles, drop caps, and large numerals — never for body copy, buttons, nav, or any text under ~24px (script legibility).
- Body copy: Cormorant Garamond, ≥17px, line-height 1.6–1.75.
- Eyebrows, buttons, nav, badges, form labels: Montserrat in letter-spaced small-caps for an engraved, period-appropriate feel.

**0.5 Decorative Motif System (CSS-only ornamentation)**
- **No image assets exist in this project.** All rococo ornamentation must be drawn in pure CSS: layered `radial-gradient`/`conic-gradient` florals, `repeating-linear-gradient` gilded pinstripes, pseudo-element scrollwork (gold arcs via `border` + `border-radius`), fan-shaped **shell motifs** as section dividers, and double gold borders with inset `box-shadow` rings to suggest **ornate mirror frames**.
- If `background-image: url('floral-rococo.png')` is referenced, it must layer **over a complete CSS-gradient floral fallback** with `background-blend-mode: soft-light`, so the design is fully intact when the asset is absent. The PNG may never be a visual dependency.
- **Cherubic playfulness** is evoked abstractly — floating gilded flourishes, dotted garland arcs, gently drifting pastel orbs. Never via literal illustrations, inline SVG, or emoji.
- **Asymmetry:** staggered card offsets (middle card translated ±12–20px), ornaments rotated ±2–3°, decorations bleeding off one edge. Text blocks themselves stay cleanly aligned — asymmetry lives in composition, never in ragged text.
- **Gilded shimmer:** define `@keyframes shimmer-effect` (a soft gold light sweep, 3s infinite) for gold borders, badges, and the featured pricing frame.

**0.6 Page Architecture — Required Sections**
Build a sticky global header plus the eight sections below. All anchors support smooth in-page scrolling.

- **0.6.0 Global Header (sticky):** Great Vibes wordmark, Montserrat nav links to every section, gold hairline bottom border, subtle cream translucency; accessible mobile menu (Material Symbol `menu`/`close`, `aria-expanded`, focus-safe, `--z-dropdown`).
- **0.6.1 Hero:** asymmetric two-part composition — offset Great Vibes headline with the emboss token, eyebrow label, one-line promise, two CTAs (`.btn-primary` "Commission an Artwork" → Pricing; `.btn-outline` "Browse the Atelier" → Features). Opposite side: an ornate-mirror-framed showcase panel (CSS-drawn frame around a gradient "canvas") with drifting flourishes and shimmer. Shell-motif divider below.
- **0.6.2 Features — 3 cards ("The Atelier's Graces"):** *Custom Illustration*, *Gilded Portraiture*, *Pattern & Ornament Design*. Each `.card` holds a Material Symbol inside a gilded circular medallion, a title, and 2–3 lines of copy. Rotate pastel tints (pink/blue/lavender) across the trio; stagger the middle card vertically.
- **0.6.3 How It Works — 3 steps:** *Consultation → Sketch & Approval → Gilded Delivery*. Gilded numbered medallions (01/02/03) joined by a dotted gold garland; horizontal on desktop, vertical on mobile; playful flourishes between steps.
- **0.6.4 Testimonials — 3 quotes:** ornate mirror-frame cards on rotating pastel tints; oversized Great Vibes quotation mark; client name + role in small-caps; gold Material Symbol `star` ratings paired with a textual/visually-hidden rating (never color alone).
- **0.6.5 Pricing — 3 tiers:** *Petite Commission* (from $180), *Grand Portrait* (from $450, featured), *Royal Patron* (by consultation). Featured tier: gilded gradient frame, `--shadow-lg`, slight elevation, "Most Cherished" shimmer badge. Each tier lists features with gold `check` icons and a CTA (featured → `.btn-primary`; others → `.btn-outline`). CTAs open the inquiry modal (2.4) — no payment logic.
- **0.6.6 FAQ — accessible accordion:** 5–6 authored questions (commissions, timelines, formats, revisions, licensing) per 2.5, with gold hairline separators.
- **0.6.7 Final CTA:** full-width pastel-gradient band with CSS floral pattern; Great Vibes headline; email-capture `.input-group` ("Join the Salon") with full validation states (2.3) and an `aria-live` success message; a large `.btn-primary` opening the inquiry modal.
- **0.6.8 Footer:** brand blurb with a small CSS scrollwork flourish; primary section links; **secondary links** (About the Atelier, Journal, Privacy, Terms, Contact); Material Symbol social icons with `aria-label`s; copyright line. Lavender or cream surface with a gilded scrollwork top border.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
- All design properties, layout rules, and states are applied via class/ID selectors only.
- HTML stays semantic and style-agnostic: retheming the entire site must require editing `style.css` alone, never the markup.
- Inline event handlers (`onclick="..."` etc.) are forbidden — all behavior is bound in `script.js` via `addEventListener`.

**1.2 CSS Variables & Theme Tokens**
- Every color, radius, shadow, spacing value, transition, easing, z-index, and font must be consumed as `var(--...)` per 0.3.
- Contrast pairing is mandatory for every theme: light surfaces ↔ dark text; dark surfaces ↔ light text.
- Never use `#ffffff`; near-white surfaces are `#FEFEFE`.

**1.3 Mandatory Dark Mode Support**
- Define a "Candlelit Salon" dark token set under `@media (prefers-color-scheme: dark)` (and a `.dark` class hook): deep plum/umber surfaces, champagne-cream text, retained gilded accents — preserving the light↔dark pairing.
- Theme switching must operate purely through CSS variables with no HTML restructuring; persistence via `localStorage` with `prefers-color-scheme` fallback, plus a visible toggle carrying correct `aria-pressed`/`aria-label`.
- **Exception (client-specified light-only):** the client's spec marks dark mode "✗ No" — render no theme toggle, do not persist a theme choice, and treat the light Rococo palette as the canonical experience; the dark token set remains defined for architectural completeness and activates only via system preference.

**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.
- Mobile-first: single-column stacks that promote to rows at breakpoints; zero horizontal scrolling at any width from 320px up.
- Asymmetry comes from transforms and offsets — never from broken baseline alignment.

**1.5 Framework Default**
- Use Tailwind CSS, or clean custom CSS organized with `@layer`/BEM. Given the ornate bespoke styling, custom CSS with strict **BEM** (`block__element--modifier`) is the recommended route.
- Commit to one naming convention across the entire deliverable — never mix conventions. Reusable classes (`.btn`, `.card`, `.input-group`) must map back to the tokens in 0.3.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Google Fonts `<link>` tags for Great Vibes, Cormorant Garamond, and Montserrat; Google **Material Symbols Rounded** for every functional icon (menu, close, check, star, expand_more, mail, etc.).
- Raw inline SVGs, local icon fonts, and local image files are forbidden. Decorative rococo motifs are CSS-drawn per 0.5.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, Montserrat label. All states via classes:
- **Default:** `.btn-primary` = gilded gold gradient + cocoa text; `.btn-outline` = transparent + gold hairline + cocoa text; define `.btn-danger` (dusty crimson, distinct on cream) even if rarely used.
- **Hover:** brightness lift + `--shadow-md`; `cursor: pointer`.
- **Focus:** distinct two-tone ring (cocoa outline + gold halo via `box-shadow` with `--accent-gold`), clearly visible on cream for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)` with `--ease-playful`.
- **Loading:** disables pointer events, prevents double-submits, renders a CSS gilded spinner (border animation) without changing button dimensions.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback tinting driven by `--text-success` / `--text-error`.

**2.2 Cards**
- **Default:** flex column, `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + gold border brightens.
- **Focus-within:** border and shadow highlight when a child link/button receives focus.
- **Loading (skeleton):** `.card--skeleton` with a shimmer placeholder animation that prevents layout shift.
- **Empty state:** centered fallback layout with a Material Symbol and guidance copy (define the pattern even if unused).
- **Variants:** `.card--tint-pink` / `--tint-blue` / `--tint-lavender`, `.card--mirror` (ornate frame), `.card--featured` (gilded frame + elevation, for pricing).

**2.3 Forms & Inputs**
- Structure: `.input-group` flex container wrapping `<label>`, the field, and a dedicated error feedback container linked via `aria-describedby`; errors announced in an `aria-live="polite"` region.
- States, all class-driven: empty; focused (gold ring); filled; valid (`--border-success` + `check` icon); invalid (`--border-error`, crimson helper text, `error` icon — never color alone); disabled; read-only.
- The Final CTA email capture and the inquiry modal form must implement these states with client-side validation in `script.js`.

**2.4 Modal / Popup ("Commission Inquiry")**
- States: opening, open, loading (submit), success/error, closing — all animated with `transition: var(--transition-normal)`.
- Centered flex overlay (`align-items: center`), dimmed backdrop, Material Symbol `close` button, `role="dialog"` + `aria-modal`, keyboard focus trapped inside, closes on `Esc` and backdrop click, focus restored to the trigger. Layered via `--z-modal`.

**2.5 FAQ Accordion**
- `<button>` headers with `aria-expanded` + `aria-controls`; panels with `role="region"`; chevron rotates 180°; panel height animates via a CSS technique (e.g., `grid-template-rows`); fully keyboard operable; `--transition-normal` timing.

**2.6 Header Navigation**
- Sticky header with anchor links; `scroll-behavior: smooth` (wrapped in `prefers-reduced-motion: no-preference`) + `scroll-margin-top` on sections; mobile menu overlay at `--z-dropdown` with `aria-expanded` on the toggle and proper focus management.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type via `clamp()`, panels that reflow gracefully, no horizontal overflow from 320px up.
- **Smooth, subtle animations:** every state change transitions with the motion tokens. The spec's "subtle animations" = gilded shimmer on gold elements (3s infinite), gentle float/drift on ornaments, and scroll-triggered fade-up reveals (IntersectionObserver) — **all disabled under `prefers-reduced-motion`**.
- **Accessibility (a11y):** ≥4.5:1 body-text contrast in light mode and in the dark fallback; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `section`, `footer`); correct ARIA roles/labels on all custom widgets; logical DOM/focus order; complete keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading states, and dynamic feedback.
- **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.
- **Destructive actions:** `.btn-danger` must be visually distinct (dusty crimson) in every theme.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, and `script.js`, fully linked. A single `<script src="script.js" defer></script>` entry point; no inline `<script>` blocks, no inline styles, no inline handlers.
- **Naming:** one convention end-to-end (BEM recommended). Never mix conventions.
- **Content:** all copy authored in polished English for the Art & Illustration atelier — real headlines, features, testimonials, pricing, and FAQs. Placeholders (`href="#"`) are permitted only for genuinely unspecified destinations (e.g., social profiles, Privacy/Terms pages).
- **Assets:** zero local image dependencies; all visuals are CSS-drawn or Google-hosted fonts/icons; `floral-rococo.png` must never be required for the design to look complete.
- **First-attempt completeness:** all eight sections plus the header, and every interactive component (accordion, modal, form validation, mobile nav, smooth scroll) fully functional and keyboard-navigable end-to-end. Generate the final code immediately in one pass.