Stipple / Pointillism demo
Stipple / Pointillism

A texture and rendering style built from countless small dots, evoking engraved stipple prints and Seurat's pointillist paintings.
Category: Art & Illustration
Era: 1880s Pointillist
Prompt: 12.5 KB · 1681 words
**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Follow every rule in this specification exactly. Do not omit states, do not skip dark mode, and do not submit placeholder-only content.

---

## Project Brief

**Theme:** Stipple / Pointillism — WSJ "hedcut" editorial dotwork. Tone built from dots of varying density, fine detailed dotwork, refined, tactile, print/art heritage. Visual references: Wall Street Journal hedcuts, Seurat's pointillism.

**Sections (in this exact order):**
1. **Header/Nav** — sticky, stipple-textured, brand wordmark, anchor links to all sections, theme toggle, primary CTA.
2. **Hero** — display headline, subcopy, two CTAs (primary + secondary), decorative CSS-only stipple emblem/medallion (radial-gradient dither, no images), optional badge.
3. **Features** — exactly 3 cards (Material Symbol icon, title, copy per card).
4. **How It Works** — exactly 3 numbered steps (mono-font numerals 01/02/03), visually connected, stacks to a column on mobile.
5. **Testimonials** — 3 quote cards; avatars rendered as CSS stipple medallions (dither texture + Material Symbol `person`), never raster images.
6. **Pricing** — 3 tiers; the featured tier distinguished by badge + border + elevation (never color alone); each tier CTA demonstrates the loading state.
7. **FAQ** — accordion of 5–6 Q&As, fully keyboard operable.
8. **Final CTA** — stipple-textured panel with an email signup form (full validation states + `aria-live` feedback).
9. **Footer** — secondary links grouped under headings (Product, Company, Resources, Legal), copyright with current year, small print.

**Copy:** All user-facing copy in English, publication quality, written in a refined editorial voice consistent with the print/engraving aesthetic. No lorem ipsum.

**Design tokens (adopt verbatim as your foundation in `:root`):**
```css
--color-bg: #f7f5ef; --color-surface: #ffffff; --color-surface-strong: #ece8dc;
--color-border: #cfc9b8; --color-text: #1e1c17; --color-text-muted: #5e594c;
--color-primary: #2b2620; --color-accent: #a1361c; --color-dot: #1e1c17;
--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(30,28,23,0.10); --shadow-md: 0 3px 10px rgba(30,28,23,0.12);
--shadow-lg: 0 10px 24px rgba(30,28,23,0.16);
--font-sans: 'Source Serif 4', 'Georgia', serif; --font-display: 'Playfair Display', 'Georgia', serif;
--font-mono: 'Courier Prime', ui-monospace, monospace;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
--text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
--space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--stipple-fine: radial-gradient(circle, var(--color-dot) 0.6px, transparent 0.6px);
--stipple-coarse: radial-gradient(circle, var(--color-dot) 1px, transparent 1px);
--stipple-size-fine: 4px 4px; --stipple-size-coarse: 7px 7px;
```

**Base component classes (reproduce and extend, do not replace):**
- `.nav` — flex, `align-items: center`, stipple-fine background layered over `--color-surface` with `background-blend-mode: multiply`, 1px bottom border.
- `.btn` — 700-weight serif, 1.5px solid ink border, `--radius-md`, `--shadow-sm`; hover lifts with `--shadow-md`; `:focus-visible` gets a 2px `--color-accent` outline offset 2px; `[disabled]` at `opacity: .5` with `cursor: not-allowed`. `.btn--primary` inverts to ink fill with bg-colored text.
- `.card` — `--color-surface` background, `--radius-lg`, `--shadow-md`, 1px border, and a `::after` overlay of `--stipple-coarse` at `opacity: .06` (the signature hedcut texture).
- `.input` — full width, 1.5px border, `--radius-sm`; `:focus` swaps border to `--color-accent` with a 3px `color-mix` accent ring.
- `.badge` — pill, stipple-fine texture over ink fill with `background-blend-mode: screen`.

**Dark mode note (translated from source spec):** The source declares no light/dark modes — you must define both and validate them before publishing.

---

## 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:** All design properties, layout rules, and states live in `style.css`, targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic — restyling the page must require touching only `style.css`.

**1.2 CSS Variables & Theme Tokens**
* Extend `:root` with these mandatory semantic aliases mapped to the theme tokens: `--primary` (→ `--color-primary`), `--secondary` (→ `--color-accent`), `--bg-primary` (→ `--color-bg`), `--bg-secondary` (→ `--color-surface`), `--text-primary` (→ `--color-text`), `--text-secondary` (→ `--color-text-muted`), `--text-success`, `--text-error`, `--border-default` (→ `--color-border`), `--border-error`, `--border-success`. Define success/error values with WCAG AA contrast in both themes.
* Also add: `--font-base` (→ the serif body stack), `--spacing-gap` (→ `--space-6`), `--transition-fast: 120ms`, `--transition-normal: 240ms`, and stacking tokens `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.
* **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, not just the default.
* **Exception clause:** The source palette declares `--color-surface: #ffffff`; per the no-pure-white rule, set the near-white surface to `#fefefe` instead.

