Cursor Warm Gothic demo
Cursor Warm Gothic

A dark, developer-focused landing page style inspired by Cursor, pairing gothic dark backgrounds with warm amber accents for AI code editors and coding platforms.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 18.3 KB · 2518 words
# SYSTEM PROMPT — Build the "Cursor Warm Gothic" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Do not ask clarifying questions — make decisive choices within the constraints below and output the full, finished code.

**Objective:** Code a single-page marketing site for **"Grimoire"** — a fictional AI-native code editor (Cursor-inspired) — in the **"Cursor Warm Gothic"** style: warm cream canvas, gothic display type with aggressive negative tracking, editorial serif body with swash alternates, orange brand accent, oklab-space borders, extreme-radius pills, and a code-editor aesthetic. Required sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links.

---

## 1. THEME SPECIFICATION — "CURSOR WARM GOTHIC"

**1.1 Design Concept**
Warm off-white cream canvas (`#f2f1ed`) with warm near-black text (`#26251e`, yellowish undertone). Gothic sans-serif display headlines with aggressive negative letter-spacing (−2.16px at 72px). Serif body text with swash alternates for editorial passages. Borders defined in the oklab color space for perceptual uniformity. Orange accent (`#f54e00`) for links and brand moments. Pill-shaped elements with extreme radius. Hover states shift text to warm crimson (`#cf2d56`). Three-font system: gothic display, serif body, mono code.

**1.2 Color Tokens — Light Mode (Primary Experience), declared in `:root`**

```css
:root {
  --primary: #f54e00;            /* Orange — brand, links, CTAs */
  --secondary: #c08532;          /* Gold — highlights, monograms */
  --bg-primary: #f2f1ed;         /* Warm cream canvas */
  --bg-secondary: #ebeae5;       /* Surface */
  --bg-tertiary: #e6e5e0;       /* Light surface */
  --text-primary: #26251e;       /* Warm near-black */
  --text-secondary: #6f6a5c;     /* Warm gray */
  --text-success: #3e7a4f;
  --text-error: #cf2d56;         /* Warm crimson — hover + errors */
  --border-default: rgba(38, 37, 30, 0.10);
  --border-default: oklab(0.263 -0.002 0.012 / 0.10); /* overrides fallback */
  --border-strong: rgba(38, 37, 30, 0.24);
  --border-strong: oklab(0.263 -0.002 0.012 / 0.24);
  --border-error: rgba(207, 45, 86, 0.50);
  --border-success: rgba(62, 122, 79, 0.50);
  --header-bg: rgba(242, 241, 237, 0.88);
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(38,37,30,.07), 0 1px 3px rgba(38,37,30,.05);
  --shadow-md: 0 6px 16px rgba(38,37,30,.10), 0 2px 4px rgba(38,37,30,.06);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 250ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 90; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
}
```

**1.3 Color Tokens — Dark Mode (Mandatory Warm Variant), declared in `.dark`**

```css
.dark {
  --primary: #f54e00; --secondary: #c08532;
  --bg-primary: #1f1e18; --bg-secondary: #26251e; --bg-tertiary: #2d2b23;
  --text-primary: #f2f1ed; --text-secondary: #b3ae9e;
  --text-success: #8cc49a; --text-error: #e2637f; /* lightened crimson for contrast */
  --border-default: rgba(242, 241, 237, 0.14);
  --border-default: oklab(0.925 -0.002 0.012 / 0.14);
  --border-strong: rgba(242, 241, 237, 0.30);
  --border-strong: oklab(0.925 -0.002 0.012 / 0.30);
  --border-error: rgba(226, 99, 127, 0.55);
  --border-success: rgba(140, 196, 154, 0.55);
  --header-bg: rgba(31, 30, 24, 0.88);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 6px 16px rgba(0,0,0,.45);
}
```

**Exception clause:** Although the source style spec marks dark mode as "not recommended," dark mode remains mandatory under this architecture — implement the warm dark variant above and present light mode as the default experience.

**1.4 Typography — Three-Font System (Google Fonts Mandatory)**

