Bossa Nova Lounge demo
Bossa Nova Lounge

A sophisticated, warm-toned aesthetic inspired by Brazilian Bossa Nova music culture, blending retro lounge elegance with cultural refinement.
Category: Cultural & Heritage
Era: 1960s Retro
Prompt: 14.8 KB · 2047 words
# SYSTEM PROMPT — "BOSSA NOVA LOUNGE" LANDING PAGE (Cultural & Heritage)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-ready landing page on the first attempt — no clarifying questions, no partial output, no unfilled placeholders.

**Project:** A single-page marketing site for **Bossa Nova Lounge** — a Cultural & Heritage experience celebrating the Bossa Nova Era (1958–1970), reimagined. Mood: elegant, musical, warm, sophisticated, mid-century modern, Rio de Janeiro Copacabana sunset.

**Required sections (in order):** Header/Nav, 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**
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors defined in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — retheming the site must require editing only the CSS file.

### **1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` (light) and override in dark mode (see 1.3). Required tokens:

* **Colors:**
  * `--primary: #D4A574` (Warm Gold — brand accent, buttons, highlights)
  * `--secondary: #E8735A` (Coral Sunset — secondary accent)
  * `--bg-primary: #FFF8E7` (Soft Cream — light-mode page background; never `#ffffff`; use `#fefefe` if a near-white is required)
  * `--bg-secondary: #FAEED9` (warm cream tint — cards, raised surfaces)
  * `--text-primary: #3C2415` (Coffee Brown)
  * `--text-secondary: #6B5442` (muted warm brown)
  * `--text-success: #5A6A2E` (Olive Green darkened for AA contrast on cream)
  * `--text-error: #B5432E` (Coral Sunset darkened for AA contrast on cream)
  * `--border-default: rgba(60, 36, 21, 0.15)`, `--border-error`, `--border-success`
* **Supporting palette roles:** Night Blue `#1B2838` (dark surfaces, gradient origin), Ocean Blue `#2E6B8A` (gradient mid-tone, links), Antique Rose `#C9A0A0` (soft accents, avatar tints), Olive Green `#6B7B3A` (success borders/icons).
* **Signature gradient token:** `--gradient-sunset: linear-gradient(135deg, #1B2838, #2E6B8A, #D4A574)` — used for the Hero and Final CTA backgrounds.
* **Contrast Pairing:** every light background token must pair with a dark text token and vice versa — Soft Cream ↔ Coffee Brown; Night Blue ↔ Soft Cream. Enforce this pairing in both themes.
* **Radius & Shadows:** `--radius-sm: 8px`, `--radius-md: 18px`, `--radius-lg: 28px` (organic curves), `--radius-pill: 999px` (buttons), `--shadow-sm: 0 4px 16px rgba(27,40,56,0.15)`, `--shadow-md: 0 8px 32px rgba(27,40,56,0.3)`.
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation/Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
* **Typography tokens:** `--font-heading: 'Cormorant Garamond', 'Playfair Display', serif`; `--font-base: 'Lato', sans-serif`.

### **1.3 Mandatory Dark Mode Support (Full)**
* Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`: `--bg-primary: #1B2838` (Night Blue), `--bg-secondary: #16222F`, `--text-primary: #FFF8E7`, `--text-secondary: #C4BBA4`, `--primary: #DDB27E` (brightened gold), `--text-error: #F08A6E`, `--text-success: #A8BC7A`, `--border-default: rgba(255,248,231,0.15)`, adjusted shadows.
* Theme switching must work purely through CSS variables — no HTML restructuring.
* Persist the user's choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Apply the saved theme at the very top of `script.js` to minimize flash of incorrect theme.
* Include a visible toggle in the header using Google Material Symbols (`dark_mode` / `light_mode`) with correct `aria-pressed` and `aria-label` ("Toggle dark mode").

### **1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
* **Default Alignment Rule:** every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* Mobile-first: rows (nav, feature grid, pricing grid, footer columns) collapse to columns on small viewports; no horizontal scrolling at any width; fluid `clamp()` typography; `max-width` containers (~1200px).

### **1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utilities must map back to the CSS variables above or to generic reusable classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`).

