Mindora — Mental health therapy site

# Earthy wellness landing page: build prompt

A light, calm landing page for a therapy and wellbeing service. It opens and closes on two full-bleed, warm, sun-washed photographs. Between them sit five quiet, left-aligned content sections on near-white and pale stone tints, with small white stat cards that overlap the images. A neo-grotesk sans is used throughout, at light-to-medium weights. The hero is one giant word, and a standing figure is cut out in front of it. The page has one pistachio-lime accent pill and one black active state. The footer ends in an oversized, nearly invisible wordmark that is clipped by the bottom edge.

## Structure

- **Viewport:** design at 1440 × 900. The page is full-bleed, with no outer margin, no rounded page corners and nothing behind it.
- **Content container:** 1344px wide, with 48px side gutters. Use a 12-column grid with 24px gutters.
- **Hero gutters:** the hero and the closing CTA image use 64px side insets for their overlay text.
- **Section openers:** every content section starts with the same pattern. There's an eyebrow row (a 6px black dot, an uppercase micro label of 2–3 words, and a 1px hairline running to the right edge of the container). Below it sits a two-line, left-aligned H2.

Sections, top to bottom:

1. **Hero.** Full-bleed photo with a transparent nav on top.
   - **Nav:** a small uppercase wordmark on the left; 5 uppercase links centred; a white "get started" pill on the right.
   - **Display word:** one giant word spans almost the full width, set in white. The standing figure in the photo overlaps it, with the head in front of the letters.
   - **Lower left:** an eyebrow ("• 3–4 words") over a 2-line subhead of about 4 words.
   - **Right:** a right-aligned paragraph of 4 short lines and a white pill CTA with a ↗ arrow.
   - **Bottom strip:** two uppercase micro labels, one at far left and one at far right, about 48px above the hero's bottom edge.
2. **About.** Eyebrow and H2 (2 lines, 6–7 words). Then a three-part staggered composition:
   - **Left (cols 1–3):** a portrait image. A white stat card (number + 2-word caption) overlaps the image's top edge.
   - **Centre (cols 4–7):** a lead paragraph of about 60 words, set large, with a lime pill CTA below it.
   - **Right (cols 9–12):** a taller image that starts higher than the left one. One white stat card overlaps its top-left corner, sticking out about 50px past the image edge. A second stat card sits inside the bottom-right corner.
3. **Process.**
   - **Header:** eyebrow and H2 (2 lines, 4–5 words).
   - **Tab row:** 4 equal tabs spanning the full container. Each has an uppercase step label on the left and a two-digit number ("01"–"04") on the right. The first tab is solid black; the others are pale with a hairline.
   - **Step content:** cols 1–4 hold the step title (3 words) and a 2-line caption, bottom-aligned to the image. Cols 5–12 hold a wide 2:1 image.
4. **Therapists.**
   - **Header:** eyebrow, then H2 (3 words, 2 lines) on the left. On the same baseline on the right are 4 underline-style filter dropdowns (label + chevron, about 180px each).
   - **Cards:** a row of 3 equal portrait cards at about 4:5. Each is a full-bleed photo with a dark warm gradient at the bottom. Over the gradient sit a white name, a 3–4 word specialty caption and a small arrow at the bottom right.
5. **Features.**
   - **Header:** eyebrow, H2 (7 words, 2 lines) on the left, lime pill CTA on the right, aligned to the H2.
   - **Grid:** two rows of tiles, 3 tiles across on the first row and 2 wider tiles on the second.
   - **Tiles:** a small line icon at the top left. At the bottom: a title of 2 words and a caption of 5–7 words.
6. **Pricing.**
   - **Header:** eyebrow and H2 (6 words, 2 lines) on the left. On the right, a muted question line (4 words) and a lime pill.
   - **Cards:** two equal, wide cards with a cream-to-sage pastel gradient. Each card has:
     - a square image at the top left;
     - to its right, a circular outline icon above a 2-line plan name;
     - a large price with a small "/session" suffix;
     - a 4-item checklist;
     - a black pill CTA at the bottom right.