**1.3 Mandatory Dark Mode Support**
* Define a full dark palette under both `@media (prefers-color-scheme: dark)` and a `.dark` class, suggested: bg `#16140f`, surface `#1e1b15`, surface-strong `#26221a`, border `#453f33`, text `#f2efe4`, text-muted `#a39c8a`, accent lightened to `#d1603f` (validate ≥ 4.5:1 for text usage), and `--color-dot: #f2efe4` so stipple textures remain visible.
* Re-evaluate blend modes per theme: the light-mode `multiply` stipple layers must switch (e.g., to `screen`/`soft-light` or reduced opacity) so the dither reads correctly on dark surfaces. Filled elements (`.btn--primary`, `.badge`) invert ink/cream roles in dark mode.
* **Theme Switching:** Background and text variables must swap with zero HTML restructuring.
* **Persistence:** Store the choice in `localStorage` (fall back to `prefers-color-scheme` on first visit). The nav toggle must be a real `<button>` with correct `aria-pressed` and `aria-label` state, swapping Material Symbol icons (e.g., `dark_mode`/`light_mode`).

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox.
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `stretch` for equal-height pricing cards).
* **Mobile-Friendly First:** Rows convert to columns on small viewports; no horizontal scrolling anywhere at any breakpoint.

**1.5 Framework & Naming Convention**
* The theme ships its own custom CSS token sheet and component classes — build with clean custom CSS (Tailwind permitted only as an `@layer`/`@apply` utility layer if desired). All utilities must map back to CSS variables and generic reusable classes.
* **BEM only:** Use one consistent BEM convention (`.btn`, `.btn--primary`, `.card`, `.faq__item`, `.pricing__tier--featured`) across the entire deliverable. Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Playfair Display** (display headings), **Source Serif 4** (body serif), and **Courier Prime** (mono numerals/labels) via Google Fonts `<link>` tags with `preconnect`. Bind the body stack to `--font-base`. **Exception clause:** Georgia appears only as a fallback inside the font stacks, never as the primary face.
* Icons: **Google Material Symbols** only. Raw inline SVGs and local icon files are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.
* **Hover:** brightness/shadow shift with `cursor: pointer`.
* **Focus:** distinct `:focus-visible` ring using the accent variables for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)` click feedback (adapt the base `.btn:active` accordingly).
* **Loading:** disables interaction, prevents double-clicks (`aria-busy="true"`), and renders a CSS spinner or animated Material Symbol without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error`, always paired with an icon or text (never color alone).
* **Danger:** define `.btn--danger` visually distinct in both light and dark themes.

**2.2 Card Component**
* **Default:** flexible flexbox layout, subtle borders and elevation via `--bg-secondary` and CSS variables, with the stipple `::after` texture.
* **Hover:** `transform: translateY(-2px)` plus shadow shift.
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** a shimmer animation class defined in CSS to prevent layout jumps.
* **Empty State:** structured fallback with a Material Symbol and clear guidance text.
* **Pricing featured tier:** differentiated by badge + border + elevation in both themes.

**2.3 Form & Input Requirements**
* **States:** empty, focused (accent ring), filled, valid (success border + icon), invalid (error border, error text, error icon), disabled, read-only — extend `.input` with `.input--valid` / `.input--invalid` and a `.field` wrapper.
* **Structure:** flex container wrapping a `<label>`, the input, and a dedicated error feedback element with `aria-live="polite"`. Apply to the Final CTA email form with client-side validation, a loading state on submit, and a success confirmation.

**2.4 FAQ Accordion & Modal Requirements**
* **FAQ:** each item is a `<button aria-expanded>` controlling its panel (`aria-controls`, region linkage), animated open/close via CSS transitions, fully keyboard operable, reduced-motion safe.
* **Modal (if any overlay is used):** opening/open/loading/success/closing states animated via CSS; centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click, stacked at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow; set `scroll-padding-top` so anchor navigation clears the sticky nav.
* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; extend the source's reduced-motion block globally — `prefers-reduced-motion: reduce` disables all transforms, animations, and smooth scrolling.
* **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`) with a logical heading hierarchy; correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, loading, and success feedback; include a "skip to main content" link.
* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change — pricing CTAs demonstrate loading → success feedback via an `aria-live` status.
* **Destructive Actions:** `.btn--danger` remains distinct in both themes.
* **Texture Legibility:** stipple dither opacity over text areas stays ≤ 0.08; validate that the texture never reduces text contrast below AA in either theme.

---

## 4. 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 raster images — all decorative texture is CSS-generated.
* **Naming Convention:** BEM throughout, never mixed.
* **Copy:** real, publication-quality English copy for every section; `href="#"` is acceptable only for footer links with no real destination.
* **`script.js` scope:** theme toggle with persistence, FAQ accordion, email form validation + `aria-live` feedback, pricing CTA loading simulation, current-year footer date. Nothing more.
* **Validation gate before publishing:** verify the complete page — all 9 areas — in both light and dark modes, at mobile and desktop widths, with keyboard only.