Fantasy Cartography demo
Fantasy Cartography

An illustrated mapmaking style using aged parchment, hand-drawn contour lines, compass marks, and inked terrain to evoke tabletop fantasy worlds and old-world exploration guides.
Category: Fantasy & Sci-Fi
Era: Medieval & Renaissance Revival
Prompt: 7.4 KB · 974 words
# System Prompt: Build a "Fantasy Cartography" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page on the first attempt. Theme: **Fantasy Cartography** (illustrated fantasy maps, parchment with ink contours and terrain marks, serif place names, compass geometry, routes, legends, coordinate-like interfaces). Sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.**

---

## 1. Architecture Rules (Mandatory)

**1.1 CSS-First & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. **Never** use `style="..."` in HTML.
- Target everything via class selectors; HTML stays semantic and style-agnostic.

**1.2 Design Tokens (CSS Variables)**
Adopt the provided token set as your `:root` foundation, mapping it to the standard token names:
- Colors: `--color-bg: #e8d6ad` → `--bg-primary`; `--color-surface: #f6e8c7` → `--bg-secondary`; `--color-surface-2: #d8c08c` → `--bg-tertiary`; `--color-text: #382b1b` → `--text-primary`; `--color-text-muted: #755e3b` → `--text-secondary`; `--color-primary: #3f693f`, `--color-accent: #a94832`, `--color-ink: #293e48`. Also define `--text-success` (use `--color-primary`) and `--text-error` (use `--color-accent`), `--border-default: var(--color-ink)`, `--border-success`, `--border-error`.
- **Contrast pairing:** every light parchment background pairs with dark ink text (`#382b1b`); every dark background pairs with light parchment text (`#f6e8c7`). Enforce in both themes.
- Radius/shadows: `--radius-sm: 0`, `--radius-md: 3px`, `--radius-lg: 8px`, `--radius-pill: 999px`; `--shadow-sm`, `--shadow-md` derived from `--shadow-paper: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 18px rgba(56,43,27,.18)` and `--shadow-ink: 0 0 0 1px #382b1b`.
- Spacing: `--space-1` through `--space-24` as specified. Transitions: `--transition-fast: .18s`, `--transition-normal: .3s`, `--ease-standard: cubic-bezier(.2,.75,.3,1)`.
- Stacking: `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.
- Signature texture token: `--contours: repeating-radial-gradient(ellipse at 48% 56%, transparent 0 12px, rgba(41,62,72,.16) 13px 14px, transparent 15px 23px)`.

**1.3 Mandatory Dark Mode**
- Define a full dark token set under `@media (prefers-color-scheme: dark)` **and** a `.dark` class override: deep ink-navy backgrounds (`#1b262d` bg, `#24343d` surface), parchment-toned text (`#e8d6ad` primary text, `#b09a6e` muted), keep `--color-primary`/`--color-accent` adjusted for contrast (e.g., `#6a9a6a`, `#d4755c`).
- Provide a visible theme toggle (compass icon via Google Material Symbols) with correct `aria-pressed` and `aria-label`; persist choice in `localStorage`, falling back to `prefers-color-scheme`.

**1.4 Flexbox & Mobile-First**
- Build all layout structures with Flexbox; every flex container defaults to `align-items: center` unless a justified exception exists (e.g., feature card content top-aligned).
- Rows convert to columns below ~620px; no horizontal scrolling at any viewport.

**1.5 Framework**
- Use clean custom CSS (the provided token-driven stylesheet) as the base; if you use Tailwind utilities, map them back to the variables and generic class names (`.btn`, `.card`, `.input-group`, `.nav`). One naming convention throughout — do not mix.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Google Fonts**: a serif display face (e.g., "Cormorant Garamond" or "Cinzel" for headings) and a readable serif/sans body (e.g., "EB Garamond" or "Inter"); bind via `--font-base` / `--font-display`. Keep `'Courier New'`-style mono for coordinate/legend labels.
- Icons: **Google Material Symbols** only. **No inline SVGs, no local icon files.** Use icons like `explore` (compass), `map`, `route`, `terrain`, `library_books` (legend), `navigation`.

