Scandinavian / Nordic demo
Scandinavian / Nordic

Category: Minimalism & Swiss
Era: 1950s Mid-Century Modern
Prompt: 15.6 KB · 2074 words
**Role & Objective:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Scandinavian / Nordic landing page** (archetype: `claude-artisan/minimal-organic` — warm minimalism, hygge, light woods, soft neutrals, human-centered simplicity; modern references: IKEA, Muuto, HAY) **on the first attempt, in a single response, with no truncated sections**. Invent one coherent fictional brand in the Nordic home/lifestyle space (e.g., "Hjem", "Fjord & Form", "The Hygge Club" — a curated Nordic home-goods subscription works well) and keep it consistent everywhere. The page must contain, in order: **Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English** — real, on-brand, hygge-toned copy for every section; lorem ipsum is prohibited.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. The `style="..."` attribute is **forbidden** anywhere in the HTML.
- All design properties, layout rules, and states are targeted exclusively via class or ID selectors.
- HTML stays semantic and styling-agnostic: re-theming the page must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens (Light Mode — Default)**
Use exactly these mandatory tokens, seeded with the Scandinavian palette. Note two explicit exceptions to the source spec: the source's `#ffffff` surface is replaced with `#fefefe` (near-white rule), and the source's plain component classes are reorganized into the layered/BEM system required below.

```css
:root {
  /* color */
  --bg-primary: #f7f4ef;       /* warm off-white page background — never pure white */
  --bg-secondary: #efe9e1;    /* warm sand surface */
  --bg-surface: #fefefe;      /* card surface */
  --text-primary: #2b2b2b;
  --text-secondary: #6f6a63;
  --primary: #3a5a40;          /* forest green */
  --primary-contrast: #fefefe;  /* text on primary fills */
  --secondary: #a8c5d6;        /* muted sky — decorative fills, pair with dark text */
  --accent: #c98a6a;           /* terracotta — decorative fills, icons, borders only */
  --accent-text: #96543a;      /* contrast-safe accent for text/links */
  --wood: #d8b8a0;             /* decorative */
  --text-success: #3a6b47;
  --text-error: #b04a3a;
  --border-default: #e4ddd2;   /* hairline */
  --border-success: #3a6b47;
  --border-error: #b04a3a;
  /* radius & shadow */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(43,43,43,0.05);
  --shadow-md: 0 6px 20px rgba(43,43,43,0.08);
  /* spacing, motion, elevation */
  --spacing-gap: 24px;
  --transition-fast: 120ms; --transition-normal: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
  /* type */
  --font-base: 'Poppins', 'Work Sans', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --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: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px;
}
```

- **Contrast pairing is mandatory per theme:** every light background token pairs with dark text tokens, every dark background token pairs with light text tokens. `--accent`, `--secondary`, and `--wood` are never used as text colors on light backgrounds — use `--accent-text` for accent-colored text.
- No hardcoded hex values inside component rules; hex lives only in token definitions.

**1.3 Mandatory Dark Mode Support**
The source specification does not declare color modes and requires validation in both light and dark before publishing — therefore dark mode is **mandatory**, using these required warm-charcoal tokens (never pure black):

```css
html.dark {
  --bg-primary: #201e1b; --bg-secondary: #2a2723; --bg-surface: #262420;
  --text-primary: #f1ece3; --text-secondary: #a9a29a;
  --primary: #a5c3a5;          /* sage, lightened for dark surfaces */
  --primary-contrast: #1e2b20;
  --secondary: #a8c5d6; --accent: #d4a183; --accent-text: #d4a183; --wood: #b3947f;
  --text-success: #a5c3a5; --text-error: #e29a8a;
  --border-default: #3b372f; --border-success: #a5c3a5; --border-error: #e29a8a;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
}
```

- Replicate this dark block under `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)` so system-preference users render correctly before JS runs (no FOUC), and under `html.dark` for explicit overrides.
- Provide a **visible theme toggle** in the header (Material Symbols `light_mode` / `dark_mode`): correct `aria-pressed` state, dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode"), persistence via `localStorage` (e.g., key `theme`), falling back to `prefers-color-scheme` on first visit. Switching must require zero HTML restructuring — tokens only.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`**; deviations (e.g., `align-items: stretch` for equal-height card rows) are permitted only as explicitly justified exceptions, marked with a CSS comment.
- Mobile-first: rows collapse to columns below ~768px; prevent horizontal overflow at every viewport ≥320px through `flex-wrap` and `min-width: 0` — never by clipping with `overflow-x: hidden`.

