Portuguese Azulejo demo
Portuguese Azulejo

A landing page style inspired by traditional Portuguese azulejo ceramic tiles, featuring blue-and-white ornamental patterns and geometric motifs with a modern template structure.
Category: Cultural & Heritage
Era: 2020s Heritage Revival
Prompt: 13.6 KB · 1822 words
# SYSTEM PROMPT — BUILD THE "AZULEJO PORTUGUÊS" LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt. Follow every rule in this specification exactly. Where a rule conflicts with your default habits, the rule wins.

---

## 0. PROJECT BRIEF

* **Theme:** Azulejo Português — Traditional, Ornamental, Mediterranean; 16th–18th century Portuguese heritage aesthetic.
* **Output Category:** Cultural & Heritage.
* **Sections (in this exact order):** Sticky Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
* **Aesthetic Direction:** Cobalt blue and tile white as the dominant pairing; repeating azulejo tile patterns; hand-painted-style blue illustrations; ornamental dividers; ceramic texture overlays; intricate geometric borders; shadow depth on tiles; delicate scroll motifs; warm Mediterranean gradients.
* **Copy Locale:** Write ALL user-facing copy in **English** (e.g., a Lisbon-based azulejo atelier offering heritage tile-painting experiences). Write real, polished, culturally grounded copy — no lorem ipsum.

---

## 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 must be applied via class or ID selectors defined in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic. Changing the site's look must only require editing the CSS file.

### 1.2 CSS Variables & Theme Tokens

Store all visual tokens in `:root` (and the dark theme class) as CSS variables:

* **Colors (map the Azulejo palette exactly):**
  * `--primary: #003399` (Cobalt Blue)
  * `--secondary: #C9A84C` (Warm Gold)
  * `--bg-primary: #F5F5F0` (Tile White)
  * `--bg-secondary: #FFFFF0` (Cream)
  * `--text-primary: #1A1A4E` (Deep Navy)
  * `--text-secondary: #003399` (Cobalt, for subheadings/accents)
  * `--text-success: #556B2F` (Olive Green)
  * `--text-error: #B7472A` (Terracotta)
  * `--border-default: #003399`
  * `--border-error: #B7472A`
  * `--border-success: #556B2F`
  * Supplementary accents: `--accent-terracotta: #B7472A`, `--accent-sun: #F4D03F`, `--accent-olive: #556B2F`, `--accent-navy: #1A1A4E`
* **Contrast Pairing:** Light backgrounds (`#F5F5F0`, `#FFFFF0`) must always pair with dark text (`#1A1A4E`, `#003399`); dark backgrounds (`#1A1A4E` and darker navy) must always pair with light text (`#F5F5F0`, `#C9A84C`). Enforce this pairing in **every** theme, not just the default.
* **Light Mode Background:** Default to Tile White `#F5F5F0` — never pure white. If a near-white is required, use `#fefefe`, not `#ffffff`.
* **Border Radius & Shadows:** `--radius-sm: 4px`, `--radius-md: 8px`, `--radius-lg: 16px`, `--shadow-sm: 0 2px 8px rgba(0,51,153,0.10)`, `--shadow-md: 0 4px 16px rgba(0,51,153,0.15)` (the signature "tile depth" shadow).
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation/Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.
* **Typography Tokens:** `--font-display: 'Playfair Display', Georgia, serif` (headings), `--font-base: 'Lora', Georgia, serif` (body).
* **Signature Style Tokens:** `--border-ornamental: 3px double var(--primary)`, `--tile-pattern-size: 120px`.

### 1.3 Mandatory Dark Mode Support

* **Implementation:** Define dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #1A1A4E` (Deep Navy), `--bg-secondary: #12123A` (darker navy), `--text-primary: #F5F5F0`, `--text-secondary: #C9A84C`. Lighten `--primary` to approximately `#4D7AFF` and `--text-error` to approximately `#D96A4E` in dark mode to preserve WCAG AA contrast while keeping hue identity.
* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.
* **Persistence:** Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle in the header with correct `aria-pressed` and `aria-label` states.
* **Exception Clause:** The source theme specification lists dark mode as unsupported ("✗ No"); per mandatory architecture it must still be fully implemented — the light azulejo aesthetic is the default presentation, and dark mode translates the palette to Deep Navy grounds with Tile White text and Warm Gold ornamentation.