* **Display (gothic):** `"Space Grotesk"` (500, 700) — headlines, brand wordmark, prices, card titles. Bind to `--font-display`. Display headings use `letter-spacing: -0.03em` (equivalent to −2.16px at 72px; it must scale with `font-size` — never hard-code −2.16px). Use −0.02em for H2/H3.
* **Body (serif):** `"Fraunces"` (400, 500, + italic) — body copy, testimonials, editorial passages. Bind to `--font-body` and `--font-base`. For editorial accent words, use an italic span with `font-feature-settings: "swsh" 1` to activate swash alternates.
* **Code (mono):** `"JetBrains Mono"` (400, 500) — code snippets, step numbers, eyebrows, labels, footer meta. Bind to `--font-mono`. Eyebrow labels are uppercase with `letter-spacing: 0.08em`.
* **Exception clause:** The source spec's `system-ui`/`Georgia`/`monospace` stacks may appear only as trailing fallbacks in `font-family` declarations; Google Fonts are the mandatory primary typefaces.

**1.5 Borders, Shape & Signature Effects**
* Every border uses the oklab tokens above; always declare the `rgba()` fallback line immediately before the `oklab()` line (progressive enhancement).
* Pills (`--radius-pill: 9999px`) for badges, buttons, tags, and avatars; `--radius-md: 8px` is the standard radius for cards, inputs, and the editor mock.
* Global text-link hover shifts color to `var(--text-error)` (crimson `#cf2d56`) with `transition: color var(--transition-fast) var(--ease-standard)`.
* Signature motif: a CSS-only blinking block caret (the "cursor") in the hero editor mock — an inline-block span (~`0.6ch` wide, `1.1em` tall, `background: var(--primary)`) with a `steps(2)` blink animation.
* Set `accent-color: var(--primary)` on `:root`. Never use `#ffffff` anywhere; if a near-white is required, use `#fefefe`.

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
All styling lives in `style.css`. The `style="..."` attribute is forbidden. All design properties, layout rules, and states are targeted via class selectors only. HTML stays clean, semantic, and style-agnostic — restyling must never require markup changes.

**2.2 CSS Variables & Theme Tokens**
All visual values must reference the tokens in §1.2/§1.3 — no magic numbers for colors, radii, shadows, spacing gaps, durations, or z-indexes. **Contrast pairing is enforced in every theme:** light backgrounds (`#f2f1ed`, `#ebeae5`, `#e6e5e0`) pair only with dark text (`#26251e`); dark backgrounds (`#1f1e18`, `#26251e`) pair only with light text (`#f2f1ed`). The orange primary button uses cream text on orange; verify the pairing holds after any token change.

**2.3 Mandatory Dark Mode Support**
* Define dark tokens under both `@media (prefers-color-scheme: dark)` (applied to `:root:not(.light)`) and a `.dark` class — the media query serves system-preference users with zero flash; the classes override it when the user explicitly chooses.
* Provide a visible toggle in the header: a 44×44px icon button containing Material Symbols `light_mode`/`dark_mode` (CSS shows the correct one per theme), with `aria-pressed` reflecting dark state and a dynamically updated `aria-label` ("Switch to dark mode" / "Switch to light mode").
* Persist the explicit choice in `localStorage` (key: `grimoire-theme`); fall back to `prefers-color-scheme` on first visit. Apply the stored class as the first statement in `script.js`. Theme switching must require zero HTML restructuring. Set the `color-scheme` property per theme.

**2.4 Flexbox Layout & Mobile-First Alignment**
Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment. All rows convert to columns below ~768px. Fluid sizing via `clamp()`; horizontal scrolling is prohibited — achieve this through proper wrapping, never `overflow: hidden`.

**2.5 Styling Approach & Naming Convention**
Use clean, hand-written custom CSS — no Tailwind, no build step, no utility classes; the oklab borders and token system map directly to vanilla CSS. Use **BEM exclusively** (`.block__element--modifier`, e.g., `.btn--primary`, `.card__title`, `.faq__trigger`, `.header__toggle`) — never mix conventions.

**2.6 Typography & Icons (Google Fonts Mandatory)**
Load Space Grotesk, Fraunces, JetBrains Mono, and Material Symbols Outlined via `<link>` tags (with `preconnect`) in `<head>`. **All icons are Google Material Symbols** (`<span class="material-symbols-outlined">…</span>`). Inline SVGs, icon fonts other than Material Symbols, and local icon files are forbidden.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Button Component**
Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, pill radius, `--font-display` at 500 with −0.01em tracking. Variants: `.btn--primary` (orange fill, cream text), `.btn--secondary` (transparent, 1px `--border-strong`, `--text-primary`), `.btn--danger` (crimson-based, visually distinct in both themes). All states via classes:
* **Hover:** brightness shift (`filter: brightness(0.94)`) + `--shadow-md`, `cursor: pointer`.
* **Focus:** distinct ring via variables (`outline: 2px solid var(--primary); outline-offset: 2px`).
* **Active:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** disables pointer events, prevents double-clicks, swaps the leading icon to a rotating `progress_activity` Material Symbol — button dimensions must not change.
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback styles driven by `--text-success` / `--text-error`, always paired with an icon — never color alone.

