MANDALA — Radial Symmetry Studio demo
MANDALA — Radial Symmetry Studio

An intricate, meditative visual style built around radial symmetry and ornamental geometric patterns reminiscent of sacred mandala artwork.
Category: Art & Illustration
Era: Timeless Traditional
Prompt: 15.5 KB · 2090 words
# SYSTEM PROMPT — CODING AGENT BRIEF

**Build the complete "MANDALA — Radial Symmetry Studio" landing page. Production-grade code, delivered on the first attempt, in exactly three files: `index.html`, `style.css`, `script.js`.**

---

## 0. PROJECT BRIEF

- Deliver a **single-page, artistic/creative landing page** for *Mandala*, a fictional radial-symmetry design studio.
- Visual identity: **2020s contemporary glassmorphism** — translucent glass panels floating over luminous indigo/periwinkle gradient fields, concentric radial "mandala" motifs, soft glows, generous rounded geometry, serene and precise.
- **Mode exception (explicit):** the source spec designates **Light as the primary mode** — Light is the default presentation. **Dark Mode remains mandatory** and must be fully tokenized, styled, persisted, and toggleable.
- **Framework exception (explicit):** per the zero-build, three-file deliverable, use **hand-authored custom CSS** (the sanctioned "clean custom CSS" path). Do **not** add Tailwind, any framework CDN, or any build step.
- Required sections, in order: sticky header (page chrome + theme toggle), 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:** every design property, layout rule, and state is targeted via class or ID selectors in `style.css`.
- **Minimal HTML modifications:** markup stays semantic and style-agnostic (5 landmarks, one `<h1>`, heading hierarchy in order). Changing the theme must require editing CSS only.

### 1.2 CSS Variables & Theme Tokens
- Store **all** visual tokens in `:root` and the dark-theme selectors. These tokens are **mandatory**: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token with a light text token — in both themes. Concrete values are fixed in §5.2; do not deviate.
- **Light background:** never pure white. The light page surface is `#e9ecf7`; if a near-white surface is ever needed, use `#fefefe`, never `#ffffff`.
- **Geometry, depth, motion, stacking tokens (mandatory):** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`. Define all of them even if unused, to prevent stacking conflicts.
- **No hard-coded colors, sizes, or durations in rules** — reference `var(--...)` everywhere.

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` (as the flash-free, no-JS fallback) **and** a `.dark` class on `<html>`. Keep both dark token blocks identical.
- JS must set an explicit class (`.dark` or `.light`) on `<html>` at boot: **localStorage first**, else `matchMedia` system preference, else Light. The class must win over the media query so stored preferences always apply.
- The theme switch must animate seamlessly (transition background/color tokens); set `color-scheme` correctly per theme.
- **Persistence + toggle:** user choice persists via `localStorage`; a visible toggle in the header shows the correct `aria-pressed` state and a descriptive `aria-label` (e.g., "Switch to dark theme").

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structure with **Flexbox** (`display: flex`). Every flex container defaults to `align-items: center` unless a documented exception exists (e.g., stretched pricing cards — justify it in a CSS comment).
- **Mobile-first:** multi-column rows collapse to columns below 768px; no fixed widths; **no horizontal scrolling at any viewport from 320px to 1920px**.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- Load **Google Fonts** via `<link>`: **"Fraunces"** for display headings (`--font-display`) and **"Inter"** for body/UI (`--font-base`). No other font sources.
- Icons: **Google Material Symbols (Rounded style)** via the standard stylesheet, using `<span class="material-symbols-rounded">icon_name</span>`.
- **Raw inline SVGs and local icon files are explicitly forbidden** — including for the mandala ornaments, glows, and avatars: generate every ornament with pure CSS gradients (§5.4). Verify each icon name exists in Material Symbols Rounded.

