Airbnb Coral Marketplace demo
Airbnb Coral Marketplace

A warm, Airbnb-inspired marketplace aesthetic featuring coral accents, rounded cards, generous whitespace, and friendly consumer-facing imagery.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 6.3 KB · 843 words
# System Prompt: Build "Airbnb Coral Marketplace" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Theme: **Airbnb Coral Marketplace** — a warm, photography-first travel marketplace aesthetic (2024–2026 era). Sections required: **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 must live in a dedicated `style.css` file. **Forbidden:** any `style="..."` attribute in HTML.
- Target all design properties, layout rules, and states via class or ID selectors only.
- HTML must remain semantic and clean; changing the look must never require markup edits.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root`:
- **Colors:** `--primary: #ff385c` (Rausch Red), `--secondary: #460479` (Luxe Purple), `--bg-primary: #ffffff`, `--bg-secondary: #f2f2f2` (Light Surface), `--text-primary: #222222` (warm near-black — never pure black), `--text-secondary: #6a6a6a`, `--text-success`, `--text-error`, `--border-default: #c1c1c1`, `--border-error`, `--border-success`, `--focused-gray: #3f3f3f`.
- **Contrast pairing:** light backgrounds pair with `--text-primary`; dark surfaces pair with light text tokens.
- **Radius tokens:** `--radius-sm: 8px` (buttons), `--radius-md: 14px` (badges), `--radius-lg: 20px` (cards), `--radius-xl: 32px` (large surfaces), `--radius-circle: 50%` (circular carousel/step controls).
- **Shadows — mandatory three-layer system:** `--shadow-sm`, `--shadow-md` must implement the exact Airbnb stack: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`.
- **Spacing & transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.25, 0.8, 0.4, 1)`.
- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Dark Mode (Mandatory)**
- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class.
- Dark palette: warm charcoal backgrounds (e.g., `#1c1c1e` / `#2b2b2d`), light text `#f5f5f5`, Rausch Red `#ff385c` retained as accent (verify contrast; lighten to `#ff5a76` if needed).
- Persist user choice via `localStorage` with `prefers-color-scheme` fallback; include a visible toggle with correct `aria-pressed` and `aria-label`.
- Note: the source spec marks dark mode "Not Recommended" — implement it anyway per mandatory architecture, but optimize the light theme as the primary experience.

**1.4 Flexbox Layout & Mobile-First**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
- All sections must stack into single columns on small viewports; no horizontal scrolling at any breakpoint.

**1.5 Framework**
- Use Tailwind CSS (CDN or build) with custom tokens mapped to the CSS variables above; component classes (`.btn`, `.card`, `.input-group`) defined via `@layer`/`@apply`. One naming convention throughout — no mixing.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load **Inter** (variable, weights 500–700) via Google Fonts `<link>` as the Cereal VF substitute; bind to `--font-base`. Rounded, warm feel at weights 500–700.
- **Icons:** Google Material Symbols only. **Forbidden:** inline SVGs and local icon files.
- **Headings:** negative letter-spacing — `-0.44px` at ~22px, scaling to `-0.18px`/`-0.24px` on large display headings — for an intimate, Airbnb-like feel.

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px; `border-radius: var(--radius-sm)`.
- Primary CTA: Rausch Red fill, white text. Hover: brightness shift + shadow lift. Focus: distinct ring via CSS variables. Active: `transform: scale(0.97)`.
- Loading: disabled + CSS spinner, no dimension distortion. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- `.btn-danger` (e.g., destructive pricing actions) must be visually distinct in both themes.

**2.2 Cards (Features, Testimonials, Pricing, listing-style cards)**
- Default: Flexbox layout, `--bg-secondary` or white surface, `border-radius: var(--radius-lg)`, three-layer shadow tokens.
- Hover: `transform: translateY(-2px)` + shadow elevation shift. Focus-within: highlighted border.
- Photography-first: feature/testimonial cards use prominent imagery (via `https://picsum.photos/...` placeholders) as primary content, with text overlays or captions below.
- Skeleton shimmer and empty-state (Google Icon + guidance text) styles defined in CSS.

**2.3 Forms (FAQ search, newsletter in Final CTA/Footer)**
- States: empty, focused (outline ring), filled, valid, invalid (error border, red text, error icon), disabled, read-only.
- Structure: flex wrapper → label → input → dedicated error container with `aria-live="polite"`.

**2.4 FAQ Accordion / Modals**
- Animated open/close via CSS transitions (`max-height`/grid-template-rows technique). Keyboard operable, `aria-expanded` on triggers, Esc to close, focus trapping if a modal is used.

---

## 3. UX & MICRO-INTERACTION RULES

- Responsive by default; fluid typography; zero horizontal overflow.
- All state changes transition with `var(--transition-normal)`; respect `prefers-reduced-motion`.
- Accessibility: WCAG contrast in both themes, semantic HTML5 (`header`, `main`, `section`, `footer`), ARIA on custom widgets, logical focus order, never color-only state communication, `aria-live` for dynamic feedback.
- Every click/hover triggers visible feedback. Circular (50%) controls for any carousel/step navigation elements.
- Section copy: real, English-language marketplace copy (travel hosting/booking context) — no lorem ipsum.

---

## 4. DELIVERABLES

- Files: `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form feedback only). No inline `<script>` beyond one deferred entry point.
- Sections in order: Hero (headline + primary/secondary CTA + hero photography), Features (3 cards), How It Works (3 numbered steps with circular step indicators), Testimonials, Pricing (3 tiers, middle tier highlighted with Rausch Red), FAQ (accordion), Final CTA (Rausch Red panel or full-bleed section), Footer with secondary link columns.
- Consistent class naming throughout; no unrequested placeholders.