Shabby Chic demo
Shabby Chic

A romantically vintage style built on faded pastel tones, distressed textures, and delicate floral details that evoke nostalgic cottage warmth.
Category: Retro & Pop
Era: 1990s Retro
Prompt: 12.1 KB · 1586 words
# CODING-AI BUILD PROMPT — "Shabby Chic" Landing Page (Single-Attempt, Production-Ready)

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Deliver the complete, finished landing page code on the first attempt — no TODOs, no stubs, no placeholder-only sections.

## 0. THEME DIRECTION & CONTENT BRIEF

- **Theme:** Shabby Chic — pastel, faded, vintage, romantic. Era: 1980s–90s English Cottage Revival. Mood: cozy, nostalgic, cottage-like, gently distressed, never harsh or saturated.
- **Brand & Copy:** Invent one coherent fictional brand (suggested: a hand-restored vintage homeware / cottage-lifestyle brand, e.g., "The Faded Rose"). Write ALL user-facing copy in English in a warm, nostalgic tone. No lorem ipsum anywhere.
- **Sections (in this order):** slim header chrome (wordmark, anchor links, theme toggle, CTA), 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`. The `style="..."` attribute is forbidden in HTML.
- All design properties, layout rules, and states are applied via class/ID selectors only.
- HTML stays semantic and style-agnostic: re-theming the page must require editing CSS only, never markup.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` (light) and override in `.dark`:

- **Colors (light):** `--primary: #E8C4C4` (Faded Rose), `--secondary: #C5D5C5` (Soft Sage), `--accent-blue: #A4B8C4` (Dusty Blue), `--accent-lavender: #D8D0E0`, `--accent-blush: #F5D5D5`, `--wood: #B8A898`, `--bg-primary: #FAF0E6` (Antique White), `--bg-secondary: #F0E6D6` (Warm Linen), `--bg-card: #FEFDFB` (warm near-white — never `#ffffff`; where a neutral white is unavoidable use `#fefefe`).
- **Text:** `--text-primary: #6A5A5A`, `--text-secondary: #7A6A62`, `--text-on-primary: #4E3B3B` (deep cocoa for text on pastel fills), `--text-success: #526F52`, `--text-error: #9C4F4F`.
- **Borders:** `--border-default: rgba(200,180,180,0.4)` (decorative frames), `--border-strong: rgba(184,168,152,0.7)` (interactive controls), `--border-error: rgba(156,79,79,0.6)`, `--border-success: rgba(82,111,82,0.6)`.
- **Shape/Elevation:** `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 12px`, `--shadow-sm: 0 2px 10px rgba(0,0,0,0.05)`, `--shadow-md: 0 6px 18px rgba(0,0,0,0.08)`.
- **Motion/Spacing:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
- **Fonts:** `--font-base: 'Lora', Georgia, serif` (weights 300–400, plus italics); optionally `--font-display: 'Cormorant Garamond', 'Lora', serif` (300/400) for hero and section headings only.
- **Contrast Pairing (mandatory):** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — in BOTH themes. Verify every text/background pair meets WCAG AA (4.5:1 normal, 3:1 large) before finalizing; darken text tokens (never lighten backgrounds) if a pair fails.

**1.3 Mandatory Dark Mode**
- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #2B2422`, `--bg-secondary: #352D29`, `--bg-card: #3B322D`, `--text-primary: #F0E6D6`, `--text-secondary: #C6B7A6`, `--primary: #D9ACAC`, `--secondary: #A3BFA3`, `--accent-blue: #93AAB8`, `--text-on-primary: #2E211E`, `--text-success: #A8C4A8`, `--text-error: #E0A8A8`, `--border-default: rgba(232,196,196,0.22)`, `--border-strong: rgba(232,196,196,0.45)`, deeper shadows.
- Theme switching must work purely via CSS variables — no HTML restructuring. Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle (header and/or footer) using a Google Material Symbol (`dark_mode`/`light_mode`) with correct `aria-pressed` and `aria-label` states.
- **Exception clause:** The source style spec marks Dark Mode as "Not Recommended" for this theme. Dark Mode remains mandatory: implement it as a muted, warm "candlelit cottage" adaptation — never pure `#000`/`#fff`, never high saturation — and treat Light Mode as the canonical presentation.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout container with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- Mobile-first: rows convert to stacked columns on small viewports (`flex-direction: column`), card rows use `flex-wrap: wrap` with `flex: 1 1 260px` items. No horizontal scrolling at any width. Minimum touch target: 44×44px.

