Zellige — The Mosaic Maker demo
Zellige — The Mosaic Maker

An artistic style inspired by traditional Moroccan zellige tilework, featuring intricate geometric mosaic patterns, rich earthy colors, and ornamental craftsmanship arranged through modern CSS grid layouts.
Category: Cultural & Heritage
Era: Traditional Heritage
Prompt: 16.0 KB · 2151 words
# BUILD PROMPT — "ZELLIGE — The Mosaic Maker" Complete Landing Page

**Role Directive:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page defined below in your **first attempt**. This specification is exhaustive and non-negotiable — where your habits conflict with this document, this document wins. Do not add unrequested components; do not omit any state, token, or section defined here.

---

## 1. Project Mission & Art Direction

**1.1 Product Narrative.** ZELLIGE is a contemporary browser-based design studio for mosaic art, inspired by Moroccan zellige tilework: users sketch on a tile grid, mirror strokes into kaleidoscopic mandala symmetries, pick glazes from a curated library, preview patterns on real surfaces, and export production-ready cut maps. The landing page sells this product. All user-facing copy must be concrete, on-theme, and written in **English** — lorem ipsum is forbidden because every section's content is specified in Section 5.

**1.2 Visual Identity.** Era: 2020s Contemporary, Artistic/Creative. Keywords: tiled, mosaic, mandala, glass, translucent, gradient, blur, grid-layout. The page must read as a sunlit wall of glazed ceramic: warm parchment surfaces, deep espresso ink, soft embossed (neumorphic) relief, and translucent glass panels floating above kaleidoscopic tile fields.

**1.3 Signature Techniques — all pure CSS, no image assets:**
- **Mosaic fields:** low-opacity decorative background layers built from `repeating-linear-gradient` and `repeating-conic-gradient` forming diamond and eight-point-star tessellations; structured tile strips use CSS Grid with `aspect-ratio: 1` cells.
- **Mandala medallion:** a large ornament behind the hero composed of layered `radial-gradient` + `repeating-conic-gradient` rings, softened with `filter: blur()`. It must sit strictly behind text via z-index layering and never reduce text contrast.
- **Glass panels:** every card is a glazed tile — translucent `rgba` fill + `backdrop-filter: blur(12px) saturate(1.15)`, 1px token border, `--radius-lg`. Provide `-webkit-backdrop-filter` and an opaque `@supports not (backdrop-filter: blur(1px))` fallback.
- **Neumorphism:** dual box-shadows on cream surfaces (one warm-dark, one near-white) create raised/pressed clay relief on buttons, icon tiles, and step numbers.
- **CSS Filters:** hover states apply subtle `saturate()`/`brightness()` shifts; decorative layers use blur. Nothing may harm text legibility.
- **Mandatory technique checklist:** CSS Grid, Flexbox, backdrop-filter, CSS filters, transitions, transforms, gradients, box-shadows, border-radius, and aspect-ratio must all appear in the final stylesheet.

**1.4 Performance Guardrail.** Limit `backdrop-filter` to the header, cards, and CTA panel; decorative fixed backgrounds must include a mobile-safe fallback (no scroll jank).

---

## 2. Strict Architecture Rules

**2.1 CSS-First, Zero Inline CSS.**
- All styling lives in `style.css`. The `style="…"` attribute is **forbidden anywhere** in the HTML. No `<style>` blocks in markup.
- Target everything via class selectors (BEM); IDs only for JS hooks and the skip link.
- HTML stays semantic and structure-only (`header`, `nav`, `main`, `section`, `footer`; one `h1`; logical heading hierarchy). Changing the theme must never require touching markup.

