Serene Wellness Minimalism demo
Serene Wellness Minimalism

A calm, minimalist design with generous whitespace, soft neutral tones, and clean typography tailored for meditation and wellness apps.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 19.3 KB · 2575 words
**SYSTEM PROMPT — LANDING PAGE BUILD: "SERENE WELLNESS MINIMALISM" (Meditation & Wellness App "Serena")**

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — no partial builds, no follow-up questions. All user-facing copy must be written in **English**.

---

## 1. PROJECT BRIEF & THEME DIRECTION

**1.1 Theme Identity**
- **Name:** Serene Wellness Minimalism (translated from "Minimalismo Sereno de Bem-Estar")
- **Type:** Calm, Minimalist, Serene
- **Keywords:** meditation, wellness, calm, minimalist, serene, peaceful, intuitive, mindful, health, balanced
- **Era:** 2026+ Digital Wellness
- **Output Category:** Minimalism & Swiss
- **Visual Direction (translated from source spec):** Airy layouts with abundant white space, soft rounded typography, minimalist nature illustrations, subtle background animations (waves, clouds), tactile feedback micro-interactions, fluid and relaxing transitions — a serene and balanced feel for a meditation and wellness app.

**1.2 Design Language**
- Swiss-minimal discipline: strict alignment, restrained decoration, clear typographic hierarchy, generous negative space — softened by rounded typography, soft radii, pastel tints, and slow, gentle motion.
- Airy rhythm: section padding `clamp(4rem, 10vw, 7.5rem)`, content max-width `72rem` centered, generous gaps (`--spacing-gap`).
- **No raster photography and no inline SVG anywhere.** All visuals are composed from CSS shapes/gradients and Google Material Symbols.

**1.3 Copy Direction**
- App name: **Serena**. Tagline: "Find your calm."
- Tone: warm, quiet, second-person, concise. No jargon, no urgency tricks, no lorem ipsum — write real English copy for every section.

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css` only. The `style="..."` attribute is **forbidden**.
- Target everything via class/ID selectors. HTML stays semantic and style-agnostic — restyling must require CSS edits only.
- Inline event handlers (`onclick`, etc.) are forbidden; use `addEventListener` in `script.js` only.

**2.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` (light) and override in `.dark`:
- **Colors:** `--primary: #A8DADC` (Soft Aqua), `--secondary: #87CEEB` (Sky Blue), `--bg-primary: #FDF6E3` (Light Beige — the serene page base; never pure white), `--bg-secondary: #fefefe` (near-white surfaces), `--text-primary: #333333`, `--text-secondary: #5C6B6A`, `--text-success: #2E7D5B`, `--text-error: #B3453C` (muted terracotta, not harsh red), `--border-default: #E0E0E0`, `--border-success: #98FB98`, `--border-error: #B3453C`.
- **Accent tints:** `--tint-lavender: #E6E6FA`, `--tint-mint: #98FB98`, `--tint-tan: #D2B48C` — used at low opacity for illustration shapes, icon circles, badges, and the footer wash.
- **Contrast pairing (mandatory in every theme):** light backgrounds pair with dark text, dark backgrounds with light text. Add `--text-on-primary: #2F4858` for text placed on aqua/sky surfaces. Never use `--primary`/`--secondary` as text color on light backgrounds (fails AA) — they are surface/accent colors only. Where palette colors are too light for text (e.g., `#98FB98`, `#87CEEB`), reserve them for tints/borders and use the darker text-safe derivatives above.
- **White substitution:** the palette's `#FFFFFF` is replaced by `#fefefe` everywhere per architecture; pure `#ffffff` is forbidden.
- **Radius & Shadows:** `--radius-sm: 6px`, `--radius-md: 8px` (per source spec), `--radius-lg: 20px`, `--radius-full: 999px`; `--shadow-sm: 0 1px 3px rgba(0,0,0,0.03)` (per source spec), `--shadow-md: 0 8px 24px rgba(0,0,0,0.07)`.
- **Spacing & Transitions:** `--spacing-gap: 1.5rem`; `--transition-fast: 0.2s ease-in-out`, `--transition-normal: 0.4s ease-in-out` (per source spec), `--ease-standard: ease-in-out`.
- **Elevation:** `--z-header: 50`, `--z-dropdown: 100`, `--z-modal: 400`, `--z-toast: 500`.
- **Typography:** `--font-base: "Nunito", sans-serif`.