**1.5 Framework & Naming**
- Use clean custom CSS in a single `style.css` (optionally organized with `@layer`). **BEM is the single naming convention** (`block__element--modifier`) plus generic component classes (`.btn`, `.card`, `.input-group`). Do not mix in utility-framework classes.

**1.6 Typography & Icons (Google Only)**
- Load fonts via Google Fonts `<link>`: Lora (300, 400, 500 + italics); Cormorant Garamond (300, 400) if used for display. Bind to `--font-base`/`--font-display`. Headings use thin weights (300–400) with generous letter-spacing for elegance.
- ALL icons are Google Material Symbols (Outlined, weight 300). Raw inline SVGs, emoji-as-icons, and local icon files are forbidden.

**1.7 Signature Shabby Chic Effects (CSS-only)**
- **Faded washes:** decorative overlay layers at `opacity: 0.7`; decorative elements at `opacity: 0.9`; imagery gets `filter: saturate(0.8)`.
- **Distressed texture:** CSS-only layered `repeating-linear-gradient` + low-alpha `radial-gradient` speckle clusters on section backgrounds. No external texture files.
- **Floral overlays:** CSS `radial-gradient` petal/cluster patterns at low opacity behind hero and Final CTA content; layers are `position: absolute`, `pointer-events: none`, `aria-hidden="true"`.
- **Vintage vignette:** inset box-shadows (e.g., `inset 0 0 80px rgba(106,90,90,0.15)`) and delicate double-line frames (`border` + `outline` with offset) on hero, pricing highlight, and Final CTA.
- **Background images:** if imagery is used (picsum seeds permitted), apply `filter: blur(3px) saturate(0.8)` with `transform: scale(1.05)` inside `overflow: hidden` wrappers to prevent edge bleed, plus a pastel wash overlay at 0.7 opacity.
- Thin `1px` borders and `6px` rounded corners throughout.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons (`.btn` + variants)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, Lora 400, `--radius-md`, 1px border. Variants: `.btn--primary` (Faded Rose fill, `--text-on-primary` text), `.btn--secondary` (Warm Linen fill, rose border), `.btn--ghost`, `.btn--danger` (muted dusty red — visually distinct in BOTH themes).
- **Hover:** gentle `brightness(1.05)` + `--shadow-sm`, `cursor: pointer`. **Focus:** distinct 2px ring (`--accent-blue`/rose) with 2px offset, visible in both themes. **Active:** `transform: scale(0.97)`.
- **Loading (`.btn--loading`, `aria-busy="true"`):** disables interaction, prevents double-clicks, shows a CSS spinner or animated Material Symbol without changing button dimensions.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success/Error:** temporary state classes driven by `--text-success`/`--text-error`, always paired with a Material Symbol icon and text — never color alone.

**2.2 Cards (`.card`)**
- **Default:** flex column, `--bg-card`, 1px `--border-default`, `--radius-md`, `--shadow-sm`, generous padding.
- **Hover:** `transform: translateY(-2px)` + `--shadow-md` via `--transition-normal`. **Focus-within:** border shifts to Faded Rose when a child link/button receives focus.
- **Loading (`.card--skeleton`):** shimmer animation CSS defined (disabled under reduced motion). **Empty (`.card--empty`):** Material Symbol + short guidance text layout defined.

