Ottilie Barr

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

Spline Sans is a crisp, slightly geometric grotesk that looks precise in tiny tracked caps, like a gallery label on a record sleeve.

• Spline SansHeadings: release titles and wordmark 12-14px, 600-700 uppercase, 0.2em
• Spline SansBody: body 16px

Who it is for

• Independent solo artists
• Artist managers setting up booking-ready sites
• Bands centralizing dates and recordings
• Fans looking to stream the new release

Layout

1. Thin header: tracked wordmark left, uppercase tracked links (Tour, Music, Video, About, Contact) right; frosted on scroll
2. Centered hero: tall portrait frame with thick black border holding a grayscale looping video or cover, bold tracked release title and 'Out now', outlined full-width 'Buy / Listen / Download' button
3. Tour dates table that stacks to cards on mobile
4. Discography accordions with tracklists, label, year and streaming links
5. Video page with featured video and thumbnails
6. About: bio and timeline
7. Booking and contact hub

Palette

Minimal, quiet, gallery-like, understated, modern. The page behaves like a framed print announcing one record.

• background (cream)#f5f1eb
• text#121212
• frame/primary#000000
• muted nav/meta text#6b6b6b
• secondary#f5f5f5
• decorative border#d9d4cc
• input border#978973
• accent#7547d1

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

Bold sans (Spline Sans 600–700) uppercase, 12–14px with very wide 0.2em tracking for short release titles and the wordmark

Body

Spline Sans 16px

Tiny tracked caps and lots of empty space create a gallery-label, record-sleeve feel

Spacing and imagery

Very sparse; single centered column ~400px wide for the hero frame, 32px page insets, square corners, 1px black outline buttons

Grayscale looping video or cover art inside a heavy black frame, always with a poster fallback

Components

• Frosted sticky header
• Framed hero media
• Release title + status
• Outline CTA button
• Custom audio player
• Tour dates table / mobile cards
• Discography accordion
• Featured video + thumbnail grid
• Bio timeline
• Booking contact cards
• Command palette quick nav
• Mobile drawer

Interactions

• Looping muted grayscale video in hero
• Scroll-reveal fades
• Header frosts on scroll
• Accordion expand to show tracklist
• Audio player play/pause/seek
• Table collapses to cards on small screens
• Drawer nav on mobile

Data

• Release{title, type: album|EP|single, year, label, cover, tracks[], links[]}
• Track{title, duration, previewSrc}
• TourDate{date, venue, city, country, ticketUrl}
• Video{title, category, duration, thumbnail, embedId}
• Milestone{year, text}
• Contact{role, name, email}

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 minimal website for a fictional solo artist called **Ottilie Barr**, centered on announcing the newest release. The audience is fans arriving from a social link who want to listen right away, plus bookers who need dates and contacts. The site should feel like a framed print in a quiet gallery: cream background, one striking piece of media, and tiny tracked labels.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Accordion, Table, Command, Drawer via Vaul), lucide-react, React Router (or anchored sections), Framer Motion for scroll reveals, and a custom audio hook around HTML5 `<audio>`. No backend; the booking form posts to one serverless function if you include one.

### Pages & layout
1. Header: tracked uppercase wordmark left and five tracked links right; transparent at the top, frosted cream with blur after scrolling.
2. Hero: a tall 4:5 frame with a thick black border containing a muted, looping grayscale video (with a poster image fallback so it is never empty), then the release title and "Out now" in bold tracked caps, and a full-width outlined "Buy / Listen / Download" button that opens a platform chooser.
3. Tour: a table (date, venue, city, tickets) that becomes stacked cards below 640px.
4. Music: accordion per release showing type, year and label; expanded rows show the tracklist with preview play buttons and streaming links.
5. Video: a featured player followed by thumbnails with duration and category.
6. About: short bio and a vertical year timeline.
7. Contact: cards for booking, management and press, plus an optional form.
A `⌘K` command menu jumps to sections and releases.

### Design system
Tokens: `--background: #f5f1eb; --foreground: #121212; --frame: #000000; --muted-foreground: #6b6b6b; --border: #d9d4cc (decorative); --input-border: #978973; --accent: #7547d1; --radius: 0`. Fonts: Spline Sans 400/600/700. Scale: labels 12–14px uppercase with 0.2em tracking; 32 / 20 / 16px for content headings; body 16px with line-height 1.6, max 65ch. Spacing: 8px base, 32px insets, 120px between sections. The frame border is 4px solid black; buttons are 1px outlines that fill black on hover. No shadows. Motion: 500ms ease-out fade-up; header blur transition 200ms. Light only.

### Components & interactions
- Platform chooser: a popover listing streaming services, each an external link.
- Audio preview: one track plays at a time; progress bar; pause when another starts; loading and error states.
- Accordion: single-open, chevron rotation, and keyboard support from Radix.
- Tour table: past dates are hidden or muted; an empty state reads "No dates announced -- join the list".
- Command menu: fuzzy search across sections and releases.

### Data & state
`Release{slug,title,type,year,label,cover,tracks[],links[]}`, `Track{title,duration,preview?}`, `TourDate{date,venue,city,country,ticketUrl?}`, `Video{title,category,duration,thumb,embedId}`, `Milestone{year,text}`, `Contact{role,name,email}`. Playing-track state lives in a context. Seed with fictional venues.

### Accessibility
Nav and meta gray is #6b6b6b, which holds 4.7:1 on #f5f1eb; the accent #7547d1 is 5.2:1 on cream; form inputs use the #978973 border. The hero video must be muted, have a pause control, and stop under `prefers-reduced-motion`. Give the frame's media a text alternative. Tracked 12px caps need font-weight 600 for legibility. The table needs proper `<th scope>`; the card view keeps labels. The command menu must also be reachable via a visible button. Verified contrast: body text on cream background: #121212 on #f5f1eb = 16.65:1; muted nav/meta on cream: #6b6b6b on #f5f1eb = 4.74:1; accent link on cream: #7547d1 on #f5f1eb = 5.22:1; form input border on cream: #978973 on #f5f1eb = 3.04:1.

### Security
Static: external links use `rel="noopener noreferrer"` and only https. If the booking form exists, validate with zod on the client and server, add a honeypot, and rate-limit. No keys in the client.

### Performance & SEO
The hero video should be under 2 MB (WebM/MP4) with a poster; `preload="metadata"`. Lazy-load thumbnails; `preload="none"` on audio previews. MusicAlbum and Event JSON-LD, plus OG image of the cover. Target LCP under 2s since the page is light.

### Guardrails
- Use original copy and placeholder media; no real artist names or labels.
- Don't fabricate press quotes.
- Collect only what the booking form needs.
- Keep components small and typed, never use `any`, and show media errors visibly.
- Done when: the hero frame always shows a poster or video (never an empty box); only one audio preview plays at a time; the tour table converts to cards on mobile; the command menu reaches every section; Lighthouse accessibility is 95 or higher.

Open the builderAll templatesThis palette on its own