**2.2 Design Tokens — all in `:root`, exact Light values:**
- Colors: `--primary: #241a12`, `--secondary: #a08c6e`, `--accent: #cbb994`, `--on-primary: #f2e6d0`, `--bg-primary: #f2e6d0`, `--bg-secondary: #e8dcc8`, `--bg-glass: rgba(232,220,200,0.55)`, `--text-primary: #241a12`, `--text-secondary: #8a795f`, `--text-success: #2e6b4f`, `--text-error: #96382a`, `--border-default: rgba(36,26,18,0.14)`, `--border-success: rgba(46,107,79,0.5)`, `--border-error: rgba(150,56,42,0.5)`.
- Geometry & motion: `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 24px`, `--shadow-sm` and `--shadow-md` (neumorphic dual-component: warm-dark + near-white, e.g. dark `rgba(36,26,18,0.10)` paired with light `rgba(255,255,255,0.65)`), `--spacing-gap: clamp(1.25rem, 3vw, 2rem)`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
- Stacking: `--z-header: 90`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.
- Fonts: `--font-display: 'Fraunces', serif`, `--font-base: 'Inter', sans-serif`.
- **No raw color hex values may appear outside `:root` and the theme blocks.** Additional tokens are permitted if they follow this naming system.

**2.3 Contrast Pairing & Background Rules.** Light backgrounds pair only with dark text; dark backgrounds pair only with light text — enforce this pairing across the default theme, dark theme, buttons, badges, and every feedback state. Light mode backgrounds must be the warm parchment family; pure `#ffffff` is **forbidden** — if a near-white is unavoidable, use `#fefefe`. Verify all text meets ≥4.5:1 against its actual surface.

**2.4 Mandatory Dark Mode.** The brief marks Light as the primary mood; **nevertheless, dark mode must ship fully** (this clause overrides the Light-only notation). Implement a token swap under both a `.dark` class on `<html>` and `@media (prefers-color-scheme: dark)`, with `localStorage` persistence and `prefers-color-scheme` fallback on first visit. Dark values: `--bg-primary: #221810`, `--bg-secondary: #2e2216`, `--bg-glass: rgba(46,34,22,0.55)`, `--primary: #e8dcc8`, `--on-primary: #241a12`, `--text-primary: #f2e6d0`, `--text-secondary: #cbb994`, `--text-success: #7fb89a`, `--text-error: #e08a7a`, `--border-default: rgba(242,230,208,0.16)`; shadows switch to deep black paired with a faint warm glow; mosaic/gradient layers re-tinted for legibility. A **visible toggle** (Material Symbols `light_mode`/`dark_mode`) sits in the header, exposes correct `aria-pressed` state, updates its `aria-label` dynamically, and persists the user's choice.

**2.5 Layout — Flexbox + Grid, Mobile-First.**
- Every flex container **defaults to `align-items: center`**; any exception (e.g., stretch for equal-height pricing cards) requires a one-line CSS comment justification.
- Multi-column sections (Features, Steps, Testimonials, Pricing) use CSS Grid: 3 columns ≥1024px, collapsing to 1 column below 768px. No horizontal scrolling at any viewport down to 320px.
- Fluid typography and spacing via `clamp()`; all touch targets ≥44×44px.

**2.6 Styling Approach & Naming.** Build with clean custom CSS — no framework is required for this theme because its signature effects are bespoke; if you use any utilities, each must map back to the tokens. Use **one naming convention only: BEM** (`block__element--modifier`) across all files, never mixed. Reusable primitives must exist as `.btn`, `.card`, `.section`, `.container`, `.input-group`.

**2.7 Typography & Icons.**
- Google Fonts loaded via `<link>`: **Fraunces** for headings, **Inter** for body — no other font sources.
- Icons: Google **Material Symbols (Rounded)** exclusively, loaded once. Decorative icons get `aria-hidden="true"`; icon-only controls get `aria-label`. **Raw inline `<svg>`, emoji-as-icons, and local icon files are forbidden.**

---

## 3. Component Design Specifications — every state styled as a class

