Isolde Marsh

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Lexend Exa is a wide geometric sans built for spaced caps, which gives the film-title card, and Karla keeps the credits warm and quiet.

• Lexend ExaHeadings: title 128px bold uppercase with wide 10px tracking
• KarlaBody: body 16px at 1.6, 12px uppercase side labels

Who it is for

• R&B and neo-soul artists
• Bands promoting a new release
• Artists seeking collaborations
• Agencies building artist sites

Layout

1. Floating centered glass pill nav with icon labels (Intro, Music, Tours, Merch, Info), active item filled
2. Full-viewport sepia silhouette photo with slow Ken Burns zoom
3. Centered tracked genre line and city, then stacked giant uppercase name (second word dimmed)
4. Bottom-left 'Media' column of streaming links; bottom-right 'Follow' column of social links, both shifting with mouse parallax
5. Music page with releases and related content
6. Tours page with status badges
7. Merch page by category
8. Info/video library; full-screen mobile menu

Palette

Cinematic, soulful, warm, hushed, elegant. It reads like an opening title card of a film.

• background#000000
• text#ffffff
• muted text (link columns, meta)#ababab
• sepia highlight#d8c3a0
• dimmed name line (display only)#aeaaa7
• glass nav (80% opacity)#3a3530
• card#0d0d0d
• decorative border#2e2e2e
• hero overlay (black 65%, 75% at bottom)#000000a6

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Lexend Exa bold uppercase, 128px with wide 10px tracking; second line at reduced opacity

Body

Karla 16px, line-height 1.6; side labels 12px uppercase weight 500, widely tracked, in #ababab

Wide-tracked geometric caps give a film-title feel; small tracked columns act like credits

Spacing and imagery

Single 100vh frame, 40px edge insets, pill nav with 9999px radius, inner pages centered ~1100px with glass cards

Backlit sepia silhouette portrait in a field at dusk with slow zoom, under a 65–75% black overlay; release art and merch photos inside glass cards

Components

• Floating glass pill nav with icons
• Ken Burns hero photo
• Stacked two-tone name title
• Genre and location eyebrow
• Media links column
• Follow links column
• Release cards
• Tour list with status badges
• Merch category tabs
• Video library
• Related content row
• Full-screen mobile menu

Interactions

• 40-second slow zoom on hero image
• Mouse parallax on side columns and title
• Active pill highlight animates between items
• Glass cards blur/brighten on hover
• Status badges color-coded
• Full-screen mobile menu with staggered links
• Page crossfades

Data

• Release{title, year, cover, type, links[]}
• TourDate{date, city, venue, status: available|presale|soldout, ticketUrl}
• MerchItem{name, category, price, image, url}
• Video{title, embedId, thumbnail}
• Link{label, url, group: media|follow}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build a cinematic artist website for a fictional neo-soul singer called **Isolde Marsh**. The audience is listeners discovering her through a single, collaborators checking her aesthetic, and fans looking for tour dates or merch. The landing screen should read like an opening title card: one moody photo, a large stacked name, genre and hometown, and credit-style link columns. The inner pages handle music, tours, merch and info.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Tabs, Dialog, Badge), lucide-react icons for the nav, React Router, and Framer Motion for the Ken Burns zoom, pointer parallax, the active-pill `layoutId` animation and staggered menu. No backend.

### Pages & layout
1. Floating nav: a centered translucent pill with five items (Intro, Music, Tours, Merch, Info), each with a small icon; the active item has a lighter filled pill that slides between items.
2. Intro (100vh): a sepia backlit portrait filling the screen with a slow 40s zoom under a 65% black overlay that deepens to 75% along the bottom edge; centered tracked genre line and city; the name in two stacked lines of huge wide-tracked caps, with the second line dimmed; a "Media" link column bottom-left and a "Follow" column bottom-right, both drifting slightly with the pointer.
3. Music: glass cards for releases with platform links and a "You might also like" row.
4. Tours: rows with date, city, venue and a status badge (available, presale, sold out).
5. Merch: category tabs and product cards linking to a hosted store.
6. Info: bio, video library, booking contacts.
7. Mobile: the pill collapses into a menu button that opens a full-screen overlay.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --sepia: #d8c3a0; --dim: #aeaaa7; --glass: rgb(58 53 48 / .8); --muted-foreground: #ababab; --card: #0d0d0d; --border: #2e2e2e`. Fonts: Lexend Exa 700 for display and Karla 400/600 for body. Scale: clamp(64px, 10vw, 128px) name with 0.08em tracking; 12px uppercase labels (weight 500, short labels only) with 0.2em tracking; 24 / 16 / 14px content; body line-height 1.6, max 70ch. Glass: `backdrop-blur-xl`, 1px `white/15` border, pill radius for the nav and 20px for cards. Motion: Ken Burns scale 1 → 1.12 over 40s alternate; parallax max 10px; 350ms spring for the active pill. Dark only.

### Components & interactions
- Nav item: hover raises text opacity; focus ring; the active item gets `aria-current="page"`.
- Status badges: available (outline white), presale (sepia fill), sold out (muted with strikethrough and the words "Sold out").
- Glass cards: hover brightens the border, focus ring, skeleton loading, and image fallback.
- Merch tabs: sync with a URL param; empty category message.
- Full-screen menu: focus trap, Esc to close, staggered links.

### Data & state
`Release{slug,title,year,type,cover,links[]}`, `TourDate{date,city,venue,status,ticketUrl?}`, `MerchItem{name,category,price,image,url}`, `Video{title,embedId,thumb}`, `LinkItem{label,url,group}`. Related content is computed by shared tags. Seed invented releases and cities.

### Accessibility
The dimmed second line of the name (#aeaaa7, display size only) still holds 3:1 over the overlaid photo, and the full name is present in the H1 text. The small tracked link columns sit on the 75% bottom gradient, where #ababab reaches 6:1 over even a white-worst-case photo. The glass nav uses 80% opacity so white labels stay above 4.5:1 over any part of the image. Icons in the nav need visible text or `aria-label`s. The Ken Burns zoom and parallax stop under `prefers-reduced-motion`. Status is never shown by color alone. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; hero name: #ffffff on #595959 = 7.0:1; link columns over 75% bottom gradient: #ababab on #404040 = 4.52:1; white nav labels on 80% glass over white-worst-case photo: #ffffff on #615d59 = 6.53:1; black text on sepia presale badge: #000000 on #d8c3a0 = 12.23:1.

### Security
Static: external links get `rel="noopener noreferrer"` and only https URLs; merch and ticket purchases go to hosted checkouts; video embeds use privacy-enhanced mode. No secrets in client code.

### Performance & SEO
Serve the hero as a single optimized AVIF (under 300 KB) with high fetch priority; animate with `transform` only so the zoom stays on the compositor. Lazy-load inner-page media; code-split routes. Per-route titles, OG image, MusicGroup and Event JSON-LD.

### Guardrails
- Use original copy and placeholder portraits; no real artist names, logos or platform trademarks beyond plain text link labels.
- Don't fabricate streaming numbers or quotes.
- Collect no personal data.
- Keep components small and typed, never use `any`, and handle media errors visibly.
- Done when: the landing fits one viewport at 375px and 1440px widths; the active pill animates between routes and is keyboard-reachable; reduced motion stops the zoom and parallax; tour badges show text labels; every route has unique meta.

Open the builderAll templatesThis palette on its own