### **1.6 Typography & Icons (Google Fonts Mandatory)**
* Load via `<link>`: **Cormorant Garamond** (400, 500, 600, 700 + italics) for headings and **Lato** (300, 400, 700) for body; bind to `--font-heading` / `--font-base`.
* Headings use `letter-spacing: 0.1em` and fluid serif sizing.
* Icons: Google Material Symbols only — use the **Outlined** variant with `font-variation-settings: 'FILL' 0, 'wght' 300` for the thin, delicate line aesthetic. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.

## 2. COMPONENT DESIGN SPECIFICATIONS

### **2.1 Button Component Requirements**
Style all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, pill radius, Lato 700.
* **Variants:** Primary = Warm Gold background with Coffee Brown text; Secondary = transparent with Warm Gold border and gold text (Soft Cream text on dark surfaces); Danger = visually distinct in both themes.
* **Hover:** brightness/elevation shift with `cursor: pointer`.
* **Focus:** distinct ring via `box-shadow` using `--primary` for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** `.is-loading` disables interaction, prevents double-clicks, and renders a CSS spinner or animated Google Icon without changing button dimensions; set `aria-busy="true"`.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error`.

### **2.2 Card Component Requirements**
Applies to Features, Testimonials, and Pricing cards:
* **Default:** flexible Flexbox layout, `--bg-secondary` surface (or glass over gradients), `--border-default`, `--radius-lg`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` plus shadow shift to `--shadow-md`.
* **Focus-within:** Warm Gold border highlight when a child link/button receives focus.
* **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.
* **Empty State:** structured fallback with a Google Icon and clear guidance text.

### **2.3 Form & Input Requirements**
Used for the Final CTA newsletter capture:
* **Structure:** flex container (`.input-group`) wrapping a `<label>`, the input field, and a dedicated error-feedback element; link them with `for`/`id` and `aria-describedby`.
* **States:** Empty, Focused (Warm Gold outline ring), Filled, Valid (Olive Green border + `check_circle` icon), Invalid (error border, `--text-error` message, `error` icon, `aria-invalid="true"`), Disabled, Read-only.
* Feedback renders in an `aria-live="polite"` region; never rely on color alone — pair color with icons and text.

### **2.4 Accordion / Modal Requirements**
* **FAQ accordion:** each question is a `<button>` with `aria-expanded` and `aria-controls`; panels use `role="region"`; an `expand_more` Google Icon rotates 180° on toggle; animate open/close height via CSS transitions; fully keyboard operable.
* **Any modal/popup** (e.g., an optional "Preview the Sound" dialog in the Hero): centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay click; Opening, Open, Loading, Success/Error, and Closing states all animated via CSS transitions; respect `--z-modal`.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable floating notes, spins, and smooth scrolling; reduce transitions to essentials).
* **Signature micro-animation:** decorative musical notes (`music_note` / `music_note_2` Material Symbols, `aria-hidden="true"`) drift gently — `animation: float 6s ease-in-out infinite` with staggered `animation-delay` values — in the Hero and Final CTA.
* **Accessibility (a11y):** AA contrast in both Light and Dark modes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive/distinct actions:** `.btn--danger` and any destructive action must be visually distinct in both themes.

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer></script>`).
* **Naming Convention:** BEM (`block__element--modifier`) consistently across HTML, CSS, and JS — never mix conventions.
* **No Unrequested Placeholders:** write real, polished English copy for every heading, label, testimonial, and FAQ answer. Lorem ipsum is forbidden. Footer links without target pages may use `href="#"` but must still carry full hover/focus styles.
* **Self-contained visuals:** all decorative artwork (vinyl records, waves, textures) must be CSS-drawn (gradients, pseudo-elements, `border-radius`) — no external image dependencies. Testimonial avatars are circular initial tokens tinted with Antique Rose / Olive / Warm Gold.

## 5. THEME DESIGN DIRECTION — "BOSSA NOVA LOUNGE"

### **5.1 Mood & Concept**
Elegant, musical, warm, sophisticated. The Bossa Nova Era (1958–1970) reimagined: mid-century modern lines, Rio de Janeiro Copacabana sunsets, smooth acoustic vinyl warmth.

### **5.2 Visual Rhythm (Sheet-Music Layouts)**
Alternate section backgrounds (cream ↔ night blue) like measures on a musical score; use generous whitespace and consistent vertical rhythm for "visual breathing"; optionally group content with thin "staff line" dividers (`--border-default`).

### **5.3 Curved Organic Elements (Sound Waves)**
Section transitions use curved, wave-like dividers built from CSS pseudo-elements and `border-radius` — no images. Circular motifs throughout: `border-radius: 50%` for the vinyl record, avatars, and step-number badges.

### **5.4 Warm Sunset Gradients & Glass**
Hero and Final CTA use `--gradient-sunset` (135deg, Night Blue → Ocean Blue → Warm Gold) with `#FFF8E7` text. The nav bar and cards over gradients use glass effects: `backdrop-filter: blur(10px)` with translucent token-based backgrounds.

