Illuminated Manuscript demo
Illuminated Manuscript

A richly ornate style evoking medieval monastic scriptoria, featuring gilded decorative elements, elaborate initial capitals, calligraphic typography, and parchment-like textures.
Category: Cultural & Heritage
Era: Medieval (c. 500–1500)
Prompt: 16.1 KB · 2209 words
# CODING AGENT PROMPT — "Illuminated Manuscript" Landing Page (Cultural & Heritage)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt — full markup, styles, and behavior in one pass, with no TODOs, no placeholder stubs, and no follow-up questions.

**Product Concept:** A fictional Cultural & Heritage product: **"Scriptorium"** — a digital archive offering high-resolution facsimiles of illuminated manuscripts, scholarly marginalia, and conservation-grade color rendering. (You may refine the name, but the concept must stay coherent across every section.)

**Copy Language:** All user-facing copy must be written in **English** — refined, scholarly, warm modern English with a medieval flavor (e.g., "Begin your folio journey"). Never actual Middle English, never gimmicky. Write real copy for every section; lorem ipsum is forbidden.

**Reference Specification:** The design token block labeled `references/00-flagship-implementation-specs/illuminated-manuscript.md` (provided below in Section 2) is canonical. Extend it — never replace, rename, or delete its signature tokens.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* **No Inline CSS:** The `style="..."` attribute is forbidden. No `<style>` blocks in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic (header/nav/main/section/article/footer), and agnostic of visual styling. Re-theming the page must require editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` using this canonical naming, mapped to the Illuminated Manuscript palette:

* **Colors (Light Mode):** `--bg-primary: #f3e6c4` (aged vellum), `--bg-secondary: #f8edd0` (parchment surface), plus theme extension `--bg-strong: #efdbaa`; `--text-primary: #2a1a10` (iron-gall ink), `--text-secondary: #5a4632` (muted umber); `--primary: #7a1f2b` (rubric red), `--secondary: #b8860b` (goldenrod accent); theme extensions `--gold: #c9971f` (gold leaf) and `--blue: #1e3a6e` (ultramarine); `--border-default: #7a5a1e` (sepia rule).
* **Feedback Tokens (must be defined):** `--text-success` / `--border-success` in a verdigris green (a historically accurate manuscript pigment, e.g., `#2f6b4f` in light mode) and `--text-error` / `--border-error` in a saturated crimson clearly distinct from `--primary` (e.g., `#b3261e`). Validate both for WCAG AA contrast in light and dark.
* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforced in every theme, not just the default.
* **No Pure White:** The page background is vellum `#f3e6c4`, never `#ffffff`. Where a near-white is genuinely needed, use `#fefefe`.
* **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg: 2px`; `--radius-pill: 999px`. Manuscripts are hand-ruled, not rounded — sharp panels with ornamented borders standing in for corner treatments.
* **Shadows:** `--shadow-sm: 0 1px 3px rgba(42,26,16,0.25)`, `--shadow-md: 0 4px 10px rgba(42,26,16,0.3)` (soft, low, like candlelight on vellum; a `--shadow-lg` extension is permitted).
* **Spacing & Transitions:** `--spacing-gap`, plus `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` — all layered components must use these to prevent overlap conflicts.
* **Signature Tokens (keep verbatim):** `--gilt-border`, `--vine-rule`, `--illum-corner` exactly as defined in the reference block.
* **Fonts:** `--font-base: 'EB Garamond', 'Palatino', Georgia, serif`; `--font-display: 'UnifrakturMaguntia', 'Cinzel', serif`.

**1.3 Mandatory Dark Mode Support — "Candlelit Scriptorium"**
The source specification declares no modes and requires validating in both light and dark before publishing. Therefore:
* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Suggested palette (validate and adjust for AA contrast): `--bg-primary: #1e1409`, `--bg-secondary: #2a1c0f`, `--bg-strong: #33220f`, `--text-primary: #f3e6c4`, `--text-secondary: #cbb488`, `--primary: #a63a46` (lightened rubric red), `--secondary: #d4a017`, `--gold: #e3b64e`, `--blue: #6b8cc4`, `--border-default: #8a6a2a`. Pure black (`#000`) is forbidden — the darkest value remains ink brown.
* **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage` (key `theme`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the nav using Google Material Symbols (`light_mode` / `dark_mode`) with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").
* **Pigment Identity:** Gold leaf, rubric red, and ultramarine must remain clearly identifiable in dark mode.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless an exception is explicitly justified with a CSS comment (e.g., `align-items: stretch` for equal-height pricing cards, `flex-start` for long-form text columns).
* Mobile-first: single-column by default; multi-column rows collapse to columns on small viewports; no horizontal scrolling at any width from 320px up. Center content in a max-width container (~72rem).

**1.5 Styling Approach**
* Use clean custom CSS organized in `@layer` blocks (tokens → base → layout → components → utilities), Tailwind-style layer discipline without requiring a build step. If you opt for Tailwind instead, drive all components via `@layer`/`@apply` mapping back to the CSS variables.
* **Naming Convention:** BEM (`block__element--modifier`) exclusively, consistent with `.btn--primary` in the reference block. Never mix conventions. Reusable component classes: `.btn`, `.card`, `.input-group`, `.badge`, etc.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load Google Fonts via `<link>` with `preconnect`: EB Garamond (400/500/600/700 + italics) bound to `--font-base`; UnifrakturMaguntia (400) bound to `--font-display`; Cinzel optional for subheads and Roman numerals.
* **Blackletter Restriction:** `--font-display` is for large display headings and the wordmark ONLY — never for body copy, buttons, labels, or error text (legibility first).
* **Icons:** Google Material Symbols (Rounded), loaded from Google Fonts. **Raw inline SVGs, local icon files, and emoji-as-icons are explicitly forbidden.**
* **CSS-Only Illumination:** All decorative ornament — vine rules, corner flourishes, gold medallions, drop caps, marginalia — must be built from gradients, borders, and pseudo-elements. No image assets.

---

## 2. THEME IMPLEMENTATION — ILLUMINATED MANUSCRIPT (500–1500 CE)

**2.1 Signature Visual Language** — repeat these moves on nav, cards, and inputs so gold trim reads as the page's structure, not one-off decoration:
* **Gilt Frame:** `--gilt-border` plus an inner 1px gold rule (via `::before`) framing every surface like a page margin.
* **Vine Rule:** `--vine-rule` as ornamental horizontal rules under the nav, between major sections, and connecting the How-It-Works steps.
* **Corner Flourishes:** `--illum-corner` gold dots on cards and framed panels.
* **Ornate Drop Caps:** Gilded initial capitals — gold letter on a rubric-red medallion (or rubric letter on gold) opening the hero prose and one paragraph per major section. Implement via `::first-letter` or a `.drop-cap` class; the full word must remain intact for screen readers.
* **Marginalia:** Small italic annotations offset into the margins on wide viewports (≥48rem); repositioned inline or hidden on mobile; must never cause overflow.
* **Rubrication:** Section eyebrows/labels in `--primary` red, letter-spaced small caps.
* **Vellum Ground:** Body background uses the radial gold glow from the reference block; subdue it in dark mode.

**2.2 Historical Fidelity**
* Colors must read as pigment on vellum — minium red, ultramarine, gold leaf, sepia. No neon, no pure black.
* Panels are sharp and hand-ruled (2px radii); ornament, not rounding, decorates corners.
* Shadows stay soft and low (candlelight), never harsh.

**2.3 Validation Requirement**
Before considering the work complete, validate every section, component, and interactive state in BOTH light and dark mode, including WCAG AA contrast for text, focus rings, borders, and badges.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Button** — all states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; EB Garamond 600; styled per the reference block (`.btn--primary`: rubric red ground, parchment text, gold border).
* **Hover:** brightness/shadow shift with `cursor: pointer` and a subtle lift (`translateY(-1px)` per reference).
* **Focus:** Distinct `:focus-visible` ring using `--secondary`/`--gold` with 2px offset — clearly visible in both themes.
* **Active/Pressed:** Click feedback (`transform: scale(0.97)` or the reference's `translateY(0)` settle — pick one and apply it consistently to all buttons).
* **Loading:** Sets `aria-busy="true"`, disables pointer events to prevent double-clicks/double-submits, and renders a CSS spinner or rotating Material icon without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error` (used by the Final CTA form).
* **Danger:** Any destructive action (e.g., a form "Clear" control) uses `.btn-danger`, visually distinct in both light and dark themes.

