Modern Digital Azulejo demo
Modern Digital Azulejo

A geometric, modular design language that translates Brazilian modernist azulejo tilework into vibrant grid-based layouts with ceramic-inspired patterns and bold color blocks.
Category: Cultural & Heritage
Era: 2020s Modern (Brazilian Modernist Revival)
Prompt: 19.0 KB · 2652 words
# BUILD PROMPT — LANDING PAGE: "AZULEJARIA DIGITAL MODERNA" (MODERN DIGITAL AZULEJO ART)

**Your Role & Objective:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a **single response** — no partial builds, no follow-up questions. The page promotes a **collaborative digital art platform** inspired by Brazilian modernist azulejo (tilework). The entire page must behave like a wall of digital azulejos: content lives inside modular geometric tiles that rotate, combine, and "assemble" into place.

---

## 0. PROJECT BRIEF & THEME SPECIFICATION

**Theme Definition**
- **Name:** Azulejaria Digital Moderna (Modern Digital Azulejo Art)
- **Type:** Geometric, Modular, Dynamic, Artistic
- **Keywords:** digital art, collaborative, modular, geometric, dynamic, artistic, Brazilian modernism, azulejo, pattern, vibrant
- **Era:** 2026+ — Brazilian Art & Technology

**Visual Direction (binding):**
- Modular grid layouts inspired by azulejo tiles, with geometric elements that rotate and combine.
- Clean, modern sans-serif typography.
- Abstract, geometric iconography.
- Hover micro-interactions that change a tile's pattern or color.
- Section transitions with a module "assembly" effect (tiles rotate/slide into place).

**Required Sections (in page order):** Header/Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

**Copy & Language:** Write **all user-facing copy in English** — real, specific copy for a collaborative digital art platform (no lorem ipsum). Brand the platform with a short, evocative name (suggested: **"Tessela"**; substitute only with an equally fitting name).

**Palette → Token Mapping**

| Token | Light Mode | Dark Mode | Role |
|---|---|---|---|
| `--primary` | `#0047AB` (Cobalt Blue) | `#0047AB` for fills; `#5B9BFF` for text/interactive accents | Brand, buttons, links, focus rings |
| `--secondary` | `#FFD700` (Sun Yellow) | `#FFD700` | Accents, badges, highlights — **always pair yellow fills with black text** |
| `--accent-emerald` | `#2ECC40` (Emerald Green) | `#2ECC40` | Decorative success accents |
| `--accent-coral` | `#FF6F61` (Coral Red) | `#FF6F61` | Decorative error/danger accents |
| `--bg-primary` | `#fefefe` | `#0A1224` (deep cobalt-black) | Page background |
| `--bg-secondary` | `#F0F0F0` (Light Gray) | `#14213A` (elevated cobalt surface) | Section surfaces, cards, "grout" |
| `--text-primary` | `#000000` (Black) | `#F0F0F0` | Headings and body |
| `--text-secondary` | `#6C757D` (Medium Gray) | `#9FB0C7` | Supporting copy, captions |
| `--text-success` | `#1E8E3E` (AA-darkened emerald) | `#2ECC40` | Success text/feedback |
| `--text-error` | `#D14334` (AA-darkened coral) | `#FF8A7E` | Error text/feedback |
| `--border-default` | `#E0E0E0` | `#2A3A57` | Default 1px borders |
| `--border-success` / `--border-error` | Derived from success/error tokens | Same | Valid/invalid borders |

- **Exception clause (background):** The source specification lists `#FFFFFF` as the page background; per mandatory architecture standards, `--bg-primary` must be `#fefefe` — pure `#FFFFFF` is reserved **exclusively** for azulejo tile faces and elevated surfaces in light mode.
- **Exception clause (dark mode):** The source specification marked dark mode as not required; per mandatory architecture standards, full dark mode support is enforced and must be implemented exactly as defined in Section 1.3.
- In dark mode, invert the tile dialogue: deep cobalt tile faces with light geometric patterns, maintaining the cobalt-and-white visual language.

**Canonical Classes & Base Technical Values (from source spec — use verbatim):**
- `.azulejo-grid` — modular tile-grid container
- `.geometric-module` — individual tile/module unit
- `.pattern-rotate-hover` — hover interaction modifier (pattern/color change + rotation)
- Base values: `border: 1px solid #E0E0E0` (→ `--border-default`), `border-radius: 4px` (→ `--radius-sm`), `font-family: "Inter", sans-serif` (→ `--font-base`), `transition: all 0.3s ease-in-out` (→ `--transition-normal`)

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. JavaScript must not set inline styles either — all state changes happen by toggling classes.
- **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic; re-theming the site must require edits to `style.css` only.
- **Pure-CSS Decorations:** All azulejo patterns and geometric decorations must be built with CSS only (repeating/conic gradients, transforms, pseudo-elements). **Inline SVGs and local icon/image files are forbidden.**