7. **Closing CTA and stats band.** Full-bleed photo.
   - **Top left:** eyebrow plus a 2-line white H2 of 4 words.
   - **Top right:** a 2-line right-aligned white paragraph and two stacked white pills.
   - **Bottom:** a 4-column stats band in white, each column a big number over an uppercase caption.
8. **Footer.** White.
   - **Left:** wordmark, a 1-line tagline, and an underline email field with a text "Subscribe" button.
   - **Right:** 3 link columns (heading + 4–5 links).
   - **Bottom:** a giant wordmark across the full width in a barely-off-white tint, clipped by the page bottom.

## Scroll map

The viewport is 900px tall.

1. Hero: 920px (1.02 vp). Consumes 920. Entrance.
2. About: 925px (1.03 vp). Consumes 925. Entrance.
3. Process: 880px (0.98 vp). Consumes 880. Entrance, plus click tabs.
4. Therapists: 955px (1.06 vp). Consumes 955. Entrance.
5. Features: 880px (0.98 vp). Consumes 880. Entrance.
6. Pricing: 920px (1.02 vp). Consumes 920. Entrance.
7. Closing CTA and stats: 945px (1.05 vp). Consumes 945. Entrance.
8. Footer: 575px (0.64 vp). Consumes 575. Entrance.

Total page height is about 7,000px (≈ 7.8 viewports). No motion report was supplied, so nothing pins or stacks and every value here is inferred.

## Spacing

- **Section padding:** 80px top and 88px bottom in sections 2–6. Sections butt edge to edge; there are no gaps or dividers between them. Rhythm comes from the background tint changing.
- **Inside the section opener:**
  - eyebrow row to H2: 48px;
  - H2 to first content block: 48–56px (process tabs, therapist cards, feature grid, pricing cards);
  - in About, the H2 sits at top left and the composition starts about 40px below it.
- **About:**
  - The right image starts about 40px below the eyebrow row, roughly level with the H2.
  - The left image starts about 130px lower.
  - The paragraph starts about 90px below the right image's top.
  - Stat cards: 20px padding, about 200px wide.
- **Process:**
  - Tab row: 52px tall, with 6px gaps between tabs.
  - Tabs to step content: 20px.
  - Step text block: max-width 340px.
- **Therapists:** card gap 20px. Name block inset 20px from the card's bottom-left.
- **Features:**
  - Grid gaps: 20px in both directions.
  - Tiles: 256px tall, 24px padding.
- **Pricing:**
  - Card gap 20px; cards about 662 × 540; 24px padding.
  - Image to price: 32px. Price to list: 24px. List rows 28px apart.
- **Hero:**
  - Nav: 24px from the top, 64px side insets.
  - Display word: top about 105px from the hero top.
  - Subhead block: starts about 440px from the top.
- **Closing CTA (section 7):**
  - Overlay text: 64px insets, top text about 80px down.
  - Stats band: about 64px from the bottom, 4 equal columns.
- **Footer:**
  - Padding: 64px top.
  - Columns: link columns about 140px wide with a 48px gap.
  - Giant wordmark: starts about 120px below the columns, and about 25% of the glyph height is cut off by the page edge.

## Type

- **Family:** a single neo-grotesk sans (Neue Montreal/Haas class). Free stand-in: **Inter Tight**; Geist also works.
- **Weights:** no serif and no mono. Headings are 400–500 and never bold.
- **Anchor:** body = **17px**.

| Level | Ratio | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero display word | 17.6× | 300px (clamp 120px–21vw–300px) | 0.88 | −0.045em | 400 |
| Footer giant wordmark | 19× | ~330px, full width | 0.85 | −0.04em | 500 |
| Hero/CTA subhead, white | 3× | 52px | 1.02 | −0.03em | 400 |
| Section H2 | 2.1× | 36px | 1.15 | −0.02em | 500 |
| Price / stats-band number | 1.9× | 32px | 1.1 | −0.02em | 500 |
| Stat-card number, plan name | 1.6× | 28px | 1.1 | −0.02em | 500 |
| Lead paragraph (About) | 1.35× | 23px | 1.4 | −0.01em | 400 |
| Card / step title | 1.2× | 20px | 1.3 | −0.01em | 500 |
| Therapist name | 1.1× | 19px | 1.25 | −0.01em | 500 |
| Body | 1× | 17px | 1.55 | 0 | 400 |
| Caption, card sub-lines, checklist | 0.82× | 14px | 1.45 | 0 | 400 |
| Nav links, button labels, tab labels (uppercase) | 0.82× | 14px | 1 | +0.06em | 500 |
| Eyebrows, stat captions, hero bottom labels (uppercase) | 0.71× | 12px | 1.2 | +0.08em | 500 |

