Minimalism demo
Minimalism

A stripped-down visual style rooted in 1960s minimal art and Dieter Rams' functionalism, emphasizing generous whitespace, neutral colors, and essential elements as popularized digitally by Apple and Google.
Category: Minimalism & Swiss
Era: 2010s Modern
Prompt: 7.0 KB · 895 words
# System Prompt: Build a Minimalism-Themed Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Minimalism** (`claude-artisan/minimal-organic`). Sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in a dedicated `style.css`. **Forbidden:** the `style="..."` attribute anywhere in HTML.
* All design properties, layout rules, and states are targeted via class selectors only.
* HTML stays semantic and clean (`<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`); changing the look must never require touching markup.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` using the Minimalism palette:

* **Colors:** `--color-bg: #ffffff`, `--color-surface: #ffffff`, `--color-surface-2: #fafafa`, `--color-text: #111111`, `--color-text-muted: #767676`, `--color-primary: #111111`, `--color-accent: #111111`, `--color-border: #e6e6e6`. Additionally define `--text-success`, `--text-error`, `--border-error`, `--border-success` for feedback states.
* **Contrast pairing:** every light background token pairs with `--color-text` (#111111); dark surfaces pair with light text (#fefefe — never `#ffffff` for text on dark).
* **Radius:** `--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px`.
* **Shadows:** `--shadow-sm: 0 1px 2px rgba(0,0,0,0.04)`; define `--shadow-md` as a subtle elevation.
* **Spacing:** `--space-1: 8px` through `--space-24: 192px` (8/16/24/32/48/64/96/128/192).
* **Typography:** `--text-xs` through `--text-5xl` (0.75rem → 4rem); `--font-sans` and `--font-display` both bound to Inter.
* **Transitions:** `--transition-fast: 120ms`, `--transition-normal: 240ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Hairline:** `--hairline: 1px solid #e6e6e6` — the signature minimal border.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`: `--color-bg: #111111`, `--color-surface: #161616`, `--color-surface-2: #1c1c1c`, `--color-text: #fefefe`, `--color-text-muted: #9a9a9a`, `--color-primary: #fefefe`, `--color-accent: #fefefe`, `--color-border: #2a2a2a`.
* Include a visible theme toggle button (Google Material Symbols icon: `dark_mode`/`light_mode`) in the nav with correct `aria-pressed` and `aria-label`.
* Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. No HTML restructuring may be needed to switch themes.

**1.4 Flexbox Layout & Mobile-First**
* Every flex container defaults to `align-items: center` unless an exception is justified in a CSS comment.
* Mobile-first: Hero stacks vertically, pricing tiers and feature cards become a single column, nav collapses gracefully — all below 768px. **No horizontal scrolling at any viewport width.**

**1.5 Framework**
* Use plain CSS driven by the token classes above (`.btn`, `.card`, `.nav`, `.input`, `.badge`). If you use Tailwind, map every utility back to these CSS variables via `@layer`/`@apply`. One consistent naming convention (BEM: `.btn--primary`, `.card--feature`) — never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Inter** via Google Fonts `<link>`; bind to `--font-sans` and `--font-display`.
* All icons via **Google Material Symbols** (`<span class="material-symbols-outlined">check</span>`). **Forbidden:** raw inline SVGs and local icon files.
* Minimalism is carried by typography: use `--text-4xl`/`--text-5xl` display headlines, generous `letter-spacing: -0.02em`, muted `--text-lg` body copy, and extreme whitespace (`--space-12`–`--space-24` between sections).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.
* Hover: `filter: brightness(0.96)` + `translateY(-1px)`, `cursor: pointer`.
* Focus: `outline: 2px solid var(--color-accent); outline-offset: 2px` on `:focus-visible`.
* Active: `transform: scale(0.97)`.
* Loading: class `.btn--loading` disables interaction, swaps label for a CSS spinner, preserves button dimensions.
* Disabled: `opacity: 0.5; cursor: not-allowed`.
* `.btn--primary`: `background: var(--color-primary); color: #ffffff` (light) / `#111111` (dark). `.btn--danger` must be visually distinct in both themes.

**2.2 Cards (Features, Pricing, Testimonials)**
* Default: flexbox layout, `background: var(--color-surface)`, `border: var(--hairline)`, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`.
* Hover: `translateY(-2px)` + shadow shift to `--shadow-md`.
* `:focus-within`: border highlights when a child link/button is focused.
* Skeleton: shimmer animation class for async content.
* Empty state: Google Icon + guidance text.

**2.3 Forms (FAQ search, newsletter signup in Final CTA/Footer)**
* Flex container: label, input, dedicated error container.
* States: empty, focused (outline ring), filled, valid (success border), invalid (`--border-error`, red helper text, error icon), disabled, read-only.
* `.input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }`

**2.4 FAQ Accordion (as modal-like overlay pattern)**
* Animated open/close via CSS transitions (`max-height`/`grid-template-rows`), Google Icon `expand_more` rotating 180°, keyboard operable (`<button>` triggers, `aria-expanded`, `aria-controls`), Esc closes, `aria-live` announcements for state changes.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography, no overflow.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; wrap transforms in `@media (prefers-reduced-motion: reduce)` to disable them.
* **Accessibility:** WCAG-AA contrast in both light and dark modes; never rely on color alone (pair icons/text with states); semantic HTML5; logical focus order; full keyboard operability; `aria-live` regions for form feedback.
* **Visual feedback:** every click, hover, and submission triggers a visible state change.
* **Minimalism discipline:** every element earns its place — no decorative clutter, monochrome palette, whitespace does the heavy lifting (Apple product pages / Dieter Rams / Google homepage as references).

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` beyond one deferred entry-point `<script src="script.js" defer></script>`.
* **Sections in order:** Hero → Features (3 cards) → How It Works (3 numbered steps) → Testimonials → Pricing (3 tiers, middle tier highlighted with `.badge`) → FAQ → Final CTA → Footer with secondary links.
* **Copy:** write all user-facing copy in **English**, real (non-lorem) marketing copy consistent with a minimalist product brand.
* **No unrequested placeholders**; no lorem ipsum.
* Generate the complete final code immediately.