### 1.2 CSS Variables & Theme Tokens
- Store every visual token in `:root` (light) and override under the dark theme (see 1.3): all colors from the Section 0 table, plus:
- **Radius:** `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px`
- **Shadows:** `--shadow-sm: 0 1px 3px rgba(0,0,0,0.08)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)`
- **Spacing:** `--spacing-gap: 1.5rem`, `--spacing-section: clamp(4rem, 8vw, 7rem)`
- **Transitions:** `--transition-fast: all 0.15s ease-in-out`, `--transition-normal: all 0.3s ease-in-out`, `--ease-standard: ease-in-out`
- **Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000` (plus `--z-header: 900` for the sticky header)
- **Typography:** `--font-base: 'Inter', sans-serif`
- **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in **both** themes. Verify all text combinations meet WCAG AA (≥ 4.5:1); darken/brighten accent-derived text tokens further if any pair fails.

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`, so switching requires zero HTML restructuring.
- **Persistence:** On first visit, follow `prefers-color-scheme`; once the user toggles, persist the choice in `localStorage` (key: `tessela-theme`) and apply it before paint to avoid flash-of-wrong-theme.
- **Toggle Control:** A visible toggle button in the header using Google Material Symbols (`dark_mode` / `light_mode`), with correct `aria-pressed` state and dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build layout structures with **Flexbox**. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `.card` uses `align-items: stretch` for equal-height tiles).
- **CSS Grid is permitted only** for `.azulejo-grid` decorative tile walls and equal-height card rows — everywhere else, use Flexbox.
- **Mobile-First:** All layouts work at 320px without horizontal scrolling; multi-column rows stack into single columns on small viewports; use fluid `clamp()` sizing and `max-width` containers (~1200px).

