Brasa

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

Syne's wide, idiosyncratic bold reads like a streetwear drop, and Manrope is a clean geometric body that stays out of its way.

• SyneHeadings: hero 128px 700 at -3.2px, 12px uppercase section labels
• ManropeBody: body 16px, 12px tracked uppercase nav

Who it is for

• Reggaeton and Latin urban artists
• Independent artists selling direct to fans
• Artist managers with several clients
• Fans buying tickets and merch

Layout

1. Fixed black nav: letter-spaced wordmark left, MUSIC / MERCH / VIDEOS / TOUR / INFO right with a hairline divider
2. Full-viewport video hero with giant bottom-left headline ending in a red dot, a row of Spanish call-to-action links and a red square scroll-down button
3. Latest releases: 3-column cards with type · year eyebrow and title, 'View all releases' red link
4. Upcoming shows: rule-headed list of rows with large date number, tour name, city, and TICKETS or red SOLD OUT
5. 'All tour dates' link
6. Separate pages: Music catalog, Merch store, Videos gallery, Tour, Info/contact

Palette

Bold, raw, minimal, urban, high-contrast. Pure black with a single red accent feels like a streetwear drop page.

• background#000000
• text#ffffff
• accent red (fills, scroll button, dot)#eb1414
• accent red text (links, sold out)#ef4141
• card#0d0d0d
• secondary#1a1a1a
• decorative rule#2e2e2e
• muted text#999999

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

Syne bold, 128px hero with -3.2px tracking, sentence case; section labels 12px uppercase weight 600 with 2.4px tracking

Body

Manrope 16px regular, line-height 1.6; nav 12px uppercase weight 500 widely tracked

Geometric grotesk headlines against neutral Manrope body; tiny tracked labels create a streetwear-label feel

Spacing and imagery

Sparse and editorial; 64px side gutters, square corners (0 radius) everywhere, thin #2e2e2e rules between list rows, big empty hero space

Full-screen background video in hero, dark moody black-and-white release artwork cropped wide, video thumbnails; black gradient overlays reaching 60% opacity behind any overlaid text

Components

• Fixed minimal nav
• Video background hero
• Headline with red accent period
• Inline CTA link row
• Red square scroll button
• Release card with type/year eyebrow
• Tour row with date number and status
• Status badge (tickets/presale/sold out)
• Merch product grid with category tags
• Video gallery with modal player
• Info/contact block
• Footer

Interactions

• Hero video autoplays muted with gradient overlay
• Scroll-down button smooth-scrolls
• Page transitions fade between routes
• Release covers zoom slightly on hover
• Ticket link arrow slides on hover
• Merch category filter
• Video thumbnails open lightbox player
• Nav link underline/brighten on hover

Data

• Release{title, type: LP|album|single|EP|mixtape, year, cover, streamingLinks[]}
• Show{date, tour, city, venue, price, status: available|presale|soldout, ticketUrl}
• Product{name, category: vinyl|cd|apparel|print|cassette, price, image, storeUrl}
• Video{title, thumbnail, embedUrl, year}

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 multi-page website for a fictional Latin urban artist called **Brasa**. The audience is fans who want to stream the latest release, grab tickets, and buy merch, plus promoters who need a quick overview. The site should feel like a minimal streetwear drop: black, white, one hot red accent, and headlines in Spanish.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog, Tabs, Sheet), lucide-react, React Router for the five sections, Framer Motion for route fades, and Embla for a mobile release carousel. No backend: tickets and merch link to hosted services; an optional contact form posts to one serverless function.

### Pages & layout
1. Fixed header: tracked uppercase wordmark left, five small uppercase links right, a 1px bottom rule.
2. Home hero: full-viewport muted looping video under a black gradient; a huge bottom-left headline ending in a red dot; a row of four phrase links ("listen to the music", "shop the merch", and so on) with the key words bold; a red square down-arrow button bottom-right. Use a poster image so the hero never renders as empty black.
3. Latest releases: three wide cover cards with a "LP · 2025" eyebrow and title; red "View all releases →" link.
4. Upcoming shows: a label with a rule extending to the right, then rows of large day number, tour name, city, and either "Tickets →" or a red "Sold out".
5. Music page: filterable grid by release type with streaming links.
6. Merch page: category chips (vinyl, CD, apparel, print, cassette), product cards, and out-of-stock state.
7. Videos page: thumbnail grid that opens a lightbox player.
8. Tour page: full list grouped by month with presale badges. Info page: bio, press kit download, booking contacts.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --accent: #eb1414; --accent-text: #ef4141; --card: #0d0d0d; --secondary: #1a1a1a; --border: #2e2e2e; --muted-foreground: #999999; --radius: 0`. Fonts: Syne 700 for display and Manrope 400/600 for body. Scale: clamp(64px, 10vw, 128px) hero with -2.5% tracking; 32 / 20 / 16px; labels 12px uppercase, weight 600, with 0.2em tracking (short labels only); body line-height 1.6, max 70ch. Spacing: 64px gutters, 96px section gaps, 24px card gaps. Square corners and no shadows. Motion: 200ms color transitions, 400ms route fade, 1.05 image scale on hover. Dark only.

### Components & interactions
- Status badge variants: available (white outline), presale (white fill), sold out (#ef4141 red text, disabled link).
- Release and product cards: hover zoom, focus ring in #eb1414 red, a loading skeleton, and an image fallback on error.
- Merch filter: chips with a selected state, an empty state message, and a URL param.
- Video lightbox: focus trap, Esc to close, and the iframe loads only when opened.

### Data & state
Typed files: `Release{title,type,year,cover,links{spotify?,apple?,youtube?}}`, `Show{date,tour,city,venue,price?,status,ticketUrl?}`, `Product{name,category,price,image,url,inStock}`, `Video{title,thumb,embedId,year}`. Filters live in URL search params. Seed with invented song titles in Spanish and fictional venues.

### Accessibility
White on black is 21:1. All red text (links, "Sold out") uses `--accent-text` #ef4141, which passes on every surface; #eb1414 is kept for fills, the headline dot and the scroll button. The hero video sits under a black gradient reaching 60%. Never communicate "sold out" by color alone; keep the words. Small tracked nav text should stay at 12px or larger with sufficient weight. Provide a pause control for the hero video and stop it under `prefers-reduced-motion`. Add `lang="es"` on Spanish phrases. Cover images need alt text naming the release. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; red link / sold-out text on background: #ef4141 on #000000 = 5.5:1; hero headline over 60% black scrim on white-worst-case video: #ffffff on #666666 = 5.74:1.

### Security
Allow only https links in data files and add `rel="noopener noreferrer"` to external store and ticket links. If a contact form exists, validate with zod on the client and in the function, add a honeypot, and rate-limit. Never collect payment details on-site; always hand off to a hosted checkout. Load video embeds with privacy-enhanced domains.

### Performance & SEO
Compress the hero video (under 3 MB, WebM + MP4) with a poster; lazy-load covers and product images; code-split each route. Add Event JSON-LD for shows and Product JSON-LD for merch, plus per-page titles and OG images. Target CLS under 0.05.

### Guardrails
- Use original copy and placeholder artwork only; no real artist names, labels or logos.
- Don't fabricate fan or press quotes.
- Store no customer data.
- Keep components small and typed, never use `any`, and handle broken media visibly.
- Done when: the hero shows a poster before the video loads; the show list displays all three statuses correctly; merch filters deep-link; the lightbox is keyboard-operable; every route has a unique title and description.

Open the builderAll templatesThis palette on its own