### 1.5 — *(folded into §0 framework exception: custom CSS, BEM naming, no utility-class mixing.)*

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--sm`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius; minimum touch target **44×44px**; font-weight 600; Google Icon where semantically meaningful (e.g., `arrow_forward` on CTAs).
- **Hover:** brightness/glow shift, `cursor: pointer` (gate hover styles behind `@media (hover: hover) and (pointer: fine)`).
- **Focus:** distinct `:focus-visible` ring built from tokens (2px outline + soft glow shadow).
- **Active/Pressed:** `transform: scale(0.97)` feedback.
- **Loading (`.is-loading`):** button is `disabled`, `aria-busy="true"`, `pointer-events: none`, double-clicks impossible; a CSS-only conic-gradient spinner appears absolutely centered via a pseudo-element **without changing button dimensions**; label dims to 0.35 opacity.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error (`.is-success`, `.is-error`):** temporary feedback states driven by `--text-success` / `--text-error` (border + icon + adjacent message — never color alone).

### 2.2 Card Component (`.card`, glass surface)
- **Default:** flexbox layout, glass styling per §5.3, 1px `--glass-border`, elevation from tokens.
- **Hover:** `transform: translateY(-2px)` plus intensified glow.
- **Focus-within:** card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** define a `.skeleton` shimmer keyframe utility in CSS (linear-gradient sweep) for reuse; it must not cause layout jumps.
- **Empty state:** not required (no async content on this page) — do not invent empty content.

### 2.3 Form & Input (Final CTA email capture)
- **Structure:** flex container wrapping a programmatically associated `<label>` (may be visually hidden), `<input type="email" autocomplete="email" required>`, and a dedicated error/success message container with `role="status"` / `aria-live="polite"`, linked via `aria-describedby`.
- **States in CSS:** empty, focus (token ring), filled, **valid** (`--border-success` + `check_circle` icon + message), **invalid** (`--border-error` + `error` icon + message: e.g., "Please enter a valid email address."), disabled. Never rely on color alone.
- JS validates on submit (`novalidate` on the form), simulates async (loading ~1.2s), then resolves to the success state ("You're on the list — check your inbox.") announced via the live region.

### 2.4 Modal / Popup — **Out of scope.** Do not add modals, overlays, hamburger menus, or carousels. On mobile, hide the middle nav links and keep logo + theme toggle + CTA visible.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography (H1 ≈ `clamp(2.6rem, 6vw, 4.5rem)`), no horizontal overflow, sticky header offset via `scroll-padding-top`.
- **Smooth animations:** every state change transitions with `var(--transition-normal) var(--ease-standard)`. **`prefers-reduced-motion: reduce` must disable all rotation, shimmer, transforms, and smooth scrolling** (instant opacity changes only).
- **Accessibility (a11y):** AA contrast in **both** modes — glass surfaces must keep ≥ 0.5 background alpha so text contrast holds. Skip link, semantic landmarks, logical focus order, full keyboard operability (native `<details>`/`<summary>` for FAQ, native buttons everywhere), `aria-live` for dynamic feedback, visible focus rings on every interactive element. `--secondary` may never be used for body text in Light mode (fails AA on `#e9ecf7`).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
- **Destructive actions:** none on this page; still define `.btn--danger` styling distinct in both themes for reuse.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js`. Exactly **one** `<script src="script.js" defer>` reference; **zero** inline `<script>` or `style` blocks. Standard `<link>` for `style.css`.
- **Naming convention:** BEM only (`.card`, `.card__title`, `.card--featured`, `.section__eyebrow`). Never mix conventions; no ad-hoc utility classes.
- **Copy:** write polished, real **English** copy in a serene, precise, poetic-minimal studio voice — **lorem ipsum is forbidden**. All user-facing text in English.
- **Assets:** zero `<img>` tags, zero external requests beyond Google Fonts + Material Symbols. Avatars are CSS initial circles; all imagery is CSS-generated.

---

## 5. MANDALA DESIGN LANGUAGE

### 5.1 Concept
Radial symmetry: concentric rings, centered compositions, circular glow badges, glass panels floating over an ambient aurora of blurred indigo/periwinkle orbs.

### 5.2 Token Map (author these exact values)

| Token | Light (default, `:root`) | Dark (`.dark` + media fallback) |
|---|---|---|
| `--primary` | `#1d2140` | `#c9cdea` |
| `--text-on-primary` | `#c9cdea` | `#141628` |
| `--secondary` | `#7f84ad` | `#7f84ad` |
| `--bg-primary` | `#e9ecf7` | `#0d0e1c` |
| `--bg-secondary` (glass) | `rgba(254,254,254,0.55)` | `rgba(20,22,40,0.55)` |
| `--text-primary` | `#171a2b` | `#c9cdea` |
| `--text-secondary` | `#4a4f78` | `#7f84ad` |
| `--text-success` | `#1e6f4f` | `#63d6a5` |
| `--text-error` | `#b3261e` | `#f28b82` |
| `--border-default` | `rgba(23,26,43,0.14)` | `rgba(201,205,234,0.16)` |
| `--border-success` / `--border-error` | `#1e6f4f` / `#b3261e` | `#63d6a5` / `#f28b82` |
| `--glass-border` | `rgba(127,132,173,0.35)` | `rgba(201,205,234,0.18)` |
| `--glow-primary` | `rgba(127,132,173,0.35)` | `rgba(201,205,234,0.16)` |
| `--bg-inverse` (footer) | `#171a2b` | `#141628` |
| `--focus-ring` | `#1d2140` | `#c9cdea` |

Extensions: `--radius-pill: 999px`, `--radius-sm/md/lg: 10/18/28px`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, `--spacing-gap: 1.5rem`, `--z-header: 30`, plus mandated `--z-dropdown/--z-modal/--z-toast`, theme-tuned `--shadow-sm/--shadow-md`, and a `--gradient-text` stop pair per theme. **No colors outside this palette and its rgba tints** (plus the semantic success/error hues above).