### **5.5 Textures & Decorations**
* **Vinyl texture:** concentric-groove effect via layered `repeating-radial-gradient` on the Hero's circular vinyl motif; slow, subtle rotation on hover (paused under reduced motion).
* **Wood texture:** very subtle `repeating-linear-gradient` at low opacity on select surfaces (e.g., the featured pricing card).
* **Floating notes:** 3–5 low-opacity musical notes drifting in Hero/Final CTA (see Section 3).
* **Signature elevation:** `0 8px 32px rgba(27,40,56,0.3)`.

## 6. PAGE SECTION REQUIREMENTS

### **6.0 Header / Navigation**
Sticky, glass (`backdrop-filter: blur(10px)`); wordmark logo with a `music_note` icon; anchor links to all sections; theme toggle (per 1.3); primary CTA "Join the Lounge"; mobile hamburger (`menu` icon) opening an accessible dropdown with `aria-expanded`, closing on `Esc` and link click.

### **6.1 Hero**
Full-viewport `--gradient-sunset` background; floating notes; CSS-drawn vinyl motif; eyebrow label (e.g., "Est. Rio de Janeiro · 1958"); H1 and subcopy in `#FFF8E7`; two CTAs — primary "Start Listening" and secondary outline "Our Story"; curved wave divider flowing into the next section.

### **6.2 Features — 3 Cards**
Section heading + intro; three `.card`s, each with a thin-line Material Symbol icon (`library_music`, `history_edu`, `graphic_eq`), serif title, and copy. Suggested Cultural & Heritage angles: curated classic recordings from the era, artist heritage stories of the 1958–1970 greats, vinyl-warm remastered sound.

### **6.3 How It Works — 3 Steps**
Three steps with circular numbered badges (`border-radius: 50%`, Warm Gold) connected by a subtle wave/staff line; vertical stack on mobile; each step includes an icon, title, and short copy.

### **6.4 Testimonials**
Three cards: circular initial-token avatars (Antique Rose / Olive / Warm Gold tints), italic serif quote, star rating (`star` icons with an `aria-label` such as "Rated 5 out of 5"), name plus role/city. Hover lift per 2.2.

### **6.5 Pricing — 3 Tiers**
"Listener" (free), "Aficionado" (featured — scaled up, Warm Gold border, "Most Popular" badge, wood-texture accent), "Collector" (premium). Each tier includes a price, a feature list with `check_circle` icons, and a CTA. Featured CTA uses `.btn--primary`; others use `.btn--secondary`. The grid collapses to a single column on mobile with the featured card first.

### **6.6 FAQ**
5–6 questions implementing the accessible accordion from 2.4 (e.g., what the lounge offers, subscription details, cancellation, supported devices, audio quality). Smooth height animation, chevron rotation, `aria-expanded` maintained.

### **6.7 Final CTA**
Full-width sunset-gradient band with floating notes; headline + short copy; newsletter email form per 2.3 (label, input, submit "Join the Lounge") with inline validation, loading, and success states announced via `aria-live`.

### **6.8 Footer**
Night Blue surface in both themes with Soft Cream text; brand + tagline; secondary link columns (About, Press, Contact, Privacy, Terms — `href="#"` allowed per Section 4); social icons (Material Symbols); copyright line with dynamic year; back-to-top link. All links styled with hover/focus states.

## 7. CONTENT & COPY RULES

* **Language:** write ALL user-facing copy in English. Portuguese cultural terms ("bossa nova," "saudade," song/artist references) may appear as flavor where naturally supported by English context.
* **Tone:** warm, sophisticated, evocative — sunset strolls along Copacabana, vinyl crackle, smooth acoustic guitar. Cultural & Heritage register: celebrate the era's legacy, its artists, and its sound.
* **Completeness:** every heading, button, testimonial, FAQ answer, and footer label must be final, polished copy — the full page must be delivered complete on the first attempt.