That Girl / Clean Girl demo
That Girl / Clean Girl

A soft, aspirational wellness-lifestyle aesthetic built on clean neutral palettes, minimal layouts, and fresh self-care imagery popularized by TikTok subcultures.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 13.0 KB · 1787 words
# CODING-AI BUILD PROMPT — "That Girl / Clean Girl" 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, tasteful choices within this specification.

**Theme:** That Girl / Clean Girl (2021–present wellness lifestyle aesthetic) — airy neutrals (beige, white, sage), minimal and clean, aspirational wellness, matcha/journaling/gym culture, soft serif display + clean sans body, generous whitespace, ultra-soft shadows instead of loud borders. Nothing shouts.

**Product concept (write ALL copy yourself in this voice):** Brand the page as **"Rise"** — a clean-girl routine app (gentle habit tracking, guided journaling, morning/matcha rituals, movement). Copy is calm, aspirational, second-person English ("Become her."). **Lorem ipsum is forbidden** — write real, finished copy for every section.

**Sections (in this order):** Sticky Navigation → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks in HTML, and presentational HTML attributes.
- Target everything via class/ID selectors. HTML must remain semantic and style-agnostic — a re-theme requires touching only `style.css`.
- Use clean custom CSS (no framework was requested). Organize the file: tokens → base/reset → components → sections. All reusable classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`) must map back to CSS variables — never hardcode hex values in component or section rules.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (light) and override in `.dark` (see 1.3). Required names and light-mode values:

- **Colors:** `--primary: #9caf88` (sage), `--secondary: #c99f7a` (warm tan), `--bg-primary: #f7f3ec` (page), `--bg-secondary: #fefefe` (card surface — **required adjustment:** the source spec's `#ffffff` surface must be `#fefefe` per near-white rule), `--text-primary: #4a4238`, `--text-secondary: #8a7f6d`, `--text-success: #4f6b3d`, `--text-error: #ad4a38`, `--border-default: #e4dcc9`, `--border-error: #d99585`, `--border-success: #cdd9c0`.
- **Supplementary theme tokens (keep from source spec):** `--surface-strong: #f0ebe1`, `--text-on-primary: #232a1c`, `--air-wash: linear-gradient(180deg, #fbf9f4 0%, #f7f3ec 100%)`, `--sage-ring: 0 0 0 3px rgba(156,175,136,0.18)`, `--font-base: 'Inter'`, `--font-display: 'Fraunces'`.
- **Contrast pairing (mandatory, both themes):** light backgrounds pair with dark text; dark backgrounds pair with light text. `--text-secondary` is for secondary/large text only (it is ~3.3:1 on `--bg-primary`); body copy uses `--text-primary`. Verify every text/background pair meets WCAG AA (≥4.5:1) and adjust values if any pair fails.
- **Required accessibility adjustment to source spec:** solid sage buttons must use dark text (`--text-on-primary`) on `--primary` — white-on-sage fails contrast. Do not ship white text on `#9caf88`.
- **Radius & shadows:** `--radius-sm: 10px`, `--radius-md: 16px`, `--radius-lg: 24px`, `--radius-pill: 999px`, `--shadow-sm/md/lg` exactly as given in the source token block.
- **Spacing & transitions:** `--spacing-gap: 24px` plus the source `--space-*` scale; `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`.
- **Elevation/stacking:** `--z-nav: 40`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`. Apply to sticky nav, mobile menu, and any overlay/toast so layers never conflict.

**1.3 Mandatory Dark Mode Support**
The source spec declares no color modes ("source does not declare modes; validate in light and dark before publishing") — therefore **you must design the dark theme yourself** and validate both modes before considering the build done. Required starting palette (verify AA, adjust if needed):

- `--bg-primary: #201d17`, `--bg-secondary: #2a261f`, `--surface-strong: #342f26`, `--border-default: #3f3a30`, `--text-primary: #f1ece2`, `--text-secondary: #b0a692`, `--primary: #b9cba6`, `--secondary: #dcb691`, `--text-success: #a9c794`, `--text-error: #e5a08f`, `--border-error: #a05c4b`, `--border-success: #5c7048`, `--text-on-primary: #1d2415`, `--air-wash: linear-gradient(180deg, #26221b 0%, #201d17 100%)`, `--sage-ring: 0 0 0 3px rgba(185,203,166,0.22)`. Darken shadows (e.g., `rgba(0,0,0,0.35)`).