**2.3 Forms & Inputs (`.input-group`)**
- Flex column wrapping: `<label>`, input, and a dedicated error-feedback container with reserved min-height (no layout jump).
- **States via classes:** empty, focused (soft ring), filled, valid (success border + check icon), invalid (error border + `--text-error` message + error icon), disabled, read-only.
- Newsletter form (Final CTA): client-side email validation, `aria-live="polite"` feedback region, submit runs the button's loading state, then a success state + toast. Never color-only error signaling.

**2.4 Modal & Toasts**
- If any modal/popup is used (e.g., a confirmation dialog), it must be: centered flex overlay, backdrop, `--z-modal`, Google Icon close button, focus trap, `Esc` and overlay-click close, CSS-animated open/close states.
- Toasts: `aria-live` region, `--z-toast`, auto-dismiss, icon + text, styled for both themes.

**2.5 Page Section Build Specifications**
- **Header chrome:** slim sticky bar — serif wordmark, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, small CTA. Mobile: links collapse behind a Material Symbol `menu` button opening a `--z-dropdown` panel (keyboard operable, `aria-expanded`, closes on `Esc`/link click). Include a skip-to-content link.
- **Hero:** stacked on mobile, two-column flex on desktop. Display-serif headline (weight 300), subcopy, primary + secondary CTA, small trust hint. Background: layered floral CSS overlay + vignette + optional blurred image per 1.7.
- **Features:** 3 `.card`s in a wrapping flex row — pastel circular icon badge (Material Symbol), title, copy. Full card states per 2.2.
- **How It Works:** 3 steps with serif numerals (01/02/03) in pastel badges, connected by a thin dashed CSS line (horizontal desktop, vertical mobile), flex layout, `align-items: center` default.
- **Testimonials:** 3 cards — `format_quote` Material Symbol, italic Lora quote, attribution (CSS pastel initial-avatar or picsum portrait with `saturate(0.8)`), star rating via Material Symbols.
- **Pricing:** 3 tiers in a wrapping flex row; middle tier highlighted ("Most Loved" rose badge, `--border-strong` rose frame, vignette, slight elevation). Each: tier name, serif price, feature list with check Material Symbols, full-state CTA per 2.1.
- **FAQ:** accessible accordion — `<h3><button aria-expanded aria-controls>` + panel; CSS-animated expansion (e.g., `grid-template-rows: 0fr→1fr`); 5–6 in-theme Q&As; keyboard operable.
- **Final CTA:** full-bleed band with floral overlay + vignette, headline, short copy, email capture form per 2.3 (input + button inline on desktop, stacked on mobile), privacy microcopy.
- **Footer:** brand blurb, secondary link columns (e.g., Shop / Company / Support), social icons (Material Symbols), legal/copyright line. All decorative layers `aria-hidden`.

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type/spacing, breakpoints ~640/768/1024px, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully disabled/replaced under `prefers-reduced-motion`. Optional IntersectionObserver reveal-on-scroll (reduced-motion aware).
- **Accessibility:** WCAG AA contrast in light AND dark; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); logical focus order; full keyboard operability (no mouse-only interactions); `aria-live` for form feedback, toasts, and loading; never color-only state.
- **Mandatory feedback:** every click, hover, and submission produces a visible state change.
- **Destructive/distinct actions:** `.btn--danger` reads clearly in both themes.

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. HTML contains exactly one `<script src="script.js" defer>` reference — no inline script blocks.
- **script.js scope:** theme toggle + `localStorage` persistence, mobile menu, FAQ accordion, smooth anchor scrolling, newsletter validation + simulated submit (loading → success/error + toast). Nothing beyond this.
- **Naming:** BEM only, consistently, across the entire deliverable.
- **Copy:** complete, in-theme English everywhere; placeholders only where content was genuinely unspecified (e.g., picsum image seeds).
- **Output the full, finished code on the first attempt.**