Clowncore demo
Clowncore

A maximalist subculture aesthetic inspired by circus and clowns, featuring loud primary colors, polka dots, ruffles, and deliberately chaotic, kitschy visuals.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 8.4 KB · 1129 words
# System Prompt: Build a "Clowncore" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Clowncore-themed Landing Page** on the first attempt. Theme: chaotic, loud, campy circus/clown maximalism (2019–present) — polka dots, stripes, checkerboard, harlequin patterns, playful-creepy circus motifs, hard offset "clown shadows," and a primary + rainbow color clash. Output category: **Playful & Youth**.

**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 lives in `style.css`. **No `style="..."` attributes in HTML.**
* All design properties, layout rules, and states are targeted via class/ID selectors only.
* HTML stays semantic and styling-agnostic: changing the theme requires editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Use the Clowncore token set in `:root` exactly as defined below (adapt names to the standard token schema where needed, e.g. `--bg-primary`, `--text-primary`):
* **Colors:** `--color-bg: #fef7e0` (never pure white; use `#ffffff` only for `--color-surface`), `--color-surface: #ffffff`, `--color-surface-strong: #fff2f8`, `--color-border: #16161d`, `--color-text: #16161d`, `--color-text-muted: #514f5c`, `--color-primary: #ff2d55`, `--color-accent: #ffd400`, `--color-blue: #2f6fed`, `--color-green: #17b26a`.
* **Contrast pairing:** Light backgrounds pair with `#16161d` text; dark backgrounds pair with light text (`#fef7e0`). Enforce in both themes.
* **Radius:** `--radius-sm: 8px`, `--radius-md: 20px`, `--radius-lg: 32px`, `--radius-pill: 999px` (bouncy circus-tent scallops).
* **Shadows:** Hard offset "clown shadows" — `--shadow-sm: 3px 3px 0 var(--color-border)`, `--shadow-md: 5px 5px 0`, `--shadow-lg: 8px 8px 0`. Solid, no blur — this is the signature move.
* **Spacing/Text/Ease:** Use the provided `--space-*`, `--text-*` scale and `--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)` (bouncy).
* **Signature textures:** `--polka-dots: radial-gradient(circle, var(--color-primary) 2px, transparent 2.5px)` and `--rainbow-stripe: linear-gradient(90deg, #ff2d55, #ffd400, #17b26a, #2f6fed, #ff2d55)`. Use polka-dot texture on body, nav, and card backgrounds; use the rainbow stripe as a top border rule on the nav and as section dividers.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` defined to prevent overlap conflicts.

**1.3 Mandatory Dark Mode**
* The source spec does not declare modes; **you must validate the design in both light and dark before publishing.** Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class: e.g. `--color-bg: #16161d`, `--color-surface: #1f1f28`, `--color-surface-strong: #26262f`, `--color-text: #fef7e0`, `--color-text-muted: #b9b7c4`, keeping `--color-primary`, `--color-accent`, `--color-blue`, `--color-green` saturated for contrast. Shadows stay hard-offset but use a light border color in dark mode for visibility.
* Theme switching via `localStorage` persistence with `prefers-color-scheme` fallback; visible toggle button with correct `aria-pressed`/`aria-label`.
* No HTML restructuring for theme switching — variables only.

**1.4 Flexbox Layout & Mobile-First**
* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.
* All layouts mobile-responsive: multi-card rows (Features, Pricing) collapse to single columns; nav collapses gracefully. No horizontal scrolling at any viewport width.

**1.5 Framework**
* Use clean custom CSS (or Tailwind with `@layer`/`@apply`) — all utilities map to the reusable classes defined in the reference spec: `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`.

**1.6 Typography & Icons**
* **Google Fonts mandatory:** Load `Fredoka` (display) and `Baloo 2` (base) via `<link>`; bind to `--font-display` and `--font-sans`.
* **Icons:** Google Material Symbols only. **No inline SVGs, no local icon files.**

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons (`.btn`, `.btn--primary`, `.btn-danger`)**
* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; pill radius; 3px solid border; hard clown shadow.
* Hover: `transform: translate(-2px,-2px)` with shadow growing to `--shadow-md`; `cursor: pointer`.
* Focus: `outline: 3px solid var(--color-blue); outline-offset: 3px` on `:focus-visible`.
* Active: shadow collapses to `1px 1px 0` — a satisfying "press into the page" effect.
* Loading: disabled interaction, CSS spinner (a rotating Google Icon `progress` is acceptable) that does not change button dimensions.
* Disabled: `opacity: 0.5`, `cursor: not-allowed`, no transform.
* Success/Error feedback states driven by `--color-green` / `--color-primary` (as error red).

**2.2 Cards (`.card`)**
* Default: `--color-surface-strong` background with polka-dot texture, 3px border, `--radius-lg`, `--shadow-md`.
* Hover (interactive cards): `transform: translateY(-2px)` + shadow shift.
* `:focus-within`: border color shifts to `--color-blue`.
* Skeleton shimmer state defined in CSS for async content.
* Empty state: Google Icon + guidance text layout.

**2.3 Forms & Inputs (`.input`)**
* States: empty, focused (blue border + soft ring), filled, valid (green border + icon), invalid (red border, error text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and dedicated error feedback container. Used in the Final CTA / newsletter signup.

**2.4 Modals / FAQ Accordion**
* FAQ uses semantic `<details>`/`<summary>` or ARIA-compliant accordion; animated open/close via CSS transitions respecting `prefers-reduced-motion`.
* Any modal: centered flex overlay, Google Icon close button, focus trapping, `Esc` and overlay-click closing, `aria-live` feedback.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, no horizontal overflow, breakpoints for mobile/tablet/desktop.
* **Animations:** all state changes use `transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard)`; respect `prefers-reduced-motion` (disable transforms/transitions).
* **Accessibility:** AA contrast in both light and dark modes. Never rely on color alone — pair color states with icons/text. Semantic HTML5 (`header`, `main`, `section`, `footer`), logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback (form errors, FAQ toggles).
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** `.btn-danger` visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` — separate. Only a single deferred `<script src="script.js" defer>` reference in HTML; no inline script blocks.
* **Naming:** one consistent convention (BEM-style, matching the reference classes) throughout — never mix conventions.
* **Copy:** Write all user-facing copy in **English**, in the playful-creepy campy circus voice of the theme (e.g., "Step Right Up", "The Greatest Show on the Web"). No lorem ipsum — write real copy for every section.
* **Section content guidance:**
  * **Hero:** rainbow-stripe divider, oversized Fredoka headline, badge, primary CTA + secondary CTA, polka-dot background.
  * **Features:** 3 cards, each with a distinct Google Icon and one accent color from the palette (primary/accent/blue/green).
  * **How It Works:** 3 numbered steps in a flex row → column on mobile, checkerboard or harlequin motif accents.
  * **Testimonials:** 3 quote cards with avatar placeholders (Google Icon `face`), badges.
  * **Pricing:** 3 tiers, middle tier highlighted with `--color-primary` background and a "Most Popular" badge.
  * **FAQ:** 5–6 questions, accessible accordion.
  * **Final CTA:** full-width band with rainbow-stripe top border, email input + `.btn--primary`.
  * **Footer:** secondary links in flex row (wrapping), muted text, polka-dot or stripe accent.

---

## 5. EXCEPTIONS & CONFLICTS

* The source spec's Portuguese copy note is resolved as: **all user-facing copy in English.**
* The source spec does not declare light/dark modes — this is overridden: **both modes are mandatory and must be validated before delivery.**
* Keep all CSS variable names, class names, and file names in ASCII/English.

Generate the final code immediately.