- Implement tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`; the class must win so the toggle always works.
- **Persistence:** store the user's choice in `localStorage` (e.g., key `rise-theme`); on first visit fall back to `prefers-color-scheme`. Apply the theme in `script.js` (the only permitted script entry point).
- **Toggle control:** a visible button in the nav showing Material Symbols `light_mode` / `dark_mode`, with correct `aria-pressed` state and `aria-label` ("Switch to dark theme" / "Switch to light theme"). No HTML restructuring when switching — only variable swaps.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout with Flexbox (or CSS Grid where a 3-column card row genuinely needs it — the grid container's children must still be flex-aligned internally).
- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.
- Mobile-first: all multi-column rows (features, steps, pricing, testimonials, footer columns) collapse to a single column on small viewports. **No horizontal scrolling at any width — test down to 320px.**

**1.5 Typography & Icons (Google Fonts Mandatory)**
- Load **Fraunces** (display serif — all headlines, section titles, prices) and **Inter** (body/UI) via Google Fonts `<link>` tags; bind to `--font-display` and `--font-base`.
- Icons: **Google Material Symbols (Rounded style)** via its official stylesheet. **Raw inline SVGs and local icon files are forbidden.** Note: Material Symbols contains no brand logos — footer social links must be text links (optionally with a generic symbol like `arrow_outward`), never fake logo icons.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; pill radius; variants `.btn` (soft surface + border + `--shadow-sm`), `.btn--primary` (sage bg + `--text-on-primary`), `.btn--ghost` (transparent, sage text).
- **Hover:** lift (`translateY(-1px)`) + shadow shift to `--shadow-md`, `cursor: pointer`.
- **Focus-visible:** remove default outline, apply `--sage-ring` — distinct in both themes.
- **Active/pressed:** `transform: scale(0.97)`.
- **Loading:** class `.is-loading` — disables pointer events, prevents double-submit in JS, swaps label for a CSS spinner (animated Material Symbol `progress_activity` or border spinner) **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** `.is-success` / `.is-error` feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form).

**2.2 Cards**
- **Default:** flex layout, `--bg-secondary` surface, `1px solid --border-default`, `--radius-lg`, `--shadow-md`, generous internal padding (`--space-8`).
- **Hover:** `translateY(-2px)` + elevation to `--shadow-lg`.
- **Focus-within:** sage border highlight when a child button/link is focused.
- **Skeleton:** define a shimmer keyframe utility in CSS; apply only if you simulate async loading. **Empty state:** not applicable to this static page — do not invent dead code.

**2.3 Form & Input (Final CTA email capture)**
- Structure: flex `.input-group` wrapping a visible `<label>`, the `.input` field, and a dedicated error/status container below.
- **States via classes:** empty, focused (sage border + `--sage-ring`), filled, valid (`--border-success` + `check_circle` symbol), invalid (`--border-error`, error text in `--text-error`, `error` symbol, `aria-invalid="true"`, message linked via `aria-describedby`), disabled, read-only.
- Submit status (sending/success/error) is announced through an `aria-live="polite"` status region — never by color alone.

**2.4 FAQ Accordion**
- Each item: a `<button>` (visible focus ring, chevron `expand_more` rotating 180° via CSS) with `aria-expanded` + `aria-controls`, controlling a region with matching `id` and `role="region"`.
- Animate open/close in pure CSS (e.g., `grid-template-rows: 0fr → 1fr`). Fully keyboard-operable; no mouse-only interactions. No modals are required — if you introduce any overlay, it must follow the full modal spec (animated open/close states, backdrop, Material `close` button, focus trap, `Esc` and overlay-click dismissal, `--z-modal`).

**2.5 Navigation & Mobile Menu**
- Sticky pill-shaped nav (source `.nav` pattern): Fraunces wordmark "Rise," anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA "Start free."
- Below ~820px: links collapse behind a `menu` icon button; panel uses `--z-dropdown`, opens/closes with `aria-expanded`, closes on `Esc` and outside click, and moves focus into the panel on open.
- Include a visually hidden "Skip to content" link as the first focusable element. Use CSS `scroll-behavior: smooth` + `scroll-margin-top` on sections for anchor offsets.

---

## 3. PAGE SECTIONS & CONTENT SPECIFICATION

- **Hero:** badge pill (`spa` symbol + "The clean girl operating system"), Fraunces H1 ("Become her." or equivalent), Inter subcopy explaining Rise, primary CTA "Start your routine — free" + secondary "See how it works." Visual is **CSS-only** (no external images): layered floating cards — a journal card (ruled lines via `repeating-linear-gradient`), a matcha card (`local_cafe`), a workout card (`self_improvement`) — over soft radial sage/tan gradient blobs at low alpha. Subtle entrance animation.
- **Features (3 cards):** "Gentle habit tracking" (`checklist`), "Guided journaling" (`edit_note`), "Movement that fits" (`fitness_center`) — icon, Fraunces title, real benefit copy. Card hover/focus-within per 2.2.
- **How It Works (3 steps):** numbered 01/02/03 ("Design your sunrise" → "Live the routine" → "Reflect & rise"), icons, connecting line; horizontal 3-column on desktop, vertical timeline on mobile.
- **Testimonials:** 3 quote cards, 5-star ratings using `star` symbols (never color-only — include the rating as text for screen readers via `aria-label`), first name + descriptor ("Maya R. — 5AM club, member since 2023").
- **Pricing (3 tiers):** "Morning Flow" (Free), "That Girl" ($9/mo — highlighted: sage ring/border, "Most popular" badge, slight elevation), "Studio" ($18/mo). Feature lists with `check` symbols; each tier has a CTA button with full 2.1 states.
- **FAQ:** 5 real Q&As (cancellation, equipment needs, offline use, "is this another guilt-trip app?", dark mode) built per 2.4.
- **Final CTA:** full-width panel on `--surface-strong` / `--air-wash`, Fraunces headline ("Your era starts tomorrow, 6AM."), email form per 2.3 with loading → success ("You're on the list") and error states.
- **Footer:** brand block + tagline; four secondary-link columns (Product, Company, Resources, Legal) with real link labels; social as text links; copyright line. All links get `:focus-visible` sage ring.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid type via clamp(), breakpoints at ~640/820/1024px, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; optional IntersectionObserver fade-up reveals that default to visible without JS and are fully disabled under `prefers-reduced-motion: reduce` (which also sets `scroll-behavior: auto` and removes all transforms).
- **Accessibility:** AA contrast in light AND dark; never rely on color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); logical focus order; full keyboard operability; `aria-live` for all dynamic feedback.
- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.
- **Destructive actions:** none in scope; if any appear, they must be visually distinct in both themes.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. `script.js` is the only script, referenced once with `defer` — no inline script blocks. Only external `<link>` tags (Google Fonts, Material Symbols) in `<head>`.
- **Naming:** consistent **BEM** throughout (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.input-group__error`) — never mix conventions.
- **No placeholders:** all copy is final, real English text in the theme voice; no lorem ipsum, no TODOs, no stub sections.
- **Final validation before delivery:** render and verify both light and dark themes — token pairing, toggle persistence, AA contrast, keyboard-only navigation of nav, FAQ, form, and focus rings. The build is not complete until both modes are validated.