**3.1 Buttons.** `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px, `--radius-md`, transitions via `--transition-fast`. Variants: `.btn--primary` (`--primary` bg + `--on-primary` text), `.btn--ghost` (transparent, `--primary` border), `.btn--glass` (translucent + blur for overlay bands), `.btn--danger` (if any destructive action appears — distinct in both themes via `--text-error`/`--border-error`).
- **Hover:** brightness/shadow shift, `cursor: pointer`.
- **Focus:** `:focus-visible` ring built from tokens (`outline` + `outline-offset`), visible in both themes, never removed.
- **Active:** `transform: scale(0.97)` plus an inset neumorphic press shadow.
- **Loading (`.is-loading`):** blocks pointer events (prevents double submission), swaps the label for a CSS-only animated `conic-gradient` spinner disc (on-theme mosaic spinner), and **must not change the button's dimensions**.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback via `--border-success`/`--border-error`, `--text-success`/`--text-error`, plus a Material check/error icon with visually-hidden status text.

**3.2 Cards (glass tiles).** `.card`: glass surface per §1.3, `--bg-secondary` opaque fallback, 1px `--border-default`, `--radius-lg`, `--shadow-sm`.
- **Hover (interactive cards only):** `translateY(-2px)`, `--shadow-md`, backdrop `saturate()` increase.
- **Focus-within:** border brightens to `--accent` when any child control receives focus.
- **Skeleton:** `.card--skeleton` shimmer (translucent gradient sweep, fixed `min-height` to prevent layout shift) — define it in the design system.
- **Empty state:** `.empty-state` pattern (Material Symbol in a raised neumorphic tile + one-line guidance text) — define it in the design system even if the static page never triggers it.

**3.3 Forms & Inputs.** The newsletter capture in the Final CTA uses `.input-group`: flex column wrapping `<label>`, `<input type="email">`, and a dedicated error container with `aria-live="polite"`.
- States as classes: empty, focus (accent ring), filled, valid (`--border-success` + check icon + success text), invalid (`--border-error`, `--text-error` message, error icon), disabled, read-only.
- Validation logic lives in `script.js` and toggles classes/text — never inline styles. Errors are communicated with text, never color alone.

**3.4 FAQ Accordion.** Each item: `<button aria-expanded aria-controls>` heading + panel. Panel animates via `grid-template-rows: 0fr → 1fr` (or equivalent) with `--transition-normal`; a Material chevron rotates 180°; state is signaled by icon + border + panel visibility, not color alone; fully keyboard operable.

**3.5 Header & Mobile Nav.** Sticky glass header at `--z-header` (translucent + backdrop blur) — required chrome hosting the mandated theme toggle and anchor navigation. Contains: "ZELLIGE" wordmark, anchor links (Features, Process, Pricing, FAQ), theme toggle (§2.4), primary CTA. Below 768px the nav collapses behind a hamburger `button[aria-expanded]` controlling a dropdown panel at `--z-dropdown`; links close it on activation; `Esc` closes it; focus order is logical.

**3.6 Modal (conditional).** The brief requires no modal; add one **only if** you include an overlay flow (e.g., a "Watch the studio" demo). Any modal must have: centered flex container (`align-items: center`), token-based dimmed backdrop, Material `close` icon button, focus trap, `Esc` + overlay-click close, and opening/open/loading/closing states animated with `--transition-normal` at `--z-modal`.

---

## 4. Core UX & Micro-Interaction Rules

**4.1 Responsive by Default.** Fluid `clamp()` type scale, grid→stack breakpoints, zero horizontal overflow, verified down to 320px.

**4.2 Motion.** All state changes transition with `var(--transition-normal)`; hover transforms ≤4px. Inside `@media (prefers-reduced-motion: reduce)`, remove transforms, spinners, and shimmer; keep instant opacity state changes only.

**4.3 Accessibility.** ≥4.5:1 body-text contrast in **both** themes; never rely on color alone for any state; semantic HTML5 landmarks + skip-to-content link; correct ARIA roles/labels on all custom widgets (accordion, nav toggle, theme toggle); logical DOM/focus order; full keyboard operability — nothing mouse-only; `aria-live` regions for form feedback and dynamic confirmations; star ratings include visually-hidden text (e.g., "Rated 5 out of 5").

**4.4 Mandatory Visual Feedback.** Every hover, click, focus, and submission produces a visible state change.

**4.5 Neumorphism Guardrail.** Embossed shadows must never be the sole signal of a component's state or affordance — always pair with borders, icons, or text.

---

## 5. Section Blueprint (build all, in order, with real English copy)

**5.1 Header.** Per §3.5.

**5.2 Hero.** Full-viewport section: blurred mandala medallion (§1.3) behind content; Fraunces `h1` headline + one-sentence value proposition; CTAs: `.btn--primary` "Start tiling" → `#pricing`, `.btn--ghost` "See how it works" → `#process`; a CSS-Grid strip of four mini stat tiles (`aspect-ratio: 1`, neumorphic): "200+ glazes", "8-fold symmetry", "1,200+ makers", "SVG cut maps"; a subtle scroll cue.

