Tiki / Tropical demo
Tiki / Tropical

A mid-century Polynesian pop fantasy aesthetic featuring tropical motifs, bold exotic patterns, and kitschy vintage resort imagery inspired by Tiki bar culture.
Category: Retro & Pop
Era: 1950s Mid-Century
Prompt: 9.4 KB · 1245 words
# System Prompt: Build a "Tiki / Tropical" Themed Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below without exception.

**Deliverable:** A complete Landing Page with the theme **Tiki / Tropical** (1930s–1960s Polynesian-pop revival; exotica lounge, escapist, kitschy, warm) containing these sections: **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. **The `style="..."` attribute is forbidden anywhere in the HTML.**
* Target all design properties, layout rules, and states exclusively via class or ID selectors.
* Keep `index.html` semantic and clean; changing the site's look must require editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
Adopt the provided Tiki / Tropical token set as the foundation in `:root`, and extend it with the mandatory semantic aliases listed below:

```css
:root {
  /* color (from theme spec) */
  --color-bg: #f2d9a8;
  --color-surface: #f8e6c4;
  --color-surface-strong: #eccb92;
  --color-border: #a9631f;
  --color-text: #2e1a0f;
  --color-text-muted: #6b4526;
  --color-primary: #e0631f;
  --color-accent: #1f7a6c;
  --color-hibiscus: #d92b52;
  /* radius */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  /* shadow */
  --shadow-sm: 0 2px 6px rgba(46,26,15,0.18);
  --shadow-md: 0 6px 18px rgba(46,26,15,0.24);
  --shadow-lg: 0 14px 36px rgba(46,26,15,0.30);
  /* font */
  --font-sans: 'Poppins', 'Futura', system-ui, sans-serif;
  --font-display: 'Bungee', 'Baloo 2', cursive;
  --font-mono: ui-monospace, monospace;
  /* text scale */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;
  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  /* ease */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* transitions (mandatory additions) */
  --transition-fast: 150ms var(--ease-standard);
  --transition-normal: 250ms var(--ease-standard);
  /* signature effects */
  --bamboo-stripe: repeating-linear-gradient(90deg, #a9631f 0 6px, #7a4515 6px 8px, #c17a30 8px 14px);
  --sunset-fade: linear-gradient(180deg, #e0631f 0%, #d92b52 60%, #7a1f4a 100%);
  /* semantic aliases (mandatory) */
  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-success: #1f7a6c;
  --text-error: #d92b52;
  --border-default: var(--color-border);
  --border-error: #d92b52;
  --border-success: #1f7a6c;
  /* stacking */
  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;
}
```

* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in both light and dark themes. Where a near-white is needed, use `#fff3df` (warm cream, on-theme) instead of `#ffffff`.
* **Signature Move:** A bamboo-stripe border band (`--bamboo-stripe` via `border-image`) must run along the top of every raised surface — nav, cards, and primary buttons — like bamboo trim on a lounge bar. Use `--sunset-fade` for the Hero surface.

**1.3 Mandatory Dark Mode**
* Dark mode **must** be defined. Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector, remapping all color tokens to a warm, dark-lounge palette (deep wood/charcoal backgrounds, cream text, sunset-orange and teal accents) while preserving the bamboo-stripe and sunset effects.
* Theme choice must persist via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button (Google Material Symbols icon) with correct `aria-pressed` and `aria-label` states.
* Verify contrast ratios in **both** light and dark modes before finishing — the source spec explicitly requires validation in both modes before publishing.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. **Every flex container must default to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.
* All layouts must be mobile-responsive out of the box: multi-column rows (features, pricing, footer) collapse to single columns on small viewports. **No horizontal scrolling at any breakpoint.**

**1.5 Framework**
* Use clean custom CSS (the provided component classes: `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) as the component layer. If you introduce Tailwind, all utilities must map back to these CSS variables and generic class names — never mix naming conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Poppins** (body) and **Bungee** (display headings) from Google Fonts via `<link>` tags; bind them to `--font-sans` and `--font-display`.
* Use **Google Material Symbols** for all icons (e.g., `local_bar`, `deck`, `wb_sunny`, `local_florist`, `help`). **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons** — Style all states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, pill radius, bamboo-stripe top trim on `.btn--primary`.
* **Hover:** lift + slight tilt (`translateY(-1px) rotate(-0.5deg)`) with `--shadow-md` and `cursor: pointer`.
* **Focus:** distinct `:focus-visible` ring using `--color-accent` (teal) with offset.
* **Active/Pressed:** `transform: scale(0.97)` feedback.
* **Loading:** disables interaction, prevents double-clicks, renders an animated Google Material Symbols spinner without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error`.
* **Danger:** any destructive action uses a visually distinct `.btn-danger` variant (hibiscus `#d92b52`) readable in both themes.

**2.2 Cards** (Features, Testimonials, Pricing tiers):
* **Default:** Flexbox layout, `--color-surface` background, `--shadow-md`, bamboo-stripe top border.
* **Hover:** `transform: translateY(-2px)` with shadow elevation shift.
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Skeleton:** shimmer animation styles defined in CSS for loading content without layout jumps.
* **Empty State:** fallback layout with a Google Material Symbol and clear guidance text.

**2.3 Forms & Inputs** (newsletter signup in the Final CTA or Footer):
* **States:** Empty, Focused (orange ring via `box-shadow: 0 0 0 3px rgba(224,99,31,0.3)`), Filled, Valid (teal border + check icon), Invalid (hibiscus border, error text, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping label, input, and a dedicated error feedback container wired to an `aria-live="polite"` region.

**2.4 FAQ Accordion** (custom widget):
* Use semantic `<details>`/`<summary>` or ARIA-correct `button` + region pattern; fully keyboard operable, with animated open/close via CSS transitions, chevron icon rotation, and no mouse-only interactions.

**2.5 Modals/Popups** (if any pricing "details" dialogs): centered flex container, backdrop overlay, Google Material Symbols close button, focus trapping, `Esc`/overlay-click closing, and animated opening/closing states via CSS transitions.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, no horizontal overflow at any viewport.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; wrap motion in `@media (prefers-reduced-motion: reduce)` to disable transforms and transitions.
* **Accessibility:** sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, `h1`–`h3` hierarchy); correct ARIA roles/labels on the theme toggle and FAQ accordion; logical DOM/focus order; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Copy:** Write all user-facing copy in **English**, in-theme (tiki bar / exotica lounge voice — escapist, kitschy, warm). No lorem ipsum; write real, on-brand copy for every section.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference; no inline CSS.
* **Naming:** One consistent convention (the provided BEM-flavored classes: `.btn--primary`, `.card`, etc.) across the entire deliverable — never mix conventions.
* **Sections checklist:** Hero (sunset-fade surface, display-font headline, primary CTA), Features (3 cards with Material Symbols icons), How It Works (3 numbered steps), Testimonials (3 quotes in cards), Pricing (3 tiers, middle tier visually elevated/highlighted with a `.badge`), FAQ (accordion), Final CTA (full-width sunset band with newsletter input), Footer (secondary links, flex row collapsing to column on mobile).
* **No unrequested placeholders:** every heading, paragraph, button label, and link must contain finished, on-theme English copy.