### 1.5 Styling Engine & Reusable Classes
- Use clean, hand-authored, token-driven CSS in `style.css`, organized with `@layer` (tokens → base → layout → components → utilities). Tailwind (CDN) may be used **only** for flex/grid/spacing utilities, and every utility used must trace back to a design token.
- Provide generic reusable classes: `.btn`, `.card`, `.input-group` — all mapped to CSS variables.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Load **Inter** (weights 400, 500, 600, 700, 800) via Google Fonts `<link>` with `preconnect`; bind to `--font-base`.
- **Icons:** Use **Google Material Symbols (Rounded)** via the official `<link>`; use `font-variation-settings: 'FILL' 1` for filled feature icons. **Raw inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-sm)`, font-weight 600. Primary = cobalt fill + white text; Secondary = white tile face + cobalt border/text; Ghost = transparent + border.
- **Hover:** Brightness shift + `--shadow-md`, `cursor: pointer`.
- **Focus:** Distinct 2px focus ring in `var(--primary)` (brightened cobalt in dark mode) with 2px offset — visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** Disables interaction and prevents double-clicks (`pointer-events: none`, `aria-busy="true"`), renders a spinning Material Symbol `progress` (CSS rotation) **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** Temporary feedback states driven by `--text-success` / `--text-error`, announced via `aria-live`.

### 2.2 Cards & Geometric Modules (`.card`, `.geometric-module`)
- **Default:** Flexible Flexbox column layout, `--bg-secondary` or white tile face, `1px solid var(--border-default)`, `--radius-sm`, `--shadow-sm`.
- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + the `.pattern-rotate-hover` effect (tile pattern rotates and cobalt/white colors invert).
- **Focus-within:** Card border highlights in `--primary` when a child link/button receives focus.
- **Loading (Skeleton):** Define a `.card--skeleton` shimmer animation in CSS (gradient sweep keyframes) as part of the design system.
- **Empty State:** Define a reusable `.empty-state` pattern — Material Symbol icon in a geometric tile + clear guidance text.

### 2.3 Forms & Inputs (`.input-group`, `.input`, `.input-label`, `.input-error`)
- **States:** Empty, Focused (cobalt outline ring), Filled, Valid (emerald border + check icon), Invalid (coral border, error text, error icon), Disabled, Read-only. State icons render via Material Symbols in CSS pseudo-elements to keep HTML clean.
- **Structure:** Flex column wrapper containing: `<label>` (with `for`/`id` pairing), the input field, and a dedicated error feedback container with `aria-live="polite"`.
- Used in the Final CTA email capture and the FAQ contact modal.

### 2.4 Modal / Contact Dialog (`.modal`, `.modal__overlay`, `.modal__dialog`)
- **States:** Opening (fade + scale-in), Open, Loading (submit), Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** Centered flex overlay (`align-items: center; justify-content: center`), backdrop `rgba(10,18,36,0.6)` with optional blur, Material Symbol `close` button (44px target), keyboard **focus trapping**, focus returned to the trigger on close, close via `Esc` and overlay click, `role="dialog"`, `aria-modal="true"`, `aria-labelledby`.
- **Concrete use:** The FAQ section's "Talk to the Team" button opens a contact modal (name, email, message) with full validation (2.3), a loading state, and an in-modal success state.

---

## 3. CORE UX & MICRO-INTERACTION RULES

### 3.1 Responsive by Default
Fluid type via `clamp()`, mobile-first breakpoints (base → 768px → 1024px → 1280px), zero horizontal overflow at any width.

### 3.2 Smooth Animations & Reduced Motion
Apply `transition: var(--transition-normal)` to all state changes. Under `prefers-reduced-motion: reduce`, disable all rotations, assembly animations, spins, and smooth scrolling — states must still change visibly and instantly.

### 3.3 Signature Azulejo Micro-Interactions (theme identity — mandatory)
- **`.pattern-rotate-hover`:** On hover, a `.geometric-module` rotates (90° or a subtle 8°) and its pattern/color shifts (cobalt↔white inversion or gradient reposition) over `0.3s ease-in-out`.
- **Continuous rotation:** Selected decorative tiles slowly rotate via CSS keyframes (20–40s linear infinite), paused under reduced motion.
- **Module "assembly" transitions:** Gate all entrance animations behind an `html.js` class (content is fully visible without JS). Use `IntersectionObserver` to add `.is-assembled` to sections at ~20% visibility; tiles/cards enter from `opacity: 0; translateY(24px); rotate(-6deg)` and settle into place. Stagger delays via CSS `nth-child` rules — never via JS inline styles.
- **Section dividers:** Thin azulejo pattern strips (repeating gradients) between sections reinforce the "tile wall" metaphor.

### 3.4 Accessibility (a11y)
- WCAG AA contrast in **both** modes; never rely on color alone — pair every state with an icon and/or text.
- Semantic HTML5 landmarks (`header`, `nav`, `main`, `footer`, `section` with `aria-labelledby`), a skip link, exactly one `<h1>` (Hero), logical DOM/focus order.
- Correct ARIA on all custom widgets: theme toggle, mobile nav, accordion, modal, toasts. Full keyboard operability — no mouse-only interactions.
- `aria-live` regions for form errors, toasts, and loading feedback. All decorative layers marked `aria-hidden="true"`.

### 3.5 Mandatory Visual Feedback
Every click, hover, focus, and submission triggers a visible state change.

### 3.6 Destructive & Distinct Actions
`.btn--danger` uses coral-derived styling and must be clearly distinct in both light and dark themes.

---

## 4. PAGE STRUCTURE — SECTION-BY-SECTION REQUIREMENTS

### 4.1 Header & Navigation
Sticky header with border-bottom. Brand mark = CSS-built geometric tile (rotates on hover) + wordmark. Nav anchors (Features, How It Works, Pricing, FAQ) with CSS smooth scrolling. Theme toggle (1.3). Primary CTA "Start Creating". Mobile: Material Symbol `menu` hamburger opens a dropdown panel (`--z-dropdown`) with `aria-expanded`/`aria-controls`, closing on `Esc` and link click.

### 4.2 Hero
Two-column layout (stacks on mobile). Left: eyebrow line, `<h1>` (e.g., "Paint the future, one tile at a time."), subheadline about real-time collaborative tile art, dual CTAs (`.btn--primary` "Start Creating Free" + `.btn--ghost` "Explore the Gallery"), and a social-proof line (e.g., "12,000+ artists building together"). Right/backdrop: an `aria-hidden` `.azulejo-grid` wall of 12–24 `.geometric-module` tiles with CSS-built cobalt/white/emerald/coral patterns — several slowly rotating, all hover-interactive via `.pattern-rotate-hover`. Tiles assemble with a staggered entrance on load.

### 4.3 Features — 3 Cards
Section heading + subheading, then three equal-height `.card` tiles: **Collaborative Canvas** (real-time co-creation on shared tile walls; icon `group`), **Modular Pattern Library** (remixable azulejo modules; icon `auto_awesome_mosaic`), **Live Exhibitions** (publish works as gallery/AR shows; icon `view_in_ar`). Each card: icon in a geometric tile badge, title, 2–3 line description, hover lift + `.pattern-rotate-hover`. Responsive 3→1 columns. (If a suggested symbol name is unavailable, use the nearest Material Symbols equivalent.)

### 4.4 How It Works — 3 Steps
Three numbered geometric tiles connected by a dashed/pattern connector line: **1. Assemble your modules** (`extension`), **2. Create together in real time** (`sync`), **3. Publish to the gallery** (`publish`). Each step: rotating number tile, title, description. Steps assemble sequentially on scroll; connector adapts to a vertical stack on mobile.

### 4.5 Testimonials
Three quote cards: artist quote, CSS-built geometric avatar tile with initials (no external images), name, and role (e.g., "Digital Artist, São Paulo"). Decorative Sun Yellow `star` icons (`aria-hidden`). Hover lift + pattern shift.

### 4.6 Pricing — 3 Tiers
**Aprendiz (Free — $0):** 3 tile walls, community patterns, basic exports. **Artista (featured middle — $12/mo):** badge "Most Popular", cobalt ring, unlimited walls, real-time co-op, HD/AR exports, priority support. **Ateliê ($39/mo):** team workspaces, brand kits, API access, dedicated manager. Feature lists use emerald `check_circle` icons; each tier has a CTA button (featured tier = `.btn--primary`; others = `.btn--secondary`). Featured tier must be visually distinct in both themes. Optional enhancement: an accessible monthly/annual toggle (`role="switch"`, `aria-checked`, visible price-update feedback).

### 4.7 FAQ — Accordion
Five to six real questions (e.g., "What is a tile wall?", "Can I collaborate in real time?", "Do I own my creations?", "Can I export my work?", "Is there a free plan?", "Which devices are supported?"). Implement as button + panel pairs with `aria-expanded`/`aria-controls`, animated expand/collapse via CSS, full keyboard operability. End the section with "Still have questions?" and a "Talk to the Team" button that opens the contact modal (2.4).

### 4.8 Final CTA
Full-bleed cobalt band with a subtle CSS azulejo pattern overlay (low-contrast, decorative). White headline (e.g., "Your wall is waiting."), short supporting line, and an email capture form (`.input-group`: email input + `.btn--primary` "Claim Your Wall") exercising all 2.3 states, with button loading state on submit and a success toast (4.10). Include consent microcopy. The band remains cobalt in dark mode with adjusted pattern opacity.

### 4.9 Footer with Secondary Links
Four-column footer: brand block (tile logo, one-line mission, social presence as **labeled tile links** — e.g., "Instagram", "Behance", "YouTube" — since brand logos are not available as Material Symbols), plus link groups: **Platform** (Features, Pricing, Gallery, Updates), **Resources** (Help Center, Pattern Library, Community Guidelines, Blog), **Company/Legal** (About, Contact, Privacy Policy, Terms of Service). Bottom bar: "© 2026 [Brand]. All rights reserved." plus a flavor line (e.g., "Made with azulejos in São Paulo"). Links to in-page targets use real section anchors; links to out-of-scope pages may use `href="#"` as their targets are genuinely unspecified.

### 4.10 Toast System
Fixed toast component (`--z-toast`, bottom-right; bottom-center on mobile) with `role="status"` and `aria-live="polite"`, success/error variants, auto-dismiss after ~5s, visible close button. Used for form submission feedback.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** Three separate files — `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` entry point; **no inline `<script>` blocks, no inline styles, no inline SVGs**. Google Fonts (Inter) and Material Symbols loaded via `<link>` in `<head>`.
- **Naming Convention:** BEM throughout (`.btn--primary`, `.modal__overlay`, `.card--skeleton`), with the three canonical design-system classes `.azulejo-grid`, `.geometric-module`, `.pattern-rotate-hover` preserved verbatim. Never mix conventions.
- **JavaScript Scope:** Theme toggle + persistence, mobile nav, accordion, modal (focus trap, `Esc`, overlay close), form validation, IntersectionObserver assembly animations (behind the `html.js` gate), and a toast helper. No other behavioral scripts.
- **Copy:** Real English copy everywhere; placeholders only where content was genuinely left unspecified (Section 4.9 legal link targets).
- **Quality Bar:** No horizontal scroll at 320px; end-to-end keyboard navigability; WCAG AA in both themes; semantic, landmark-complete HTML; no console errors; CSS organized in commented `@layer` blocks.
- **Output:** Generate the complete, final code for all three files in this single response — first attempt, production-ready.