**2.3 Mandatory Dark Mode Support**
- Dark tokens must be defined under both `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>`: `--bg-primary: #14201E` (deep serene green-charcoal — never pure black), `--bg-secondary: #1D2B28`, `--text-primary: #EAF3F0`, `--text-secondary: #A7BDB8`, `--text-success: #98FB98`, `--text-error: #E5837A`, `--border-default: #31443F`, deeper shadows. `--primary`/`--secondary` stay light; `--text-on-primary` stays dark ink.
- Theme switching swaps variables only — no HTML restructuring. Persist choice in `localStorage` (key `serena-theme`), fall back to `prefers-color-scheme` on first visit, and provide a visible toggle with correct `aria-pressed`/`aria-label` state.
- **Exception clause:** the source specification marks this theme "Light: Full / Dark: No," but dark mode is a mandatory architectural requirement — implement the full serene dark variant (soft deep tones, no pure black) with toggle and persistence; light mode is the default presentation mood.

**2.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout container with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (permitted exceptions: equal-height card rows use `stretch`; the mobile modal sheet uses `flex-end`).
- Mobile-first: rows collapse to columns below `48rem`; grids collapse below `64rem`. Fluid type via `clamp()`. **No horizontal scrolling at any viewport width down to 320px.**

**2.5 Framework Decision**
- Use **clean, hand-authored custom CSS** — the source specification supplies bespoke CSS classes and raw values, which constitutes the framework request. No Tailwind, no libraries, no build step.
- Organize `style.css` with native CSS `@layer` in this order: `tokens`, `base`, `components`, `utilities`. All reusable styling maps to generic class names (`.btn`, `.card`, `.input-group`, etc.) — never one-off selectors.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- Load **Nunito** (weights 300–800) from Google Fonts via `<link>` with `preconnect`; bind to `--font-base`. Soft feel: body weight 400 with `line-height: 1.7`; headings weight 600–700; hero H1 `clamp(2.25rem, 1.5rem + 3vw, 3.5rem)`; H2 `clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem)`; eyebrows `0.8125rem`, uppercase, `letter-spacing: 0.12em`, weight 700.
- Icons: **Google Material Symbols Rounded** via `<link>`. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.
- Illustrations: minimalist nature scenes (`.illustration-minimal`) are built purely from CSS shapes (circles, `border-radius` blobs, gradients) and oversized low-opacity Material Symbols (`cloud`, `water_drop`, `spa`, `forest`, `self_improvement`) — no SVG, no images.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons** (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-ghost`, `.btn-danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, padding `0.8rem 1.75rem`, `border-radius: var(--radius-full)`, weight 600, `transition: var(--transition-fast)`.
- **Primary:** background `var(--primary)`, color `var(--text-on-primary)`. **Outline/ghost:** transparent with `var(--border-default)` border.
- **Hover:** brightness lift + `var(--shadow-sm)` (primary) or border/tint shift (outline), `cursor: pointer`.
- **Focus-visible:** distinct ring — `outline: 2px solid var(--secondary); outline-offset: 3px` — visible in both themes.
- **Active:** `transform: scale(0.97)` — the theme's tactile feedback.
- **Loading (`.is-loading`):** block interaction and double-clicks (`pointer-events: none`, `aria-busy="true"`), render a CSS border-spinner (or rotating `progress_activity` symbol) sized to the button text — button dimensions must not change.
- **Disabled:** `opacity: 0.5`, `filter: grayscale(0.6)`, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback tinted by `--text-success`/`--text-error` with a `check`/`error` symbol.
- **`.btn-danger`:** muted terracotta, visually distinct in both themes (define even if unused on this page).

**3.2 Cards** (`.feature-card`, `.step-card`, `.testimonial-card-soft`, `.pricing-card`)
- **Default:** flex column, background `var(--bg-secondary)`, `1px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, padding `2rem` (1.5rem on mobile).
- **Hover:** `transform: translateY(-2px)` + shift to `var(--shadow-md)`, `transition: var(--transition-normal)`.
- **Focus-within:** border color shifts to `var(--secondary)` when a child link/button is focused.
- **Loading (skeleton):** define `.card-skeleton` with a CSS shimmer (gradient sweep keyframes, 1.6s infinite) and block placeholders — apply to testimonial cards for a brief 800ms first-load reveal (JS enhancement; without JS, content shows immediately).
- **Empty state:** define `.card-empty` — centered Material Symbol at low opacity plus `--text-secondary` guidance text.

**3.3 Forms & Inputs** (`.input-group`, `.input`, `.input-feedback`)
- **States:** empty, focused (`border-color: var(--secondary)` + `box-shadow: 0 0 0 3px` ring), filled, valid (`.is-valid`: success border + `check` icon), invalid (`.is-invalid`: error border, `error` icon, message in `--text-error` — icon + text, never color alone), disabled, read-only. Min input height 44px, `border-radius: var(--radius-md)`.
- **Structure:** flex column wrapping a `<label for>`, the input, and a dedicated error container with `aria-live="polite"` and reserved min-height (`1.25rem`) to prevent layout shift. Toggle `aria-invalid` on validation.

**3.4 Modal / Dialog (conditional — apply if any overlay is introduced)**
- **States:** opening, open, loading, success/error, closing — all animated via CSS (`opacity` + `scale(0.97 → 1)`, `0.3s var(--ease-standard)`).
- **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop `rgba(20,32,30,0.45)` with `backdrop-filter: blur(4px)`, Material Symbol `close` button, keyboard focus trapping with focus return, close via `Esc` and overlay click, `role="dialog"` + `aria-modal`, body scroll lock, `z-index: var(--z-modal)`. Below `30rem`, becomes a bottom sheet (`align-items: flex-end` exception, top-only radius).

**3.5 Accordion (FAQ)**
- Use native `<details>/<summary>` for zero-JS accessibility; style `summary` as the question row (flex, space-between, `align-items: center`, padding `1.25rem`, hover tint, focus-visible ring), chevron `expand_more` rotating 180° on `[open]`, content fading/sliding in via CSS transition. JS may enforce single-open behavior only.

**3.6 Toasts** (`.toast`, `.toast-container`)
- Fixed container, bottom-right (bottom full-width inset on mobile), `z-index: var(--z-toast)`, `role="status"` + `aria-live="polite"`. Toast: flex row, icon (`check_circle`/`error`), message, close button; slide/fade entrance via CSS; auto-dismiss after 4s; success and error variants.

---

## 4. PAGE SECTION SPECIFICATIONS (build in this order)

**4.0 Header (site chrome — required for the theme toggle)**
- Sticky, `z-index: var(--z-header)`, translucent `var(--bg-primary)` + `backdrop-filter: blur(10px)`, bottom border. Inner flex row, space-between, `align-items: center`, height `4rem`.
- Logo: `spa` symbol in an aqua circle + "Serena" wordmark. Nav anchors: Features, How It Works, Testimonials, Pricing, FAQ — `html { scroll-behavior: smooth; scroll-padding-top: 5rem; }`.
- Theme toggle: 44px icon button with `light_mode`/`dark_mode` symbols (swapped via CSS on `.dark`), `aria-pressed` reflecting dark state, dynamic `aria-label`, per Section 2.3.
- Below `48rem`: hamburger (`menu` symbol, `aria-expanded`) opens a dropdown panel (`z-index: var(--z-dropdown)`, animated, closes on link click and `Esc`).

**4.1 Hero**
- Two-column flex ≥ `48rem` (copy + illustration, `align-items: center`), stacked below.
- Copy: eyebrow pill "Mindfulness, made simple"; H1 "Find your calm, one breath at a time."; subcopy introducing Serena; primary CTA "Start free trial" (`arrow_forward`) + ghost CTA "See how it works" (anchor); trust line with `star` icon: "4.8 · Loved by 12,000+ calm seekers".
- `.hero-animation-subtle` (class name mandatory, per source spec): absolute ambient layer — 2–3 drifting cloud blobs (white/lavender, 45–60s loops), two slow wave layers at the bottom (aqua/mint tints, 18s alternate), a soft tan sun circle. Animate `transform`/`opacity` only.
- `.illustration-minimal` (mandatory class): pure-CSS nature scene — layered hill ellipses (aqua/mint/lavender tints), clouds, a tan sun, concentric ripple circles, and a centered `self_improvement` symbol inside a soft circle, gently floating (`translateY ±6px`, 7s alternate).

**4.2 Features — 3 cards**
- Section header pattern (used throughout): eyebrow + H2 + subcopy, left-aligned. H2: "Everything you need to slow down."
- Flex row of 3 `.feature-card` ≥ `64rem`, column below. Each: 56px tinted icon circle (aqua/lavender/mint), symbol, H3, body in `--text-secondary`.
- Copy: **Guided Meditations** (`self_improvement`) — "Breathe through 5-minute sessions or deep 40-minute journeys, tailored to your mood."; **Sleep Support** (`bedtime`) — "Drift off to sleep stories and soundscapes that quiet a busy mind."; **Mindful Habits** (`balance`) — "Gentle streaks, breathing exercises, and daily check-ins that encourage without pressure."

**4.3 How It Works — 3 steps**
- H2: "A calmer you in three gentle steps." Three `.step-card`s with numbered chips (01/02/03, tan tint), a horizontal dashed CSS connector line behind them ≥ `64rem` (vertical dashed line on mobile).
- Steps: **Set your intention** (`tune`) — "Answer three simple questions so Serena shapes sessions around you."; **Breathe daily** (`spa`) — "Press play on short, guided practices that fit any moment."; **Grow gently** (`trending_up`) — "Watch your calm deepen with soft progress tracking — no pressure, no guilt."

**4.4 Testimonials — 3 cards**
- H2: "Loved by people learning to breathe." Three `.testimonial-card-soft` (mandatory class): alternating pastel tints over `--bg-secondary`, `format_quote` symbol, English quote, divider, 44px CSS-circle avatar with initials, first name + role, five `star` symbols.
- Copy: Maya (new parent), Daniel (software engineer), Priya (yoga teacher) — calm, specific, one sentence each. Apply the Section 3.2 skeleton reveal here.

**4.5 Pricing — 3 tiers**
- H2: "Choose your pace." Sub: "Start free. Grow when it feels right." Three `.pricing-card`s; middle `.pricing-card-featured`: 1.5px aqua border, `--shadow-md`, absolute "Most popular" pill badge.
- Tiers: **Calm** — $0 (3 daily sessions, breathing exercises, gentle streaks; outline CTA "Start free"); **Balance** — $9/mo, featured (everything in Calm, full library, sleep stories, offline listening; primary CTA "Start 7-day free trial"); **Serenity** — $17/mo (everything in Balance, live group sessions, 2 seats, priority support; outline CTA "Choose Serenity").
- Feature lists: `check` symbol in success tone for included; muted `close` symbol for excluded (icon difference, not color alone). Clicking any tier CTA triggers the loading state for ~1.2s, then success state + toast ("Your free trial has started — welcome to Serena."). Footnote: "Prices in USD. Cancel anytime — no questions, no guilt."

**4.6 FAQ**
- Two columns ≥ `64rem`: left heading block (eyebrow "FAQ", H2 "Questions, answered softly", support link), right accordion (Section 3.5), max-width `40rem`.
- Five Q&As in English: beginner-friendliness, the free plan, offline use, data privacy, cancellation.

**4.7 Final CTA**
- Full-width band: soft gradient (aqua → lavender → mint tints) inside a `--radius-lg` container, centered flex column, `align-items: center`. H2: "Your calm is one breath away." Sub: "Join 12,000+ people building a softer relationship with their minds."
- Email capture per Section 3.3: `.input-group` (visually-hidden label, placeholder "you@example.com") + primary button "Begin your journey"; flex row ≥ `30rem`, stacked below. On valid submit: loading → success state (`check` + "Welcome in"), toast confirmation, `aria-live` feedback. Microcopy: "Free 7-day trial · No credit card · Cancel anytime."

**4.8 Footer (secondary links)**
- Soft tan-tinted wash + top border. ≥ `48rem`: flex row — brand column (logo, mission line "Technology that helps you put the phone down — softly.") plus three link columns: **Product** (Features, Pricing, FAQ), **Company** (About, Contact, Careers), **Support** (Help Center, Privacy Policy, Terms of Service). Links: `--text-secondary`, hover to `--text-primary` with underline offset, focus-visible rings; `href="#"` stubs are acceptable here as genuinely unspecified destinations.
- Bottom bar, flex space-between, `align-items: center`: "© 2026 Serena. All rights reserved." (year auto-updated via JS) · "Made with calm." · back-to-top icon link (`arrow_upward`, `aria-label="Back to top"`).

---

## 5. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** mobile-first; breakpoints `30rem` / `48rem` / `64rem`; fluid `clamp()` sizing; zero horizontal overflow.
- **Smooth animations:** every state change transitions via `--transition-fast`/`--transition-normal`; ambient loops are slow (18s+) and `transform`/`opacity` only. Under `prefers-reduced-motion: reduce`: disable ambient loops and reveals, reduce transitions to near-zero, `scroll-behavior: auto`.
- **Accessibility:** WCAG AA contrast in both themes; never communicate state by color alone; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, one `h1`, logical heading order); correct ARIA on the toggle, mobile menu, accordion, toasts, and form errors; logical DOM/focus order; full keyboard operability with always-visible focus; `aria-live` regions for all dynamic feedback (form errors, toasts, loading).
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change (button press scale, card lift, chevron rotation, toast, form states).
- **Scroll-reveal (enhancement):** IntersectionObserver adds `.is-visible` for gentle fade-up on section entries — content is visible by default without JS.

---

## 6. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. `index.html` head includes: meta viewport + description, title "Serena — Find your calm", Google Fonts (Nunito) and Material Symbols Rounded links, and exactly one external script reference: `<script src="script.js" defer>`. No inline `<script>`, no inline styles, no inline handlers.
- **script.js (vanilla, no dependencies):** theme init/toggle/persistence, mobile menu, FAQ single-open nicety, email validation + states + toast, pricing CTA loading/success demo, testimonial skeleton reveal, scroll-reveal, footer year. Every feature degrades gracefully.
- **Naming convention:** one fixed semantic kebab-case class set matching the source spec's pattern — `.hero-animation-subtle`, `.illustration-minimal`, `.testimonial-card-soft` must appear verbatim — with state classes using the `.is-` prefix (`.is-loading`, `.is-open`, `.is-visible`, `.is-valid`, `.is-invalid`). Never mix BEM `__`/`--` notation.
- **Source spec compliance:** honor `color: #333333`, `box-shadow: 0 1px 3px rgba(0,0,0,0.03)`, `border-radius: 8px`, `font-family: "Nunito", sans-serif`, and `0.4s ease-in-out` transitions as the standard timing.
- **No unrequested placeholders:** write real English copy for every section listed in Section 4; lorem ipsum is prohibited.
- **Output:** generate the final, complete code for all three files immediately in your first response.