**3.2 Card Component**
Base `.card`: `--bg-secondary` fill, 1px `--border-default`, `--radius-lg`, `--shadow-sm`, flexible flexbox interior. If interactive (`.card--link`): **hover** lifts (`transform: translateY(-2px)`) with shadow shift to `--shadow-md` and border to `--border-strong`; **focus-within** highlights the border in `var(--primary)` when a child link/button is focused. Define a **skeleton** shimmer utility (warm-tinted gradient sweep, `steps` or `linear` animation, radius inherited — must not cause layout shift) and an **empty-state** pattern (centered Material Symbol + serif guidance text) as part of the card CSS system.

**3.3 Form & Input Component**
Build the footer newsletter capture as a flex column wrapping: a label (mono, uppercase, 0.08em tracking), the input, and a dedicated error-feedback container (`role="status"`, `aria-live="polite"`, min-height reserved to prevent layout shift). Input states, all via classes: **empty** (bg `--bg-tertiary`, 1px `--border-default`, `--radius-md`, min-height 44px), **focus** (border `--primary` + soft orange ring via `box-shadow`), **filled**, **valid** (`--border-success` + `check` icon), **invalid** (`--border-error`, crimson message text + `error` icon — icon and text, never color alone), **disabled**, **read-only**.

**3.4 FAQ Accordion (Custom Widget)**
Each item: an H3 containing a full-width trigger `button.faq__trigger` (`display: flex; justify-content: space-between; align-items: center;`) with `aria-expanded`, `aria-controls`, and an `expand_more` icon that rotates 180° when open; the panel is a `div.faq__panel` with `role="region"` and `aria-labelledby`. Animate open/close with the CSS `grid-template-rows: 0fr → 1fr` technique under `transition: var(--transition-normal)`. Fully keyboard operable (Tab + Enter/Space). Choose independent toggles or a single-open pattern and implement it consistently.

**3.5 Modal / Popup (Conditional)**
No modal is requested — do not invent one. If any overlay is ever introduced, it must be a centered flex container (`align-items: center`) with a backdrop, animated opening/open/closing states via CSS transitions, a Material Symbol close button, keyboard focus trapping, and closing via `Esc` or overlay click.

---

## 4. PAGE SECTION REQUIREMENTS

**4.1 Sticky Header & Navigation**
`position: sticky; top: 0; z-index: var(--z-header); background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-default)`. Inner flex row (brand / nav / actions), max-width ~1120px. Brand: "Grimoire" in Space Grotesk 700 with a trailing orange "." Anchor links (Features, How It Works, Testimonials, Pricing, FAQ) hover crimson. Actions: the theme toggle (§2.3) and a `.btn--primary` pill "Download". Below 768px: hide nav links behind a `menu` icon button (`aria-expanded`, `aria-controls`) toggling a dropdown panel (flex column, `--bg-secondary`, `--border-default`, `--shadow-md`, `z-index: var(--z-dropdown)`); links close it on click; `Esc` closes it.

**4.2 Hero**
Two-column flex on desktop (copy left, editor mock right), single column on mobile. Copy column: a pill eyebrow badge (mono, uppercase, orange dot — e.g., "v2.0 · Agent mode is live"); H1 in Space Grotesk 700 at `clamp(2.75rem, 6vw, 4.5rem)` with −0.03em tracking (suggested copy: "The AI editor that feels like *magic*." — swash-italic on "magic"); a Fraunces sub-lede in `--text-secondary` describing the product; primary pill "Download free" + secondary ghost pill "Read the docs"; mono microcopy line ("macOS · Windows · Linux — free for personal use"). Editor mock: a `.card` containing a tab bar (mono, small, one active tab with an orange underline, e.g., "spellbook.ts"), warm traffic-light dots, and a code body in JetBrains Mono with line numbers in `--text-secondary` and token-colored spans (keywords `--primary`, strings `--secondary`, comments `--text-secondary` italic) ending in the blinking block caret (§1.5).