**5.3 Features — 3 Cards.** `#features`, grid 3→1. Each `.card` glass tile: Material Symbol in a raised neumorphic square (`aspect-ratio: 1`), `h3`, concrete copy. Features: **Symmetry Engine** (one stroke mirrors into radial and grid tessellations), **Glaze Library** (glossy, matte, translucent swatches + custom colorways), **Surface Studio** (preview patterns on walls, floors, and pools with adjustable light). Add staggered decorative star/diamond ornaments between cards via `::before`/`::after` gradients.

**5.4 How It Works — 3 Steps.** `#process`, grid 3→1, connected by a gradient pseudo-element line that hides on mobile. Steps: **01 Sketch a tile** (draw directly on the grid), **02 Tessellate & mirror** (the symmetry engine expands the motif), **03 Fire & export** (cut maps, material lists, hi-res SVG/PNG). Numbers sit in neumorphic tiles with `aspect-ratio: 1`.

**5.5 Testimonials.** `#testimonials`, grid 3→1 of glass quote cards: monogram avatar tile (styled initials — no photos, no placeholders), specific quote, name + role, five Material `star` symbols with visually-hidden rating text. Write three credible quotes: a mosaic artist, an interior designer, a tile workshop owner.

**5.6 Pricing — 3 Tiers.** `#pricing`, grid 3→1. **Apprentice** (Free — 3 projects, core glazes, PNG export), **Artisan** ($12/mo — unlimited projects, full glaze library, SVG + cut maps, surface previews), **Atelier** ($29/mo — team seats, brand colorways, API access, priority rendering). Middle tier featured: `--shadow-md`, `--accent` border, "Most chosen" badge, slight desktop elevation. Each tier: price block, Material `check` feature list, and a CTA implementing every button state in §3.1.

**5.7 FAQ.** `#faq`, five to six accordion items per §3.4, each answered in 2–3 sentences: skill level needed, export formats, commercial licensing, real-material compatibility (tile sizes / cut guides), collaboration, refunds.

**5.8 Final CTA.** Full-width band with a low-opacity `repeating-conic-gradient` mosaic backdrop, blurred edges; centered glass panel: `h2`, one-line pitch, and the email-capture `.input-group` (§3.3) with a submit button. On submit: enter `.is-loading` for ~700ms of simulated processing, then flip to `.is-success` with a confirmation message in an `aria-live` region — no page reload.

**5.9 Footer.** Four columns desktop → stacked mobile: brand blurb + wordmark; **Product** (anchors: Features, Process, Pricing, FAQ); **Studio** (Gallery, Glazes, Journal, Workshops — plausible relative paths); **Legal** (Privacy, Terms, Licenses). Social icon row using Material Symbols with per-link `aria-label`. Copyright line with the year injected by `script.js`. All secondary links present and consistently styled.

---

## 6. Deliverables & Quality Gates

- **Files:** `index.html`, `style.css`, `script.js` — three separate, complete files, runnable by opening `index.html`.
- **Script:** loaded once via `<script src="script.js" defer></script>` — the only script tag; no inline `<script>` blocks. `script.js` handles: theme toggle + persistence, FAQ accordion, mobile nav, email validation + loading/success feedback, dynamic footer year, and any reveal-on-scroll (respecting reduced motion).
- **Zero inline styling:** no `style="…"` attributes, no `<style>` blocks, no inline SVGs.
- **Naming:** BEM exclusively, one convention across all files.
- **No unrequested placeholders:** every heading, label, link, quote, price, and FAQ answer specified above must be written out concretely in English; placeholders are permitted only where content is genuinely unspecified (nowhere in this brief).
- **First attempt, complete:** deliver all nine build areas, every component state, and both themes in a single response — no partial output, no "rest follows" cutoffs.