**3.2 Card** (Features, Testimonials, Pricing):
* **Default:** Flexible Flexbox column layout, `--bg-secondary` ground, 2px `--border-default`, `--radius-lg`, `--shadow-md`, gilt inner rule and `--illum-corner` flourishes per the reference block.
* **Hover:** `transform: translateY(-2px)` with `--shadow-md` → `--shadow-lg` elevation shift (or a gold-border glow).
* **Focus-within:** Card borders highlight (gold/red) when a child link or button receives focus.
* **Loading (Skeleton):** Define `.card--skeleton` with a CSS shimmer gradient sweep that prevents layout jumps.
* **Empty State:** Define a structured fallback pattern — Material icon plus clear guidance text — even if the static page never triggers it.

**3.3 Form & Input** (Final CTA email capture):
* **Structure:** A flex `.input-group` wrapping a `<label>`, the `<input class="input">`, and a dedicated error feedback element (`<p>` with `aria-live="polite"`).
* **States:** Empty; Focused (gold ring per reference: `--primary` border + 3px gold-tinted shadow); Filled; Valid (`--border-success` + Material check icon); Invalid (`--border-error`, error text in `--text-error`, error icon, message rendered in the error container, `aria-invalid="true"`, `aria-describedby`); Disabled; Read-only.
* **Behavior:** Validate email format in `script.js`; `preventDefault()` on submit; button enters Loading → Success; inline confirmation announced via `aria-live`. Errors are never communicated by color alone.