### 5.3 Glass / Glow / Blur Recipes
- **Glass:** `background: var(--bg-secondary);` + `backdrop-filter: blur(18px) saturate(140%);` (+ `-webkit-` prefix) + `border: 1px solid var(--glass-border)` + inset top highlight. Provide an `@supports not (backdrop-filter…)` fallback raising background alpha to 0.92.
- **Glow:** layered `box-shadow` rings using `--glow-primary` on badges, featured cards, and focus states.
- **CSS filters:** use `filter: brightness()/saturate()` for hover intensification — **never on ancestors of glass elements** (an ancestor `filter` breaks `backdrop-filter` sampling; blur the orb pseudo-elements themselves, behind the glass).

### 5.4 Radial Ornament & Background System
- A fixed, full-viewport background layer (pseudo-element, `z-index` behind content, hidden overflow) holding 3–4 blurred radial-gradient orbs (`filter: blur(80px+)`) in `#c9cdea`, `#7f84ad`, and `#1d2140` alphas per theme.
- A **mandala ring** ornament (hero + Final CTA): a circular element built purely from `repeating-conic-gradient` + `repeating-radial-gradient`, masked into a ring with a radial-gradient `mask`, rotating at 60–90s linear infinite (disabled under reduced motion), glowing softly.
- **Gradient headline:** H1/H2 use `background-clip: text` with `--gradient-text`, wrapped in `@supports` with a solid `--text-primary` fallback.

---

## 6. PAGE STRUCTURE & SECTION SPECIFICATIONS

Write real on-theme copy; suggested key copy may be refined within the voice rules.

**6.0 Shell & Header.** `<html lang="en">`, viewport meta, `<title>Mandala — Radial Symmetry Studio</title>` + meta description. Skip link → main. Sticky glass header (`.header`, `--z-header`): wordmark "Mandala" with `flare` icon in a glowing circular badge; anchor links (Features, Process, Testimonials, Pricing, FAQ); theme toggle (icons `dark_mode`/`light_mode`); small `.btn--primary` "Start a project" → `#cta`.

**6.1 Hero.** `min-height: 92svh`, centered flex column. Eyebrow: "The Radial Symmetry Studio". H1: "Design in perfect balance." Lede (1–2 sentences). Primary button "Start a project" + `.btn--ghost` "See how it works". Rotating mandala ring behind the headline; three glass stat chips ("120+ brands centered", "9 design awards", "98% retention").

**6.2 Features — 3 glass cards.** Section pattern: `.section__eyebrow`, `.section__title`, `.section__lede`. Cards: icon badge (`filter_center_focus`, `blur_on`, `auto_awesome`), titles "Radial Composition" / "Layered Translucency" / "Luminous Gradients", one-sentence descriptions, "Explore" link with `arrow_forward`. Full card state matrix (§2.2).

**6.3 How It Works — 3 steps.** Steps "01 Compose", "02 Layer", "03 Illuminate": glowing numbered circles, short descriptions, connected by a CSS dotted guide line (horizontal desktop → vertical mobile).

**6.4 Testimonials — 3 glass quote cards.** `format_quote` icon, quote copy, star row (`star`/`star_half`, with `aria-label` e.g., "Rated 5 out of 5"), CSS initials-avatar circles, fictional names + roles (e.g., "Iris Chen — Creative Director, Studio Lumen").

**6.5 Pricing — 3 tiers.** Glass cards "Sprout $290/mo", "Bloom $540/mo" (featured: `--card--featured`, glow ring, scale on desktop only, "Most loved" badge, primary button; others ghost buttons), "Radiance $1,180/mo". Feature lists with `check` icons; footnote line.

**6.6 FAQ — 5 items.** Native `<details>`/`<summary>` accordion; custom chevron (`expand_more`) rotating 180° on open; summary focus ring; marker removed; topics: timeline, revisions, deliverables/formats, licensing, changing tiers.

**6.7 Final CTA.** Large glass panel over an intensified radial glow burst; H2 "Ready to find your center?"; email capture per §2.3 with `.btn--primary` "Request an invite".

**6.8 Footer.** `--bg-inverse` surface with `--text-on-inverse` pairing: brand blurb ("Crafted in radial symmetry — every pixel in orbit."), three secondary link columns (Studio / Resources / Company), icon-only social links (`alternate_email`, `rss_feed`, `link`) with `aria-label`s, Privacy/Terms links, dynamic © year, back-to-top link (`arrow_upward`). Links get a hover underline transition.

---

## 7. ACCEPTANCE CHECKLIST (verify before delivering)

1. Zero `style=""`, zero inline `<script>`, zero inline SVGs, zero `<img>`, zero external requests beyond Google Fonts/Material Symbols.
2. All mandated tokens defined in Light **and** Dark; both dark blocks identical; toggle persists via localStorage with correct `aria-pressed`.
3. BEM naming only; no horizontal scroll from 320px–1920px; all touch targets ≥ 44px.
4. Buttons show all 7 states; cards show hover + focus-within; skeleton keyframes exist; form shows valid/invalid/success/loading with `aria-live` feedback.
5. `prefers-reduced-motion` honored; focus rings visible everywhere; AA contrast in both modes; one `<h1>`; FAQ keyboard-native.
6. Real English copy throughout — no lorem ipsum, no unrequested placeholders.