### 1.4 Flexbox Layout & Mobile-First Alignment

* **Flexbox Only:** Build all layout structures with `display: flex` (or Tailwind flex utilities).
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified. The only permitted exception: form `.input-group` containers may use `align-items: stretch` to stack label, input, and error message — document this exception with a CSS comment.
* **Mobile-Friendly First:** Convert rows to columns at small breakpoints; prevent horizontal scrolling at every width down to 320px.

### 1.5 Framework Default & Tailwind CSS Integration

* Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`) unless otherwise needed. All utilities must map back to the CSS variables above.
* **Reusable Component Classes:** Define `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`, `.btn-gold`, `.card`, `.tile-panel`, `.ornamental-divider`, `.step`, `.pricing-tier`, `.faq-item`, `.input-group`, `.nav`, `.footer` — no one-off styling.

### 1.6 Typography & Icons (Google Fonts Mandatory)

* **Text:** Load **Playfair Display** (600/700/800, headings) and **Lora** (400/500/600, body) via Google Fonts `<link>` tags; bind them to `--font-display` and `--font-base`.
* **Icons:** Use Google Material Symbols (Rounded style) for every UI icon. Raw inline SVGs, local icon files, and emoji icons are forbidden.
* **Exception Clause:** Decorative azulejo tile patterns and scroll motifs are background textures, not icons — they may be authored as SVG **data-URIs referenced only from CSS `background-image`** (never as inline `<svg>` elements in the HTML) or constructed from pure CSS gradients. The spec's `url('azulejo-pattern.svg')` must be inlined as a data-URI inside `style.css`, since no external asset files are permitted.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements

* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--radius-md` corners.
* **Variants:** `.btn-primary` (cobalt background, tile-white text), `.btn-secondary` (transparent background, `3px double` cobalt border, navy text, gold hover accent), `.btn-gold` (warm gold background, deep navy text — for the featured pricing CTA), `.btn-danger` (terracotta background, white text — visually distinct in both themes).
* **Hover:** `filter: brightness(1.08)` plus `--shadow-md`; `cursor: pointer`.
* **Focus:** Distinct keyboard ring — `outline: 3px solid var(--secondary); outline-offset: 2px` — visible on both light and dark themes.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** Disables interaction, prevents double-clicks, and renders a CSS-animated spinner (rotating Material Symbol or border spinner) without changing button dimensions; set `aria-busy="true"`.
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states colored by `--text-success` / `--text-error`, always paired with an icon and announced via an `aria-live` region.

### 2.2 Card Component Requirements

* **Default:** Flex column layout, `--bg-secondary` (Cream) fill, `3px double var(--primary)` border, `--radius-md`, `--shadow-md` (`0 4px 16px rgba(0,51,153,0.15)`).
* **Hover:** `transform: translateY(-2px)` with deepened shadow.
* **Focus-within:** Border color shifts to gold when a child link/button receives focus.
* **Loading (Skeleton):** Shimmer keyframe animation matching final card dimensions to prevent layout jumps.
* **Empty State:** Material Symbol plus clear guidance text.
* **Application:** Feature cards, pricing tiers, and testimonial cards all use this pattern. Feature cards add a subtle azulejo corner ornament via CSS pseudo-elements. The featured pricing tier gets a gold border, a "Most Popular" badge, and slightly elevated scale.

### 2.3 Form & Input Requirements

* **Location:** Newsletter signup (footer and/or Final CTA section).
* **States:** Empty, Focused (gold ring: `box-shadow: 0 0 0 3px rgba(201,168,76,0.4)`), Filled, Valid (olive border + Material `check` icon), Invalid (terracotta border, terracotta error text, Material `error` icon, `aria-describedby` + `aria-live="polite"`), Disabled, Read-only.
* **Structure:** `.input-group` flex container wrapping a `<label>`, an `<input>`, and a dedicated error feedback `<p>`.

### 2.4 FAQ Accordion & Modal Requirements