- **Max line lengths:**
  - lead paragraph: 30–34ch (it's a narrow, tall block);
  - captions: 45ch;
  - H2: break by hand into 2 lines of 3–4 words.

## Colour

| Hex | Role |
|---|---|
| `#FCFCFB` | Main surface: sections 2, 4, 6, footer, feature tiles, inactive tabs, stat cards (largest area) |
| `#F4F3EF` | Alternate section tint for sections 3 and 5 (inferred, derived from the palette's light end) |
| `#D7D9D7` | Hairlines: eyebrow rules, tab borders, filter underlines, footer input underline |
| `#B8B8A7` | Muted sage: secondary text tint, pricing card gradient end (mixed lighter), icon strokes |
| `#875726` | Deep earth brown: therapist-card bottom gradient, photo grading; never flat UI fills |
| `#D69B66` | Caramel: photo warmth only (hero grass, CTA sunset); at most a tiny price-unit tint |
| `#1A1A17` | Text and the black elements: active tab, pricing CTA pills (inferred) |
| `#77776E` | Secondary text and captions (inferred) |
| `#CFE6A3` | **The single accent**, pistachio-lime (inferred, sampled by eye) |
| `#FFFFFF` | Text and pills over photos only |

- **Accent rule:** the pistachio-lime is used only as the fill of primary pills on light sections (About CTA, Features CTA, Pricing "contact" pill). Its label is dark. It never appears as text colour, an icon colour, a border or a background band.
- **Pricing card gradient:** top `#F3EEE6` (warm cream) to bottom `#DDE5D0` (pale sage), vertical.

## Surface

- **Borders:** 1px `#D7D9D7` hairlines only. Feature tiles and inactive tabs have either a hairline or none, separated by tint alone. There are no heavy outlines.
- **Corner radii:**
  - images and photo cards: 16px;
  - feature tiles and pricing cards: 14px;
  - stat cards: 10px;
  - tabs: 6px;
  - every button: fully pill-shaped (999px);
  - filter dropdowns: none (underline only);
  - the page and the full-bleed photo sections: 0.
- **Shadows:** almost none. Stat cards get one soft lift, `0 8px 24px rgba(40,30,20,0.08)`. Nothing else has a shadow.
- **Buttons:** pills are 40px tall with 20px horizontal padding. Labels are uppercase 14px with a small ↗ arrow. Variants are white on photos, lime on light sections and black in pricing.

## Imagery

All photography is warm, soft, sunlit and slightly desaturated, with a film-like grade. There are no illustrations.

- **Hero (section 1), 1440 × 920, full-bleed.**
  - **Scene:** one adult with short tousled light hair, in a loose cream blouse and dark trousers. They stand in tall dry golden grass and gaze to the side. The figure is waist-up in frame at about 50–58% across.
  - **Sky:** hazy olive-sage, fading warm at the horizon.
  - **Layering, critical:** use a background plate, then the white display word, then a cut-out PNG of the figure on top. The head and shoulders sit in front of the middle letters.
- **About, left (section 2):** portrait at about 3:5 (322 × 530). A person in rust-coloured activewear holds a balanced standing yoga pose in a bare warm-beige studio.
- **About, right (section 2):** about 2:3 (435 × 650). Close-up of a hand resting in a meditation mudra over a knee draped in cream chunky knit, on a soft neutral background.
- **Process (section 3):** 2:1 (850 × 425). Close-up of two hands clasping, one in a light sleeve and one in a brown knit sleeve, against a pale blue sky. Each tab swaps in its own image of the same style.
- **Therapists (section 4):** 3 portraits at about 4:5 (432 × 556). Smiling clinicians in white coats with stethoscopes, chest-up, centred, on a plain sage-grey backdrop. The bottom 35% fades into a warm olive-brown gradient behind the white text.
- **Pricing (section 6):** 2 near-square images (about 220 × 228). Surreal pastel portraits where the head is replaced by a burst of flowers: one with an orange cap and hoodie, one with a floral bucket hat. Their backgrounds blend into the card's cream tone.
- **Closing CTA (section 7), 1440 × 945, full-bleed.**
  - **Scene:** a person seen from behind, waist-up, in the lower-centre of the frame, standing in a field of small yellow wildflowers at dusk. The sky is graded mauve to orange.
  - **Darkening:** add a 15–25% dark overlay at the top and bottom edges so the white text reads.

## Motion

No motion report was supplied. Everything below is **(inferred)**, and every timing is not measured, so a range is given.

**1. Hero**
- **kind:** entrance, on page load.
- **what moves:** background photo; display word; figure cut-out; subhead block; right paragraph and pill; nav.
- **from → to:**
  - photo: scale 1.06 → 1, opacity 0 → 1;
  - display word: translateY 40px → 0, opacity 0 → 1;
  - figure: translateY 20px → 0;
  - text blocks and nav: translateY 16px → 0, opacity 0 → 1.
- **range:** once, on load. Duration not measured (700–1100ms for the photo, 500–800ms for text), ease-out (cubic). Stagger: photo, word, figure, text, nav at 80–120ms steps.
- **reduced motion:** everything is shown in its final state with no transforms. At most a 200ms opacity fade.

**2. About**
- **kind:** entrance.
- **what moves:** eyebrow row, H2, both images, paragraph and CTA, the three stat cards.
- **from → to:**
  - text and images: opacity 0 → 1, translateY 24px → 0;
  - stat cards: additionally scale 0.96 → 1.
- **range:** once, when each element's top reaches 80% of the viewport. Duration not measured (500–800ms), ease-out. Stagger 60–100ms, left to right; stat cards last.
- **reduced motion:** content is shown immediately, without transforms.

**3. Process**
- **kind:** entrance (the tab switching is an interaction; see the list below).
- **what moves:** header, then the 4 tabs, then the step text and image.
- **from → to:**
  - header and step content: opacity 0 → 1, translateY 24px → 0;
  - tabs: opacity 0 → 1, translateY 12px → 0.
- **range:** once, at 80% of the viewport. Duration not measured (500–800ms), ease-out. Tabs stagger 50–80ms.
- **reduced motion:** content is shown immediately.

**4. Therapists**
- **kind:** entrance.
- **what moves:** header and filters, then the 3 cards.
- **from → to:** opacity 0 → 1, translateY 32px → 0.
- **range:** once, when the card row's top reaches 80% of the viewport. Duration not measured (600–900ms), ease-out. Cards stagger 80–120ms.
- **reduced motion:** content is shown immediately.

**5. Features**
- **kind:** entrance.
- **what moves:** header and pill, then the 5 tiles.
- **from → to:** opacity 0 → 1, translateY 24px → 0.
- **range:** once, at 80% of the viewport. Duration not measured (500–800ms), ease-out. Tiles stagger 60–90ms in reading order.
- **reduced motion:** content is shown immediately.

**6. Pricing**
- **kind:** entrance.
- **what moves:** header, then the 2 cards. Inside each card, the image settles.
- **from → to:**
  - cards: opacity 0 → 1, translateY 32px → 0;
  - card images: scale 1.04 → 1.
- **range:** once, at 80% of the viewport. Duration not measured (600–900ms), ease-out. Stagger 100–140ms.
- **reduced motion:** content is shown immediately.

**7. Closing CTA and stats**
- **kind:** entrance.
- **what moves:** H2 block, then the right text and pills, then the 4 stats.
- **from → to:** opacity 0 → 1, translateY 24px → 0. The photo itself stays still.
- **range:** once, when the section top reaches 70% of the viewport. Duration not measured (500–800ms), ease-out. Stats stagger 60–100ms. No count-up animation.
- **reduced motion:** content is shown immediately.

**8. Footer**
- **kind:** entrance.
- **what moves:** the giant wordmark.
- **from → to:** translateY 40px → 0, opacity 0 → 1. Everything else in the footer is static.
- **range:** once, when the wordmark's top reaches 90% of the viewport. Duration not measured (700–1000ms), ease-out.
- **reduced motion:** static.

**Interaction transitions** (separate from the scroll choreography)

- **Pills:** on hover, the background darkens by about 6% (lime to a slightly deeper lime, white to `#F2F2EE`, black to `#333`). The ↗ arrow moves 2px up and 2px right. Duration 150–200ms. On press, scale to 0.98.
- **Process tabs:** on click, the active tab's black fill moves to the clicked tab. The step title, caption and image crossfade in 250–350ms, ease-in-out. Inactive tabs get a `#EFEEEA` background on hover.
- **Therapist cards:** on hover, the photo scales 1 → 1.03 over 400–500ms, and the arrow moves 2px right and up.
- **Feature tiles:** on hover, the background goes to white and the hairline goes to `#C9CBC9`, in 150–200ms.
- **Filter dropdowns:** a menu card (14px radius, soft shadow) opens below. It fades in and rises 6px over 150–200ms, and the chevron rotates 180°.
- **Nav and footer links:** on hover, an underline grows from left to right in 200ms.

## Responsive (below 640px)

- **Gutters:** 20px. Section padding drops to 56px top and 64px bottom. H2 drops to 28px; body stays 17px.
- **Nav:** wordmark, a "get started" pill and a menu button. The links go into a sheet.
- **Hero:** height 100svh.
  - The display word scales to fill the width (about 22vw) and stays behind the figure.
  - Subhead (36px), paragraph and pill stack at the bottom, left-aligned.
  - The two bottom labels are dropped.
- **About:** order is H2, paragraph, CTA, then the two images side by side at 50/50 with equal tops. Keep the 3 stat cards, overlapping the images.
- **Process:** the tabs become a horizontally scrolling row (each tab at least 140px). The step text stacks above a full-width 3:2 image.
- **Therapists:** the filters become a horizontally scrolling chip row. The cards become a horizontal scroll-snap row at 80% width.
- **Features:** one column; tiles 180px tall.
- **Pricing:** cards stack. The image stays at the top left; the plan name wraps beside it.
- **Closing CTA (section 7):**
  - The H2, paragraph and pills stack at the top, left-aligned.
  - Stats become a 2 × 2 grid.
  - The photo is cropped to keep the figure centred.
- **Footer:** link columns become 2-up. The giant wordmark scales to the viewport width and stays clipped.

## Don'ts

- **Mat and page edges:** don't paint a grey mat, frame, or rounded corners around the page, and don't inset the hero photo. Sections 1 and 7 are edge to edge.
- **Hero layering:** don't put the display word on top of the figure, and don't drop the cut-out. Text behind the figure is the hero's whole point.
- **Wellness palette:** no lavender, teal or blue-purple gradients, no blob shapes, no wavy SVG dividers, no illustrations or 3D characters.
- **Weights and hierarchy:** no bold (700+). Hierarchy comes from size and tight tracking, not weight. Don't centre the section headings; everything sits on the left edge except the right-side CTAs and filters.
- **Accent overuse:** lime is never a background band, link colour, icon colour or checkmark colour. Black is only used for the active tab and the pricing pills.
- **Cards:** no drop shadows on feature tiles, pricing cards or therapist cards, and no 2px borders. There are no coloured icon chips; icons are thin monochrome line icons, about 20px, with no background.
- **Stats:** don't turn the stats band into separate cards or add a count-up. They are plain white numbers on the photo.
- **Footer:** don't make the giant wordmark legible-dark. It is a whisper (`#F1F1EE` on `#FCFCFB`) and it must be clipped by the page bottom.
- **Additions:** don't add sections the design doesn't have (testimonials carousel, FAQ accordion, logo wall). Don't add scroll-jacking, pinning or parallax that isn't specified here.
- **Imagery:** don't use cool or high-contrast stock photography. Every image should share the warm, hazy, desaturated grade.