**3.4 Modal / Popup** — applies to any dialog implemented (e.g., a submission confirmation for the Final CTA):
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX:** Centered flex overlay (`align-items: center`), dimmed vellum/ink backdrop at `--z-modal`, Material icon close button (`aria-label="Close"`), keyboard focus trapping, focus returned to the trigger on close, closable via `Esc` and overlay clicks, `role="dialog"` / `aria-modal="true"` with an accessible title.

---

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid type via `clamp()`; responsive breakpoints; zero horizontal overflow; `scroll-margin-top` on anchored sections so the sticky nav never covers headings.
* **Smooth Animations:** CSS transitions on all state changes using `var(--transition-normal)` / `var(--ease-standard)`; fully honor `prefers-reduced-motion` (disable transforms, shimmer, and smooth scroll).
* **Accessibility (a11y):** Semantic HTML5 landmarks; a skip link; exactly one `<h1>` with logical heading order; visible focus on every interactive element; keyboard-operable FAQ accordion and theme toggle; `aria-live` regions for dynamic feedback; state never communicated by color alone; WCAG AA contrast in both modes.
* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.
* **Destructive Actions:** Visually distinct in both themes.

---

## 5. PAGE STRUCTURE & CONTENT

**5.1 Header / Nav (sticky):** Blackletter wordmark; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); theme toggle per 1.3; primary CTA ("Enter the Archive"). Gilt bottom border plus `--vine-rule` underneath. On mobile, links wrap or collapse — never scroll horizontally.

**5.2 Hero:** Rubricated eyebrow; blackletter `<h1>`; opening paragraph with a gilded drop cap; supporting subheading; two CTAs (`.btn--primary` + secondary); decorative marginalia; a `.badge` (e.g., "A Digital Scriptorium").

**5.3 Features (3 cards):** E.g., "Gold-Leaf Facsimiles" (high-resolution digitization), "Living Marginalia" (scholarly annotations layered on every folio), "Conservation-Grade Color" (pigment-accurate rendering). Each card: Material icon set in a gold medallion, title, prose with a drop cap or rubricated initial, hover lift per 3.2.

**5.4 How It Works (3 steps):** Roman numerals I, II, III in gold medallions (Cinzel or blackletter), connected by the `--vine-rule` on desktop; vertical column on mobile. Steps follow the concept: Digitize the folio → Curate the scholarship → Illuminate the reading experience.

**5.5 Testimonials (3):** Quotes styled as manuscript quotations — rubricated opening marks, italic EB Garamond — in cards with corner flourishes. Attributions with plausible fictional names and roles (a conservator, a professor of medieval studies, a curator).

**5.6 Pricing (3 tiers):** E.g., "Apprentice" (free), "Scribe" (featured), "Patron". The featured tier carries a gold `.badge` ("Most Illuminated"), emphasized gilt border, and slightly elevated styling. Each tier: price, feature list with Material check icons, and a CTA button implementing all states from 3.1 (featured tier uses `.btn--primary`). Equal-height cards via `align-items: stretch` (documented exception per 1.4).

**5.7 FAQ (5–6 items):** Accessible accordion — each question is a `<button>` with `aria-expanded` and a Material `expand_more` icon that rotates on open; answer panels animate via CSS (grid-rows or max-height technique); fully keyboard operable; smooth open/close respecting reduced motion.

**5.8 Final CTA:** A framed panel (gilt border + `--vine-rule`) with a blackletter headline, a supporting line, and the email signup form per 3.3 (Loading → Success with inline `aria-live` confirmation; a modal, if used, must satisfy 3.4).

**5.9 Footer:** `--vine-rule` top border; secondary links (About the Scriptorium, Collections, Conservation, Privacy, Terms, Contact); fictional copyright small print in `--text-secondary`; all links keyboard-focusable with visible focus rings.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer>`). No inline styles. No `<style>` blocks.
* **Naming Convention:** BEM throughout — one consistent convention across all files.
* **Assets:** Google Fonts (EB Garamond, UnifrakturMaguntia, optional Cinzel) and Google Material Symbols via `<link>` with `preconnect`. No local fonts, no icon files, no inline SVGs, no image assets.
* **No Unrequested Placeholders:** All copy is real, on-theme, and in English. Placeholders are permitted only where content was genuinely left unspecified — nowhere in this build.
* **First Attempt:** Deliver the complete, production-ready page in one pass, validated in both light and dark mode, with no TODOs and no deferred work.