**4.3 Features — 3 Cards**
Reusable section header pattern: mono uppercase orange eyebrow, H2 (Space Grotesk, −0.02em), one-line Fraunces intro. Cards in a wrapping flex row (`gap: var(--spacing-gap)`, each `flex: 1 1 300px`). Each card: a Material Symbol (`forum`, `edit_note`, `bolt`) inside an orange-tinted pill, a gothic H3, a serif description, and a mono "Learn more" link with `arrow_forward` (hover: crimson text + icon nudge). Apply the full card spec (§3.2). Suggested features: chat grounded in the whole codebase; inline AI edits in place; agent mode for multi-file refactors.

**4.4 How It Works — 3 Steps**
Flex row on desktop with a horizontal 1px `--border-default` connector line behind the steps; vertical line when stacked on mobile. Each step: an oversized mono number ("01", "02", "03") in `--secondary` gold, a gothic step title, a serif description. Suggested steps: open your project → ask or select code → review the diff.

**4.5 Testimonials**
Three wrapping cards, each: a `format_quote` Material Symbol in orange, a Fraunces quote (italic, with one swash-alternate phrase), and an attribution row — a monogram avatar pill (initials in mono, gold-tinted background), name in Space Grotesk 500, role/company in mono `--text-secondary`. Write three realistic, specific English quotes from invented but plausible developers — no lorem ipsum.

**4.6 Pricing — 3 Tiers**
Three cards in a wrapping flex row. The middle tier is `.card--featured`: `--primary` border, slight elevation, and a "Most popular" pill badge (orange fill, cream text) overlapping the top edge. Each tier: mono eyebrow name, price in Space Grotesk 700 (e.g., $0 / $20 / $40 per user), mono "/month" suffix, a feature list with `check` Material Symbols, a CTA (primary for the featured tier, secondary for the others), and mono fine print ("Prices in USD. Cancel anytime."). All button states in §3.1 apply.

**4.7 FAQ**
Centered column, max-width ~760px. Section header pattern, then 5–6 accordion items per §3.4. Write realistic English questions (e.g., model choice, data privacy/training opt-out, extension support, platforms, refunds) with substantive answers.

**4.8 Final CTA**
Full-width band with `--bg-secondary` and top/bottom `--border-default` borders. Centered flex column: large gothic H2 (−0.03em), one serif line with a swash-italic phrase, a large `.btn--primary` pill, and mono microcopy ("Free for personal use · No credit card required").

**4.9 Footer with Secondary Links**
Top region: wrapping flex — brand column (wordmark, one-line Fraunces tagline, and social links as **mono text pills**: "GitHub", "X", "Discord", "YouTube" — no brand SVGs), three secondary-link columns with mono uppercase titles (Product: Features, Pricing, Changelog, Roadmap / Resources: Docs, Blog, Community, Status / Company: About, Careers, Contact, Press), and the newsletter form per §3.3. All footer links: `--text-secondary` shifting to crimson on hover. Bottom bar: flex row between mono copyright ("© 2025 Grimoire, Inc.") and mono legal links (Privacy, Terms, Security), above a top border.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` sizing, ~768px breakpoint, zero horizontal overflow.
* **Smooth animations:** every state change transitions with `var(--transition-fast)` or `var(--transition-normal)` and `var(--ease-standard)`. Add `scroll-behavior: smooth` and `scroll-padding-top` for the sticky header. Honor `prefers-reduced-motion`: disable the caret blink, hover lifts, accordion and menu animations, and smooth scrolling.
* **Accessibility (a11y):** verify ≥4.5:1 body-text contrast in both themes (orange on cream is reserved for large text, accents, and underlined links — never small standalone text). Never rely on color alone — pair every state with an icon or text. Use semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), exactly one H1, logical heading order, correct ARIA on the toggle/menu/accordion, full keyboard operability, visible focus rings, and `aria-live` regions for all dynamic form feedback.
* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** three separate files — `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer></script>` reference; no inline `<script>` blocks, no inline event-handler attributes (`onclick` etc.), no `style` attributes.
* **Naming:** BEM exclusively and consistently across all three files.
* **Assets:** Google Fonts and Material Symbols via `<link>` tags only.
* **Copy:** all user-facing copy in **English**, written in the voice of a premium developer-tool brand — realistic and specific; lorem ipsum, TODOs, and empty stubs are prohibited. Placeholder content is permitted only where genuinely unspecified.
* **Completeness:** deliver the finished, fully functional page in one attempt — all sections, all component states, both themes, and all interactions working.