## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146166919-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146164858.webp
- Design on Kage: https://kage.design/designs/fresha-landing-page

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type), and wait for the answers. Everything below is a design language to apply to *their* product — a booking-style marketplace or discovery page — not a clone of the reference site. Adapt the pastel gradient hues and accent colour to their brand; keep the structural rhythm regardless of vertical.

## Page structure

1. **Header** — slim white bar: lowercase wordmark left; right side has a text link ("Log in"), a bordered pill ("For businesses"), and a pill with hamburger icon ("Menu"). Full-width, no shadow until scroll.
2. **Hero** — full-width pastel gradient (lavender → pink → peach) with everything centre-aligned: 56–64px display headline, one grey supporting line, then the hero control: a large white pill segmented into three fields (search input, location, date/time) separated by hairline dividers, ending in a black pill "Search" button. Below it a live social-proof line with the number in the purple accent, then a white pill secondary CTA ("Get the app").
3. **Recommended** — section heading left-aligned, then a horizontal card carousel: 4-up venue cards (photo, top-left frosted badge chip, top-right circular heart button), each with title + yellow star rating, grey location line, category · review count. A circular white arrow button floats at the right edge and the last card is cropped by the viewport.
4. **New to Fresha** — an identical carousel with "New" badges; same card anatomy, different content. Repetition of the exact card template is intentional.
5. **Trending** — a third identical carousel with "Featured"/"Best in Class" badges. Three rows back-to-back create a dense discovery block.
6. **App download** — big drop in density: small "Available on" line, huge left-aligned two-line display headline ("Download the [brand] app"), one grey paragraph, and a store/QR badge on the left; right half stays empty/illustrated. Lots of whitespace, no cards.
7. **Reviews** — heading + carousel of light-grey rounded cards: 5 yellow stars, bold one-line title, 2–4 line quote, then avatar, bold first name, grey city. Arrow button at right edge.
8. **Social proof** — centred section: bold heading ("The top-rated destination for selfcare" style), grey subline, then a counters row: three very large stats ("130,000+ partner businesses", "120+ countries", "450,000+ professionals") with grey labels beneath. Large type, no decoration.
9. **For business** — split section: left column with a giant two-line headline, grey paragraph, black pill CTA with arrow, and a "Excellent 5/5" star rating block with review-source caption below; right column shows overlapping product screenshots (desktop scheduling/calendar UI with a dark icon sidebar and coloured appointment blocks, plus a phone mockup of a venue page) that bleed off the section edge. A faint green-yellow gradient wash sits at the bottom of this section.
10. **Browse by City** — deliberately utilitarian: a row of country pill-tabs (active = black pill, white text; inactive = bordered), then a 5-column grid of small 13px SEO links grouped under city subheadings ("Popular", "Sydney", "Melbourne"…), each column a list of "[Service] in [City]" links with a right arrow to page.
11. **Category pill row** — one horizontal row of bordered pills for top-level service categories.
12. **Footer** — flat light-grey block: wordmark + "Get the app" white pill left; four link columns (About, For business, Legal, Social with external-link icons); bottom bar with globe icon language selector left and copyright right, in small grey text.

## Design language

- **Neutral canvas, gradient as punctuation.** The page is white/near-black with grey meta text (#6b7280). Colour appears in exactly three places: the hero gradient (~#cdbff0 lavender → #f8d7ea pink → #fcead9 peach, soft, blurred, no visible banding), the purple accent (#7c3aed) reserved for live/dynamic numbers, and yellow stars (#f5b21c) for ratings only. Everything else stays monochrome so photography carries the colour.
- **Type scale is extreme and structural.** Display headings 56–72px, medium (500–600) weight, tight leading (~1.05) and slightly negative tracking, often broken into two lines; section titles 24–28px bold; card titles 14–15px semibold; meta 12–13px grey. Body copy is scarce — the page communicates through cards and numbers, not paragraphs. Use one geometric sans throughout (Circular/Inter/Poppins class); never mix serifs in.
- **Pill-shaped interaction vocabulary.** All buttons are fully rounded (999px): black pill = primary, white pill with 1px #e5e5e5 border = secondary, black active pill with white text = selected tab. The search bar is one white pill subdivided into segments by 1px dividers — replicate segmented pills for multi-field search. Icons are thin 1.5px line icons, never filled.
- **Cards are templated, never redesigned.** Every listing card: image with ~12px radius, frosted-white badge chip top-left (11px text), circular translucent heart top-right, then a strict text block: title left + star/score right on one line, location in grey below, category · review count last. Identical radius, spacing and 4:3 image ratio across every carousel row.
- **Rhythm alternates dense and airy.** Hero (airy) → three card rows (dense, ~24px gaps, carousel arrows overlapping the edge) → app section (airy, half the viewport empty) → review cards (medium) → stats (airy, type as the visual) → business split (airy text, dense product mockup) → link grid (maximally dense, 13px type). Keep this drumbeat; don't let two dense sections touch.
- **Shadows almost absent.** Depth comes from frosted chips on photos and the occasional soft shadow on floating carousel arrows and the search pill; sections are separated by whitespace and occasional 1px borders, not elevation. The only strong elevation is on the device mockups in the business section.
- **Numbers as ornament.** Social proof is typography: live counters in accent purple, stats as 40–48px numerals with small grey labels. Never put these in boxes or cards.
- **Motion is quiet.** Carousels scroll horizontally with circular arrow buttons; hover states are limited to slight card/photo dim and underline on links. No parallax, no entrance animations.
- **SEO/utility sections go plain.** Bottom-of-page grids use tiny type, generous line-height, bordered pill tabs — functional and unstyled-feeling by design, contrasting with the polished upper page.

## Never

- Do not use the Fresha name, wordmark, logo, icon set, or any of its copy ("Book local selfcare services", "Supercharge your business", review quotes, etc.).
- Do not reuse the site's photography, venue images or the exact scheduler UI screenshot; build the user's own product mockups and placeholder imagery instead.
- Do not copy the exact pastel gradient stops, purple counter value or star-rating wording; re-derive them from the user's brand.
- Never present the result as the reference product or claim affiliation with it.