Editorial Tri-Tone demo
Editorial Tri-Tone

A contemporary editorial style built on three full-bleed color blocks of dusty pink, mustard cream, and deep burgundy, pairing Bricolage Grotesque with Instrument Serif for a refined magazine feel.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 12.4 KB · 1687 words
# CODING AGENT PROMPT — "Editorial Tri-Tone" Landing Page

## 0. PROJECT BRIEF & THEME DEFINITION

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single pass. Do not ask clarifying questions and do not output partial code.

**Theme:** "Editorial Tri-Tone" — a 2010s fashion-magazine editorial system built from exactly three colors: Dusty Pink `#F2B6C6`, Mustard Cream `#F2D86A`, Deep Burgundy `#7A1F35`. High-contrast color collision: pink/cream fields always carry burgundy text; burgundy fields always carry pink/cream text. Moody, full-bleed, typographic.

**Important distinction:** "Alternating light/dark sections" refers to the tri-tone full-bleed color-block rhythm — it does NOT replace dark mode, which is mandatory (see 1.3).

**Sections — exactly eight, in this order, no more, no less:**
1. **Hero** — full-bleed pink `#F2B6C6`
2. **Features (3 cards)** — full-bleed cream `#F2D86A`
3. **How It Works (3 steps)** — full-bleed burgundy `#7A1F35`
4. **Testimonials** — full-bleed pink `#F2B6C6`
5. **Pricing (3 tiers)** — full-bleed cream `#F2D86A`
6. **FAQ** — full-bleed burgundy `#7A1F35`
7. **Final CTA** — full-bleed pink `#F2B6C6`
8. **Footer (secondary links)** — deep burgundy shade `#4A0F20`

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden everywhere in the HTML.
- **Class/ID Selectors Only:** All layout, design properties, and states target classes/IDs defined in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — a full visual re-theme must be possible by editing `style.css` alone.

### 1.2 CSS Variables & Theme Tokens
Store all tokens in `:root` (theme overrides in `.dark`):

- **Brand tokens:** `--pink: #F2B6C6`, `--cream: #F2D86A`, `--burgundy: #7A1F35`, `--burgundy-deep: #4A0F20` (shade for footer/dark accents).
- **Semantic tokens (default tri-tone mode):** `--primary: #7A1F35`, `--secondary: #F2D86A`, `--bg-primary: #F2B6C6`, `--bg-secondary: #F2D86A`, `--text-primary: #7A1F35`, `--text-secondary: rgba(122,31,53,0.75)`, `--text-success`, `--text-error`, `--border-default: #7A1F35`, `--border-error`, `--border-success`, plus `--border-width: 2px` (thick editorial borders are part of the style).
- **Contrast Pairing (mandatory, both themes):** every light field (pink/cream) pairs with burgundy text; every dark field (burgundy/deep burgundy/dark-mode background) pairs with pink or cream text. Verified pairs: burgundy-on-pink ≈ 5.9:1, burgundy-on-cream ≈ 7.1:1 — keep all body text ≥ 4.5:1.
- **Functional color exception:** success/error tokens are the ONLY colors allowed outside the tri-tone. Use muted, editorial green/red (e.g., `#2F6B4F` / `#B3261E` on light fields; brightened variants on burgundy/dark fields) and verify ≥ 4.5:1 against each background they appear on.
- **Never pure white:** light backgrounds are the pink/cream brand fields; if a near-white is ever unavoidable, use `#fefefe`, never `#ffffff`.
- **Shape & depth:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp editorial corners), `--shadow-sm`, `--shadow-md` (subtle lift shadows tinted `rgba(74,15,32,…)`, never pure black).
- **Spacing & transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 200ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- **Elevation:** `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.
- **Type tokens:** `--font-display: 'Bricolage Grotesque'`, `--font-serif: 'Instrument Serif'`, `--font-base: 'Bricolage Grotesque'`.

### 1.3 Mandatory Dark Mode Support
- **Implementation:** Define a complete dark token set (e.g., `--bg-primary: #2A0B14`, `--bg-secondary: #3A1220`, `--text-primary: #F2B6C6`, `--text-secondary: rgba(242,182,198,0.75)`, inverted borders, brightened success/error) under both a `.dark` class selector and `@media (prefers-color-scheme: dark)`.
- **Partial dark mode exception clause:** the source spec marks dark mode "Partial" — a complete dark token set and functional toggle remain mandatory; "partial" only permits the signature tri-tone full-bleed section fields to persist (optionally darkened) while all cards, forms, buttons, footer, and text tokens fully invert.
- **Persistence:** Store the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Include a fixed, always-visible theme toggle (top-right viewport corner) with correct `aria-pressed` and `aria-label` states, swapping Material Symbols icons (`dark_mode`/`light_mode`).