**1.5 Framework Default & Tailwind CSS Integration**
- Use clean custom CSS organized in Tailwind-style cascade layers: declare `@layer tokens, base, components, sections, utilities;` at the top of `style.css`. (Tailwind itself is optional; if used, every utility must resolve back to the CSS variables.)
- Expose reusable component classes — `.btn`, `.card`, `.input-group`, `.badge`, `.nav` — that consume only tokens.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Google Fonts** via `<link>` with `preconnect`: **Fraunces** (display serif — all headings) and **Poppins** (body/UI, Work Sans fallback). Bind them to `--font-display` and `--font-base`. No local fonts.
- Icons: **Google Material Symbols (Rounded variant)** via CDN `<link>`. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.** Use only valid symbol names (e.g., `eco`, `chair`, `spa`, `coffee`, `forest`, `check`, `star`, `expand_more`, `arrow_forward`, `menu`, `close`, `mail`, `light_mode`, `dark_mode`). Material Symbols has no brand logos — render social links as text links or generic icons with accessible names.

**1.7 Scandinavian Mood & Signature Visual Effects**
- Hygge aesthetic: generous whitespace (`--space-6`–`--space-12` section rhythm), hairline borders (`--border-default`), soft elevation, organic rounded corners, muted natural tones. No harsh gradients, no neon, no pure black.
- Signature effects: **frosted header** (semi-transparent `--bg-surface` + `backdrop-filter: blur(12px)`), soft shadows, hover lifts (`translateY(-2px)` + `--shadow-md`), tinted icon chips (`--bg-secondary` circles with `--primary` icons), fluid `clamp()`-based type mapped to the `--text-*` scale.

---

## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — all states as CSS classes (JS toggles classes/attributes only):
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-display` 700.
- **Hover:** brightness/shadow shift, `cursor: pointer`. **Focus-visible:** distinct ring using `--accent` (2px outline, 2px offset). **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** interactions disabled, double-clicks prevented, spinning Material `progress` icon via CSS rotation, button dimensions unchanged (no layout shift).
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success/Error (`.is-success` / `.is-error`):** feedback driven by `--text-success` / `--text-error` with check/error icons.
- Variants (BEM): `.btn--primary` (`--primary` bg + `--primary-contrast` text), `.btn--ghost` (`--bg-surface` + hairline border), `.btn--accent`, and `.btn--danger` (muted brick red, visually distinct in **both** themes).

**2.2 Card Component Requirements**
- **Default:** flex column, `--bg-surface`, hairline border, `--radius-md`/`--radius-lg`, `--shadow-sm`.
- **Hover:** elevation shift + `translateY(-2px)`. **Focus-within:** border shifts to `--primary` when a child link/button is focused.
- **Loading (skeleton):** define `.skeleton` shimmer keyframes in CSS (surface-2 blocks matching final dimensions — no layout jumps). **Empty state:** define `.card--empty` — centered Material icon + clear guidance text.

**2.3 Form & Input Requirements** (newsletter signup in the Final CTA)
- Structure: flex-column `.input-group` = `<label>` + `<input type="email" autocomplete="email">` + dedicated error feedback container.
- States via classes: empty, focused (2px `--primary` outline ring), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon, `aria-invalid="true"`, message linked via `aria-describedby`, announced in an `aria-live="polite"` region), disabled, read-only.
- Real validation in `script.js` (`novalidate` + custom logic); submit → button loading (~1.2s simulated) → success state with inline confirmation. No `alert()`/`confirm()`.

**2.4 FAQ Accordion Requirements**
- Each item: `<h3><button aria-expanded aria-controls></button></h3>` + panel with `role="region"` + `aria-labelledby`; `expand_more` icon rotates 180° on open; height animates via CSS (`grid-template-rows: 0fr → 1fr`) with `--transition-normal`; fully keyboard operable; first item open by default; instant toggle under reduced motion.

**2.5 Modal / Popup Requirements** (only if a dialog genuinely serves the design, e.g., plan details)
- `role="dialog" aria-modal="true" aria-labelledby`; backdrop overlay; centered flex container (`align-items: center`); open/close animated via CSS classes; focus trapped inside and returned on close; closes via `Esc` and overlay click; layered at `--z-modal`; Google icon close button; loading/success/error states for any async content.

**2.6 Pricing Billing Toggle Requirements**
- Segmented Monthly/Yearly control built as a `<fieldset>` + `<legend>` with two styled radio inputs (keyboard-native); price text swaps with a `--transition-fast` fade; the change is announced via a polite `aria-live` region; yearly state shows a "Save 20%" badge.

**2.7 Page Section Blueprint**
- **Global:** semantic landmarks (`header`, `nav`, `main`, `section`, `footer`); exactly one `<h1>` (Hero); each section has an `<h2>` and `aria-labelledby` + anchor id (`#features`, `#how-it-works`, `#pricing`, `#faq`) with `scroll-margin-top` for the sticky header; a visually hidden "Skip to content" link; smooth scrolling disabled under reduced motion.
- **Header/Nav:** sticky, frosted blur; brand wordmark in Fraunces; links to Features, How It Works, Pricing, FAQ; theme toggle; primary CTA. Mobile: links collapse into a hamburger (`menu`) opening a panel at `--z-dropdown` with `aria-expanded`, closing on link click and `Esc`.
- **Hero:** two-column flex (stacks on mobile): eyebrow `.badge`, `--text-5xl` Fraunces headline, supporting paragraph in `--text-secondary`, `.btn--primary` + `.btn--ghost` pair, trust row (star icons + text, never icon-only). Right column: imagery via `https://picsum.photos/seed/<descriptive-seed>/800/640` with meaningful `alt`, `--radius-lg`, hairline border, `--shadow-md`, fixed `aspect-ratio` (no layout shift) — or a CSS-composed layered visual in wood/sky/sand tones.
- **Features (3 cards):** flex-wrap row, equal height (documented stretch exception); each card: Material icon chip, `<h3>`, description (e.g., sustainable materials / functional timeless design / everyday calm). Hover lift + focus-within per 2.2.
- **How It Works (3 steps):** numbered 01/02/03 with a hairline connector on desktop (hidden on mobile), step icon, `<h3>`, text.
- **Testimonials (3):** quote cards with `figure`/`blockquote`/`cite`, star row (`star` icons `aria-hidden` + visually hidden "Rated 5 out of 5" text), avatar (CSS initials circle in tinted tones or picsum seed), name + role.
- **Pricing (3 tiers):** plausible prices (e.g., Essential / Classic / Complete); middle tier featured — `--primary` bg with `--primary-contrast` text and a "Most popular" `.badge` (`--accent` bg + `--text-primary`, contrast-checked in both themes); feature lists with `check` icons; per-tier CTA; billing toggle per 2.6.
- **FAQ:** 5–6 real Q&As (shipping, materials, returns, sustainability, billing) per 2.4.
- **Final CTA:** full-bleed band on `--primary` with light text (contrast pairing), Fraunces headline, inline email form per 2.3 (flex row → column on mobile) with loading → success feedback announced via `aria-live`.
- **Footer:** `--bg-secondary` band; brand + tagline; secondary link groups (Product, Company, Support) as flex-wrap columns; social text links with `aria-label`s; bottom bar with copyright and Privacy/Terms links. Every link is a real, focusable anchor.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` type, flex-wrap everywhere, zero horizontal overflow from 320px up.
- **Smooth animations:** every state change transitions with `var(--transition-normal)` / `var(--transition-fast)` and `var(--ease-standard)`; under `prefers-reduced-motion: reduce`, disable transitions/animations (spinner → static "Loading…" label, shimmer → opacity pulse, accordion instant).
- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes (≥4.5:1 body text, ≥3:1 large text/UI); never rely on color alone — pair color with icons, text, or borders; semantic HTML5; correct ARIA roles/labels on all custom widgets; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback, price changes, and loading states; visible `:focus-visible` rings on all interactive elements.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change. No dead buttons — anchors scroll, forms validate, toggle switches.
- **Destructive actions:** `.btn--danger` must be visually distinct in both themes (define it even if unused).
- No console errors, no broken links or images, no layout shift; simulate async operations with `setTimeout` — never real network posts.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. The HTML contains exactly one script reference: `<script src="script.js" defer></script>`. Zero inline styles, zero additional inline scripts. `<html lang="en">` with title, meta description, and viewport meta.
- **Naming convention:** BEM everywhere (`.card`, `.card__title`, `.card--featured`, `.btn--primary`); never mix conventions.
- **CSS organization:** `@layer tokens → base → components → sections → utilities`; tokens at the top.
- **Copy:** all user-facing text in English, real and on-brand (calm, warm, plain-spoken hygge tone — e.g., "Soft living, made simple."). Lorem ipsum is prohibited. Photographic placeholders are permitted only via `picsum.photos` with descriptive seeds, `alt` text, `loading="lazy"` for below-the-fold images, and fixed aspect ratios.
- **Output:** the complete code for all three files in one response, on the first attempt — no TODOs, no placeholders where real copy is required, no external JS dependencies beyond Google Fonts and Material Symbols. Before finishing, self-validate both light and dark modes (toggle behavior, persistence, contrast) as the source specification requires.