Witchcore / Witchy demo
Witchcore / Witchy

Category: Fantasy & Sci-Fi
Era: 2020s Modern
Prompt: 8.2 KB · 1141 words
# System Prompt: Build a Witchcore / Witchy Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Landing Page** in a single attempt, following every rule below without exception. Do not output partial code, scaffolds, or explanations — deliver the finished site.

**Theme:** Witchcore / Witchy — mystical, goth-witch, cozy-dark, celestial and botanical. Crystals, herbs, candles, tarot, moons, deep purples, black, forest green, gold accents.

**Sections required (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT ARCHITECTURE RULES

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css`. **Forbidden:** any `style="..."` attribute in HTML.
* All design properties, layout rules, and states must be targeted via class or ID selectors only.
* HTML must remain clean, semantic, and styling-agnostic — changing the look requires editing only CSS.

**1.2 CSS Variables & Theme Tokens**
Use the provided Witchcore token set as the foundation, mapped into the required canonical names:
* **Colors:** `--primary` (#7e57c2), `--secondary` (#c9a24b gold accent), `--bg-primary` (#1a1523), `--bg-secondary` (#241d31), `--text-primary` (#ece6f5), `--text-secondary` (#b6a8d1), `--text-success`, `--text-error`, `--border-default` (#6b4f9e), `--border-error`, `--border-success`. Also keep `--color-forest: #2f5233` and `--color-surface-strong: #2e2540`.
* **Contrast Pairing:** Every background token must pair with a correctly contrasting text token in **both** light and dark themes — dark backgrounds get light text, light backgrounds get dark text. Never violate this.
* **Light Mode Background:** Light mode must not use pure white. Use a warm parchment-mystic tone (e.g., `#f3eee2` or similar) with dark plum text — never `#ffffff`; use `#fefefe` if a near-white is required.
* **Radius, Shadows, Spacing, Transitions:** Keep the provided `--radius-*`, `--shadow-*` (including `--shadow-glow`), `--space-*`, `--transition-fast`, `--transition-normal`, `--ease-standard` tokens.
* **Elevation/Stacking:** Define `--z-dropdown`, `--z-modal`, `--z-toast` and use them for any layered element (FAQ accordions, sticky nav).
* **Signature tokens:** Preserve `--moon-phase`, `--celestial-border`, and `--starfield-tint` from the reference spec — they are the theme's signature move (a small gold "moon" glyph glowing in the corner of every raised surface over a faint starfield tint). Repeat on nav, cards, and primary buttons.

**1.3 Mandatory Dark Mode**
* Dark mode is the theme's native mode (the provided palette IS dark). Define it as the default token set, and provide a full light-mode token set under a `.light` class (and/or `@media (prefers-color-scheme: light)` when no stored preference exists).
* **Theme Switching:** All colors must switch purely via CSS variables — no HTML restructuring.
* **Persistence:** Store user choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle button (moon/star Google Material Symbol) with correct `aria-pressed` and `aria-label` states. Prevent flash-of-wrong-theme with an inline pre-paint script in `<head>` (this is the only permitted inline script).
* **Validate both light and dark modes before finishing** — the source spec explicitly requires validation in both modes before publishing.

**1.4 Flexbox Layout & Mobile-First**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a justified exception exists (document exceptions in a CSS comment).
* Mobile-first: hero, feature grid, pricing tiers, and footer columns must collapse to single-column stacks on small viewports. **No horizontal scrolling at any width.**

**1.5 Framework**
* Use clean custom CSS driven by the provided component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) as the base, extended with a consistent BEM naming convention (`.hero__title`, `.pricing__tier`, `.faq__item`, etc.). Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Google Fonts** via `<link>`: Cormorant Garamond (body), Cinzel or UnifrakturCook (display headings). Bind to `--font-base` and `--font-display`.
* Icons: **Google Material Symbols** only. Explicitly forbidden: raw inline SVGs, local icon files, emoji as icons.
* Use celestial/botanical Material Symbols where fitting (e.g., `dark_mode`, `auto_awesome`, `local_florist`, `menu_book`, `star`, `help`).

---

## 2. COMPONENT SPECIFICATIONS

**2.1 Buttons** — All states via CSS classes:
* Default: flex, centered, `gap: 0.5rem`, min touch target 44×44px, pill radius, celestial border.
* Hover: glow (`--shadow-glow`) + lift. Focus: distinct gold focus ring (`outline: 2px solid var(--color-accent)`). Active: `transform: scale(0.97)`.
* Loading: disables interaction, renders an animated Google Symbol spinner without changing button dimensions.
* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* Success/Error feedback states driven by `--text-success` / `--text-error` (e.g., newsletter signup in Final CTA).
* Destructive/danger variant `.btn--danger` must be visually distinct in both themes (not used on this page unless a pricing cancel action needs it).

**2.2 Cards** (Features, Testimonials, Pricing tiers):
* Default: flexbox layout, `--bg-secondary`, celestial border, `--shadow-md`, signature `--moon-phase` corner glyph via `::before`.
* Hover: `transform: translateY(-2px)` + shadow shift.
* Focus-within: border highlights when a child link/button is focused.
* Skeleton loading: shimmer animation defined in CSS (apply to testimonial cards on initial load, resolving after ~800ms).
* Empty state: Google Icon + guidance text fallback for testimonial content.

**2.3 Forms & Inputs** (Final CTA email capture):
* States: empty, focused (gold glow ring), filled, valid (success border + check icon), invalid (error border, error text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live="polite"`.
* Validate email format in JS; never rely on color alone — pair error color with icon and text.

**2.4 FAQ Accordion** (modal-adjacent interactive component):
* Use native `<details>/<summary>` or ARIA-compliant custom accordion with keyboard operability, animated open/close via CSS transitions, layered with `--z-dropdown` if overlapping content.
* Chevron/plus Google Symbol rotates on open; state communicated by more than color.

---

## 3. UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type via clamp(), breakpoints without overflow.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion: reduce`.
* **Accessibility:** sufficient contrast in both modes; semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`); logical focus order; full keyboard operability; `aria-live` regions for form feedback and loading states; skip-to-content link.
* **Mandatory visual feedback** on every click, hover, and submission.
* **Content:** Write all user-facing copy in **English**, on-theme (mystical, cozy, witchy — e.g., "Begin Your Ritual", "What the Cards Reveal", pricing tiers named like "Apprentice / Adept / High Priestess"). No lorem ipsum — write real, thematic copy for every section.

---

## 4. DELIVERABLES

* **Files:** `index.html`, `style.css`, `script.js` — separate, complete. Only inline script permitted: the single pre-paint theme snippet in `<head>`, plus one deferred `<script src="script.js">` entry point.
* **Naming:** BEM consistently across all new classes; base components keep their provided names.
* **No unrequested placeholders.** Every section fully built and styled on first delivery.
* **Section checklist (all must be present and styled):** Hero (headline, subcopy, primary CTA, celestial visual treatment), Features (3 cards with Material Symbol icons), How It Works (3 numbered steps), Testimonials (3 quotes with names/roles), Pricing (3 tiers, middle tier highlighted, CTA per tier), FAQ (5–6 thematic questions), Final CTA (email form with validation + success state), Footer (secondary links, social placeholders as icon links, theme toggle, copyright).