---

## 2. Component Specifications

**2.1 Buttons** — `.btn`, `.btn--primary`, `.btn--danger`:
- Default: flex, `align-items: center; justify-content: center; gap: .5rem`; min 44×44px touch target.
- Hover: `translateY(-2px)` + background shift (`--color-accent`); `cursor: pointer`.
- Focus: 3px `outline` in `--color-accent` with offset (visible in both themes).
- Active: `transform: scale(0.97)`.
- Loading: `.is-loading` disables interaction, shows a CSS spinner or rotating `explore` icon without changing button dimensions.
- Disabled: `opacity: .5`, greyscale, `cursor: not-allowed`.
- `.btn--danger` (e.g., "Decline expedition" style actions) must be visually distinct in both themes.

**2.2 Cards** — Features (3), Pricing tiers (3), Testimonials:
- Default: `--bg-secondary` parchment surface, 1px `--color-ink` border, `--shadow-paper` elevation.
- Hover: `translateY(-2px)` + shadow shift.
- `:focus-within`: border highlight when a child link/button is focused.
- Pricing cards: middle tier highlighted with `--color-primary` border + "Most Popular" badge (`.badge` with accent border).
- Testimonial cards: quote in display serif, muted attribution, small compass/route icon.

**2.3 Forms & Inputs**
- Newsletter signup in the Final CTA (or Footer): flex `.input-group` wrapping label, `.input`, and a dedicated error message container.
- States: empty, focused (outline ring), filled, valid (success border + `check` icon), invalid (error border, `--text-error` text + `error` icon), disabled, read-only. Never rely on color alone — pair with icons/text.

**2.4 FAQ Accordion / Modal-like Disclosure**
- Animated open/close via CSS transitions (`max-height`/grid-rows technique), `aria-expanded` on triggers, `aria-hidden` on panels, keyboard operable (Enter/Space), `Esc` collapses. Focus ring visible on triggers in both themes.

---

## 3. UX & Micro-Interaction Rules

- **Responsive by default:** fluid type via clamp, no horizontal overflow; `--space-*` scaling on mobile.
- **Animations:** all state changes use `transition: var(--transition-normal) var(--ease-standard)`; respect `prefers-reduced-motion`.
- **Accessibility:** semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), skip-to-content link, logical focus order, ARIA on the theme toggle and FAQ, `aria-live="polite"` region for form feedback. Contrast ≥ 4.5:1 in **both light and dark modes** — validate both before publishing.
- **Visual feedback:** every hover/click/submit produces a visible change.
- **Theme texture:** apply the `--contours` radial-gradient as a fixed, pointer-events-none parchment terrain overlay (opacity ~.45 light, ~.25 dark) behind content; cards/nav sit above it with `--shadow-paper` + ink borders. Use compass-rose decorative touches (CSS circles/borders + Material `explore` icons), dashed "route" dividers between How-It-Works steps, and coordinate-style mono labels (e.g., "N 47° · E 12°") as section eyebrows.
- **Copy:** all user-facing copy in **English**, in the voice of a fantasy cartographer's guild (e.g., "Chart your world", "Every legend begins with a map").

---

## 4. Deliverables

- **Files:** `index.html`, `style.css`, `script.js` (theme toggle, FAQ accordion, form validation, smooth scroll). No inline `<script>` beyond one deferred entry-point reference; no inline CSS.
- **Sections in order:** Hero (headline, subcopy, primary CTA + secondary CTA, decorative compass/contour art), Features (3 cards), How It Works (3 numbered steps with route connectors), Testimonials (3 quotes), Pricing (3 tiers, middle highlighted), FAQ (5–6 items), Final CTA (with newsletter input), Footer (secondary links, theme toggle).
- Real, thematic copy — no lorem ipsum.