### 1.4 Flexbox Layout & Mobile-First Alignment
- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- **Mobile-First:** All multi-column layouts (features grid, steps, pricing tiers, testimonial rows) stack to a single column on small viewports and expand at ≥ 900px. Zero horizontal scrolling at any width from 320px up. Use `clamp()` for fluid type.

### 1.5 CSS Framework
- Use clean custom CSS in `style.css` (optionally organized via Tailwind's `@layer`/`@apply`). All utilities must map back to the CSS variables and to generic reusable classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`.

### 1.6 Typography & Icons (Google Fonts Only)
- **Text:** Load Google Fonts via `<link>`: Bricolage Grotesque (weights 400/500/700/800) and Instrument Serif (400 + italic). Display headlines use Bricolage Grotesque 800; subheads, pull-quotes, and testimonial quotes use Instrument Serif (italic for quotes). Eyebrow kickers are uppercase, letter-spaced Bricolage Grotesque.
- **Icons:** Google Material Symbols (Outlined) only. Raw inline SVGs, icon fonts, and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, variants `.btn--primary`, `.btn--ghost`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px solid `--border-default`; Bricolage Grotesque 700; sharp corners. On light fields: burgundy fill + pink text. On burgundy fields: cream fill + burgundy text.
- **Hover:** `translateY(-2px)` lift plus subtle `--shadow-md` shift or brightness change; `cursor: pointer`; 200–250ms transition.
- **Focus:** Distinct visible focus ring (2px outline using `--cream`/`--pink`, offset 3px) via `:focus-visible`.
- **Active:** `transform: scale(0.97)`.
- **Loading:** Class `.is-loading` — disables pointer events, prevents double submission, swaps label for a CSS-only spinner (border spinner in `currentColor`) without changing button dimensions; sets `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error:** `.is-success` / `.is-error` temporary classes using `--text-success`/`--text-error`, always accompanied by a Material Symbol icon and an `aria-live` text message — never color alone.

### 2.2 Card Component (`.card`, variants `.card--featured`, `.card--empty`)
- **Default:** Flexbox column, `align-items: center`, generous padding, `--bg-secondary` or field-matched background, 2px solid `--border-default`, `--radius-md`.
- **Hover:** `translateY(-2px)` with subtle shadow lift.
- **Focus-within:** Border thickens or shifts color when a child link/button receives focus.
- **Loading (Skeleton):** Define a shimmer animation utility class in CSS (even if unused on first paint) so future async content causes no layout jump.
- **Empty State:** Define a fallback pattern — Material Symbol icon, short guidance text — for use if dynamic content is ever absent.

### 2.3 Form & Input Requirements (Final CTA email capture)
- **Structure:** `.input-group` flex container wrapping a `<label>`, the `<input>`, and a dedicated error feedback `<div aria-live="polite">`.
- **States:** Empty, focused (outline ring), filled, valid (success border + Material `check` icon), invalid (error border + `error` icon + message text — never color alone), disabled, read-only. All defined as CSS classes.

### 2.4 Modal / Popup (conditional)
- The eight listed sections do not require a modal, and you must not invent new sections. However, if any overlay is introduced anywhere, it must satisfy: opening/open/loading/success/closing states animated via CSS transitions; centered flex overlay (`align-items: center`) with backdrop; Material Symbol close button; keyboard focus trapping; close via `Esc` and overlay click.

### 2.5 Landing Page Section Specifications
- **Hero:** Full-bleed pink field. Eyebrow kicker, giant Bricolage Grotesque 800 H1 sized with `clamp()` (roughly 3rem → 8rem), Instrument Serif subhead, dual CTAs (primary + ghost). Decorative interest comes from type scale, color blocks, and thick borders only — no external images.
- **Features (3 cards):** Three `.card` items, each with a 48px Material Symbol icon, Bricolage 700 title, short editorial copy; 1 column mobile → 3 columns ≥ 900px.
- **How It Works (3 steps):** Oversized numerals `01 / 02 / 03` in Bricolage Grotesque 800 alternating pink/cream, step titles, and copy; burgundy field with pink/cream text throughout.
- **Testimonials:** 3 editorial pull-quotes in Instrument Serif italic with a Material `format_quote` icon, name + role attribution; responsive row → stacked column.
- **Pricing (3 tiers):** Three `.card` tiers; the middle tier uses `.card--featured` as a full-bleed burgundy card with cream text and a "Most Popular" badge. Prices in Bricolage 800; feature lists use Material `check` icons; one `.btn` per tier with correct field-based color pairing.
- **FAQ:** Accordion of at least 4 items. Each question is a `<button aria-expanded>` controlling a region (`aria-controls`); Material `expand_more` chevron rotates 180° on open; answers animate via CSS (`grid-template-rows: 0fr → 1fr` or equivalent) over `--transition-normal`; fully keyboard operable.
- **Final CTA:** Giant Bricolage 800 statement on pink, plus the email capture form from 2.3 with a submit button demonstrating loading → success flow and `aria-live` feedback.
- **Footer:** Deep burgundy `#4A0F20` field with pink text; brand mark, secondary link columns (About, Contact, Privacy Policy, Terms, and social labels Instagram/Pinterest/TikTok with Material icons), copyright line, and a back-to-top link. All footer links have visible hover states (e.g., animated underline).

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid `clamp()` sizing, responsive breakpoints, no horizontal overflow from 320px up.
- **Smooth Animations:** All state changes transition over `--transition-fast`/`--transition-normal` (200–250ms). Under `prefers-reduced-motion: reduce`, disable transforms, spinner motion, and accordion height animation (instant state changes only).
- **Accessibility (a11y):** Maintain ≥ 4.5:1 text contrast in tri-tone AND dark modes. Never communicate state by color alone. Use semantic HTML5 landmarks (`<header>`, `<main>`, `<section aria-labelledby>`, `<footer>`), a skip-to-content link, logical DOM/focus order, full keyboard operability for every interactive element (toggle, FAQ, form, links), visible `:focus-visible` rings everywhere, and `aria-live` regions for dynamic feedback (form success/errors).
- **Mandatory Visual Feedback:** Every click, hover, and submission produces a visible state change.
- **Destructive Actions:** Any destructive/reset control, if present, uses `.btn-danger` and must be visually distinct in both light and dark themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. Only one `<script>` tag allowed: `<script src="script.js" defer></script>`. Google Fonts and Material Symbols load via `<link>` in `<head>`. Include `<meta name="viewport">`, `lang="en"`, and a descriptive `<title>`.
- **Naming Convention:** BEM exclusively — e.g., `.hero__title`, `.features__grid`, `.card--featured`, `.faq__item`, `.pricing__price`, `.footer__link`. Never mix conventions.
- **JavaScript Scope:** `script.js` handles only: theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback, FAQ accordion behavior, and the Final CTA form simulation (loading → success with `aria-live` announcement). No other JS.
- **Copy:** Author original, purposeful English copy in a fashion-editorial voice for a fictional brand. No lorem ipsum. Placeholders are permitted only for genuinely unknowable details (e.g., footer legal links may target `#`).
- **Assets:** No external image files or CDN images — build all visuals from typography, color blocks, thick borders, and Material Symbols.