Static Chapel

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

Caveat Brush is the heavier brush cut of the same hand, better for a photocopied gig poster; Bebas stays for the rigid caps, and Chivo is a gritty grotesk body.

• Bebas NeueHeadings: section heads 72px condensed uppercase
• Caveat BrushHandwriting: band name 160px, script only at 24px+
• ChivoBody: body 16px, 12px uppercase nav

Who it is for

• Post-punk and alternative bands
• Labels presenting roster acts
• Bands pitching to booking agents
• Fans following new drops

Layout

1. Header: condensed tracked wordmark left, uppercase tracked links (Music, Merch, Videos, Tour, Info) right; gains hairline border on scroll
2. Split hero: left black panel with script 'Since' line, huge brush-script band name, script tagline and rotated vertical genre words; right half grayscale concert-crowd photo with condensed wordmark bottom-right
3. 'Latest additions' condensed heading
4. 4 dark bordered cards: icon + category, condensed uppercase title, status line, white pill CTA (Listen now / Shop now / Watch now / Get tickets)
5. Release showcase pages with large artwork and streaming links
6. Merch catalog by category
7. Video library
8. Tour calendar
9. Band profile page
10. Mobile full-screen menu

Palette

Raw, atmospheric, monochrome, gritty, anthemic. It feels like a gig poster photocopied in black and white.

• background#000000
• text#ffffff
• card#0d0d0d
• decorative border#333333
• muted text#a3a3a3
• secondary#1a1a1a
• photo scrim (black 60%)#00000099

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

Caveat Brush brush script at 160px for band name (script only at 24px+); Bebas Neue 72px condensed uppercase for section headings and card titles

Body

Chivo 16px, line-height 1.6; nav 12px uppercase weight 500 with wide tracking

Handwritten script vs rigid condensed caps creates a DIY-meets-poster tension

Spacing and imagery

Hero split 50/50 at 100vh; 24px page gutters; 4-column card row with 20px gaps; 8px card radius, pill buttons

Grainy grayscale live-concert crowd photography with stage lights; release artwork and merch photos on inner pages

Components

• Split-screen hero
• Script band name
• Vertical rotated genre tags
• Condensed wordmark overlay
• Latest additions cards
• Category icon labels
• Pill CTA buttons
• Release detail page
• Merch grid by category
• Video gallery
• Tour calendar/list
• Band member profiles
• Mobile menu

Interactions

• Page transition animations between routes
• Hero image slow fade/parallax on scroll
• Card hover border brightens
• Pill button invert on hover
• Mobile full-screen menu
• Date picker/calendar for tour
• Video modal playback

Data

• Release{title, type, date, artwork, description, links[]}
• Product{name, category: vinyl|cd|apparel|print|cassette, price, image, url}
• Video{title, kind, thumbnail, embedId}
• Show{date, city, venue, status, ticketUrl}
• Member{name, role, photo}
• Update{kind, title, status, cta, 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 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 band website for a fictional post-punk group called **Static Chapel**. The audience is booking agents and labels judging whether the band is serious, and fans checking for the newest release, merch drop or show. The site should look like a monochrome gig poster: a split hero with a handwritten name, condensed caps headings, and a strip of "latest additions" cards.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog, Sheet, Tabs, Calendar via React Day Picker), lucide-react, React Router, and Framer Motion for route transitions and hero reveals. Embla handles a swipeable card row on mobile. No backend; commerce and tickets link to hosted services.

### Pages & layout
1. Header: condensed tracked wordmark left, tracked uppercase links right; transparent over the hero, then solid black with a hairline border.
2. Split hero (100vh): the left half is black with a script "Since 2019" set at 28px, the band name in large brush script, a script tagline at 28px or larger, and three or four genre and place words set vertically in faint tracked caps; the right half is a grainy grayscale crowd photo with the wordmark in condensed caps at the bottom right over a 60% black corner gradient.
3. Latest additions: a condensed heading and four bordered dark cards (Music, Merch, Video, Tour), each with an icon label, a condensed title, a status line and a white pill CTA.
4. Music: release showcase grid; detail pages with large art, notes and streaming links.
5. Merch: category tabs (vinyl, CD, apparel, print, cassette).
6. Videos: grid with kind tags (music video, live, behind the scenes).
7. Tour: list plus a month calendar view with dots on show days.
8. Info: band story, members and press contacts.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --card: #0d0d0d; --secondary: #1a1a1a; --border: #333333; --muted-foreground: #a3a3a3`. Fonts: Caveat Brush for the name and flourishes only (never below 24px, with a cursive fallback and the text repeated in a readable H1), Bebas Neue for headings, Chivo 400/500 for body. Scale: clamp(96px, 12vw, 160px) script name; 72 / 40 / 22px Bebas; 16 / 14 / 12px body (16px paragraphs at line-height 1.6, max 70ch; 12px only for weight-500 labels); nav 12px with 0.2em tracking. Radius: 8px cards, pill buttons. Borders 1px #333. Motion: 400ms route fade, 150ms button invert, slight 1.03 photo scale on scroll. Dark only.

### Components & interactions
- Card: hover brightens the border to #666; the CTA inverts on hover; focus ring white; the whole card is not a link, only the CTA, to avoid nested links.
- Tour calendar: selecting a day filters the list; empty days show "No show".
- Video: opens in a dialog; the iframe loads only on open.
- Merch tabs: synced to URL; out-of-stock badge.
- Mobile: the split hero stacks (photo on top, name below); full-screen menu with focus trap.

### Data & state
`Release{slug,title,type,date,art,notes,links[]}`, `Product{name,category,price,image,url,inStock}`, `Video{title,kind,thumb,embedId}`, `Show{date,city,venue,status,ticketUrl?}`, `Member{name,role,photo}`, `Update{kind,title,status,cta,href}`. Seed with invented song names and cities.

### Accessibility
The script name must also exist as readable H1 text (the visible script can be the H1 if it stays legible). Vertical genre tags are decorative, so repeat them in a visually hidden list. Faint tracked text must still meet 4.5:1, so use #a3a3a3 or lighter on black (6.9:1 on #1a1a1a as well). The photo wordmark sits over a 60% black gradient. Card borders (#333) are decorative; the white pill CTA carries the affordance. Pill buttons need a 44px minimum height. The calendar needs Radix keyboard navigation and labelled days. Reduced motion removes route transitions. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; muted status lines on cards: #a3a3a3 on #0d0d0d = 7.7:1; black text on white pill CTA: #000000 on #ffffff = 21.0:1; wordmark over 60% black gradient on white-worst-case photo: #ffffff on #666666 = 5.74:1.

### Security
Static: only https URLs in data, `rel="noopener noreferrer"` on external links, privacy-enhanced video embeds, hosted checkout for merch. No keys in the client.

### Performance & SEO
Serve the crowd photo as grayscale AVIF (converted at build time) with high priority; lazy-load others; subset Caveat Brush and Bebas to Latin. Code-split routes. MusicGroup, MusicAlbum and Event JSON-LD; per-page OG images.

### Guardrails
- Use original copy and placeholder photos; no real band names, labels or logos.
- Don't invent press quotes or chart claims.
- Collect no personal data.
- Keep components small and typed, never use `any`, and show broken media visibly.
- Done when: the split hero stacks cleanly at 375px; all four update cards link to real routes; the tour calendar and list stay in sync; the H1 is readable by screen readers; route transitions respect reduced motion.

Open the builderAll templatesThis palette on its own