* **FAQ:** Accessible accordion — each item is a `<button aria-expanded>` controlling a region; a Material `expand_more` icon rotates 180° on open; smooth CSS height/opacity transition; fully keyboard operable.
* **Modal (if any dialog is used, e.g., plan selection confirmation):** Opening/Open/Loading/Success/Closing states animated via CSS transitions; centered flex overlay (`align-items: center`); backdrop `rgba(26,26,78,0.6)`; Material `close` icon button; keyboard focus trapping; close via `Esc` and overlay click; `role="dialog"` + `aria-modal="true"`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid `clamp()` typography; no horizontal overflow at any viewport.
* **Smooth Animations:** Apply `animation: tile-fade 1s ease-in` entrance reveals to sections (via an IntersectionObserver adding a `.visible` class — CSS performs the animation). All state changes use `transition: var(--transition-normal)`. Fully respect `prefers-reduced-motion: reduce` by disabling transforms and animations.
* **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state (pair color with icons/text); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, newsletter success, and loading states.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** `.btn-danger` must remain visually distinct in both themes.
* **Ornamental Dividers:** Between major sections, render a scroll-motif divider (CSS/data-URI, cobalt on light backgrounds, gold on dark), marked `aria-hidden="true"` — purely decorative.
* **Navigation:** Smooth-scroll anchor links with visible `:focus-visible` states.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks — only a single deferred `<script src="script.js" defer>` reference.
* **Naming Convention:** BEM throughout (e.g., `.hero__title`, `.pricing-card__badge`, `.faq-item__button`). Never mix conventions.
* **No Unrequested Placeholders:** Write real English copy for a coherent azulejo heritage brand concept. No lorem ipsum.
* **No External Assets:** All patterns, textures, and illustrations must be CSS data-URIs or pure CSS gradients.
* **Baseline CSS Technical (from the theme spec):** body `background: #F5F5F0; color: #1A1A4E`; headings in `'Playfair Display', serif`; ornamental borders `3px double #003399`; signature shadow `0 4px 16px rgba(0,51,153,0.15)`; tile pattern `background-size: 120px 120px; background-repeat: repeat`; `tile-fade 1s ease-in` entrance animation; no text shadows.

---

## 5. SECTION-BY-SECTION REQUIREMENTS

1. **Header (sticky):** Playfair Display brand wordmark; nav links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle (Material `dark_mode`/`light_mode`); primary CTA button. On mobile, a Material `menu` hamburger toggles a flex-column menu with `aria-expanded`, closing on `Esc` or link click.
2. **Hero:** Low-opacity cobalt azulejo pattern over Tile White (`120px` repeat); eyebrow label, Playfair Display headline, subcopy; two CTAs (`.btn-primary` "Book a Workshop", `.btn-secondary` "Explore the Collections"); a hand-painted-style blue illustration panel (cobalt line-art tile/vase composition as CSS data-URI); `tile-fade` entrance.
3. **Features (3 cards):** Material icons (`brush`, `history_edu`, `palette`) in cobalt; card spec 2.2; ornamental top border on each card.
4. **How It Works (3 steps):** Gold numerals 01/02/03, connected by an ornamental geometric line; stacks to a column on mobile.
5. **Testimonials (3):** Quote cards with Material `format_quote`, name + role, five gold Material `star` icons; subtle ceramic-texture background overlay.
6. **Picing (3 tiers):** Card spec 2.2; featured middle tier (gold border, badge, `.btn-gold`); other tiers use `.btn-secondary`; feature lists with olive Material `check` icons; "Select Plan" buttons show loading → success feedback announced via `aria-live`.
7. **FAQ (5–6 items):** Accordion per spec 2.4.
8. **Final CTA:** Full-width cobalt panel with a low-opacity white/gold azulejo pattern overlay; Playfair headline in Tile White; gold CTA button; verified contrast.
9. **Footer:** Brand blurb; secondary link columns (Explore, Visit, Legal); newsletter `.input-group` per spec 2.3; social icons (Material Symbols); copyright bar. Footer uses Deep Navy background with Tile White text in light mode, per the contrast-pairing rule.

Generate the complete `index.html`, `style.css`, and `script.js` now, on the first attempt, satisfying every rule above.