Delphine Rourke

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

Anton keeps the condensed album-cover impact, and Bai Jamjuree is a quirky, techno-flavored grotesk for the utility text.

• AntonHeadings: decorative hero name ~230px uppercase
• Bai JamjureeBody: body 16px, 12px uppercase UI chips

Who it is for

• Solo singers and songwriters
• Bands presenting releases and tours
• Independent labels building artist pages
• Managers who need a polished press-ready site

Layout

1. Floating pill chips across the top: MENU and Instagram handle left, centered spaced wordmark, booking email and short social chip right
2. Full-viewport portrait hero (no scroll on home) with giant semi-transparent condensed uppercase name across the bottom, subtly moving with the cursor
3. Fullscreen overlay navigation with staggered links
4. Inner pages: Music/releases, Tour with status badges, Merch, Videos gallery, Contact – all using glass cards on black

Palette

Bold, editorial, luminous, confident, minimal. The home page reads like an album cover rather than a website.

• background#000000
• text#ffffff
• muted text (sold out, meta)#a3a3a3
• card#0d0d0d
• secondary#1a1a1a
• decorative border#2e2e2e
• dark glass chip fill (black 55%)#0000008c

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Anton regular uppercase at ~230px for the hero name, rendered semi-transparent over the photo as decoration (the real H1 is visually hidden text); wordmark small with wide tracking

Body

Bai Jamjuree 16px; line-height 1.6; UI chips 12px uppercase weight 500 with 1.8px tracking on a dark glass fill

Ultra-condensed poster face for impact paired with a quirky geometric grotesk for utility text

Spacing and imagery

Home is a single 100vh frame; 32px edge insets for chips; pill radius (9999px) chips; inner pages use a centered ~1100px container with 16px glass cards

One large color portrait photograph filling the viewport, bright natural light; inner pages use cover art, product shots and video thumbnails inside glass cards

Components

• Dark glass pill chips header
• Full-bleed portrait hero
• Giant translucent name overlay
• Fullscreen menu overlay
• Release cards with platform links
• Tour list with Available/Sold out/Presale badges
• Merch product cards
• Video gallery grid
• Contact glass cards
• Social link chips

Interactions

• Mouse-tracking parallax on hero photo
• Fullscreen menu opens with staggered link reveal
• Page transitions fade/slide
• Glass cards brighten border on hover
• Tour badges show distinct variants
• Video thumbnails open player
• Platform icons highlight on hover

Data

• Release{title, year, cover, type, links{spotify, apple, bandcamp}}
• TourDate{date, city, venue, status: available|soldout|presale, ticketUrl}
• MerchItem{name, price, image, url}
• Video{title, thumbnail, embedId}
• Contact{label, value, href}

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 color 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, labeled 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 multi-page portfolio for a fictional solo artist called **Delphine Rourke**. The audience is fans, bookers and press. The home page should work like an album cover: one striking photo and the artist's name. Everything else (music, shows, merch, videos, contact) sits one tap away in a fullscreen menu.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog for the menu overlay, Badge, Card), lucide-react icons, React Router for six routes, and Framer Motion for staggered menu reveals, page transitions and pointer-driven parallax. Use Embla only if you add a mobile swipe gallery. No backend.

### Pages & layout
1. Home (100vh, no scroll): a full-bleed portrait photo; four floating glass pill chips (Menu and social handle on the left, booking email and a short social chip on the right); a small tracked wordmark centered at the top; the artist name in huge condensed uppercase type across the bottom at ~40% opacity so the photo shows through.
2. Menu overlay: black glass backdrop, five large links that stagger in, contact chips at the bottom.
3. Music: release grid of glass cards with cover, year, type and platform icon links.
4. Tour: rows with date, city, venue and a status badge (Available, Presale, Sold out), plus a ticket button.
5. Merch: product cards linking to an external store.
6. Videos: 16:9 thumbnails that open a player dialog.
7. Contact: glass cards for booking, management and press.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --card: #0d0d0d; --secondary: #1a1a1a; --border: #2e2e2e; --muted-foreground: #a3a3a3; --glass: rgb(0 0 0 / .55); --glass-border: rgb(255 255 255 / .25)` (the glass border is decorative; chip text contrast comes from the dark fill). Fonts: Anton for display and Bai Jamjuree 400/500 for everything else. Scale: clamp(96px, 18vw, 230px) hero name; 48 / 28 / 16 / 14px; chips 12px uppercase, weight 500, with 0.18em tracking (short labels only); body 16px with line-height 1.6, max 70ch. Glass: `backdrop-filter: blur(12px)`, 1px translucent border, pill radius for chips and 16px for cards. Spacing: 32px edge insets, 24px card gaps. Motion: 600ms ease-out menu stagger (60ms step), parallax up to 12px offset. Dark only.

### Components & interactions
- Glass chip: dark glass fill (black at 55%) so white chip text holds 4.5:1 even over the brightest part of the photo; hover increases fill to 70%; focus ring white 2px; active scales to 0.97.
- Hero parallax follows the pointer and disables on touch devices and under reduced motion.
- Menu: opens with Esc to close, focus trap, current route marked.
- Status badges: outline (available), solid white (presale), struck and muted #a3a3a3 (sold out), each with a text label.
- Cards show skeletons while images load and a neutral fallback if they fail.
- Video dialog loads the embed only on open and stops playback on close.

### Data & state
Typed content files: `Release{title,year,type,cover,links}`, `TourDate{date,city,venue,status,ticketUrl?}`, `MerchItem{name,price,image,url}`, `Video{title,thumb,embedId}`, `ContactItem{label,value,href}`. Menu open state lives in a small context. Seed with fictional cities and song titles.

### Accessibility
The translucent hero name is decorative. Put the real H1 in visually hidden text or make sure it stays at least 3:1 against the photo by adding a bottom gradient. All chip text is 12px or larger, and contact details in chips use the dark glass fill so they reach at least 4.5:1 over any part of the photo. Give the menu `role="dialog"` with a label. Parallax must respect `prefers-reduced-motion`. Portrait alt text should describe the image, not repeat the name. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; muted text on secondary: #a3a3a3 on #1a1a1a = 6.9:1; black text on solid white presale badge: #000000 on #ffffff = 21.0:1; white chip text on dark glass over white-worst-case photo: #ffffff on #737373 = 4.74:1.

### Security
Static site: use `mailto:` for booking, `rel="noopener noreferrer"` on social and store links, and allow only https URLs in content files. Load video embeds via privacy-enhanced domains. No keys in the client.

### Performance & SEO
Serve the hero image as responsive AVIF/WebP with `fetchpriority="high"`; lazy-load everything else; code-split routes. Per-route titles, OG image using the hero, and MusicGroup JSON-LD. Keep total home-page weight under 400 KB excluding the photo.

### Guardrails
- Use original copy and placeholder portraits; no real artist names or logos.
- Don't invent press quotes presented as real.
- Collect no personal data.
- Keep components small and typed, never use `any`, and show media errors visibly.
- Done when: the home page fits one viewport on desktop and mobile without scrolling; the menu is fully keyboard-operable; all three tour statuses render with text labels; reduced motion disables parallax; each route has unique meta.

Open the builderAll templatesThis palette on its own