Dust Bowl Radio

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

Heebo is a Helvetica-like sans with a clean light weight, which gives the thin, cinematic headline over the sunset photography.

• HeeboHeadings: hero title 128px at 300, -3.2px
• HeeboBody: body 16px at 1.6, 12px uppercase labels

Who it is for

• Independent rock and Americana bands
• Producers building credibility with labels
• Session musicians promoting services
• Fans following releases and tours

Layout

1. Split nav: Tour / Shop left, outlined pill wordmark center, Album / Videos / Contact right
2. Full-viewport concert photo hero with radial vignette, small broadcast badge chip, big light-weight title, player controls (queue, shuffle, prev, play, next) and 'Now streaming' caption
3. 'Latest additions' 4-card row: music, merch, video, tour with icon + category label, title and status line
4. Album catalog with sticky artwork sidebar
5. Tour dates list with availability badges
6. Merch grid by category with badges and detail pages
7. Video gallery
8. Band identity/about page and contact

Palette

Warm, cinematic, nostalgic, rugged, glowing. Sunset stage lights and desert tones evoke a road-trip rock record.

• background#000000
• text#ffffff
• card#0d0d0d
• secondary#1a1a1a
• decorative border#2e2e2e
• sunset orange glow (indicators, active states)#d9772b
• muted text#a3a3a3
• hero 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

System sans (Helvetica/SF) light 300 at 128px with -3.2px tracking for the hero title only (display size); everything below 32px uses 400+ (the system face is not on Google Fonts; a vibld project loads Heebo)

Body

System sans 16px, line-height 1.6; nav and short labels 12px+ uppercase with wide tracking (the system face is not on Google Fonts; a vibld project loads Heebo)

Thin, large headline over rich photography feels cinematic; tiny tracked labels provide structure

Spacing and imagery

Hero 100vh; 48px side gutters; 4-column card grid with 20px gaps and 8px image radius; pill wordmark and chips

Generated-looking warm concert and desert photography, album art with retro script titles, merch mockups, all in orange/amber sunset palette

Components

• Split navigation with pill wordmark
• Photo hero with vignette
• Now-playing badge chip
• Music player controls
• Latest additions card row
• Category label with icon
• Album catalog with sticky sidebar
• Tour list with status badges
• Merch grid with badges
• Video gallery
• Toast notifications
• Mobile drawer

Interactions

• Staggered entrance animation on hero elements
• Play/pause/skip/shuffle controls update now-streaming caption
• Player condenses into header on scroll
• Card image zoom on hover
• Dark-glass hover states
• Toast on add-to-cart or copy link
• Mobile nav drawer

Data

• Album{title, year, format, cover, tracks[]}
• Track{title, duration, src}
• TourDate{date, city, venue, status: available|soldout|presale, ticketUrl}
• Product{name, category, price, badge, images[]}
• Video{title, thumbnail, embedId}
• Update{type: music|merch|video|tour, title, status, image, 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 desert-rock group called **Dust Bowl Radio**. The audience is fans who want the newest song, merch drop or show, and venue bookers checking that the band is legitimate. The home page leads with a concert photo, a working mini player and a "latest additions" feed. Inner pages cover albums, tour, shop, videos, the band and contact.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, React Router, Framer Motion for staggered entrances and the sticky player transition, Sonner for toasts, Vaul for the mobile drawer, and Embla for a mobile swipe row. Audio uses the HTML5 `<audio>` element with a player context. No backend; the shop links to a hosted storefront.

### Pages & layout
1. Header: left links (Tour, Shop), a centered outlined pill with the band name in tracked caps, and right links (Album, Videos, Contact).
2. Hero (100vh): warm stage photo with a radial vignette, a small glass chip with a broadcast icon, a large light-weight single title, player controls (queue, shuffle, previous, play, next), and a "Now streaming -- …" caption.
3. Latest additions: four cards (Music, Merch, Video, Tour), each with square art, a small icon and category label, a bold title and a status line such as "Just dropped".
4. Albums: grid of six; the detail page keeps the artwork sticky on the left while the tracklist and credits scroll.
5. Tour: date rows with Available / Presale / Sold out badges.
6. Shop: category tabs, product cards with badges, and a product detail page with a gallery.
7. Videos, Band (members and story), and Contact.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --card: #0d0d0d; --secondary: #1a1a1a; --border: #2e2e2e; --muted-foreground: #a3a3a3; --glow: #d9772b` (orange glow for active states and indicators, and as a button fill with black text). Fonts: Heebo 300/500/700 (a light display weight is key). Scale: clamp(64px, 10vw, 128px) title with -2.5% tracking; 24 / 16 / 14 / 12px (nothing smaller; the 300 weight is used only at 32px and above, all smaller text is 400+); body line-height 1.6, max 70ch; labels uppercase with 0.2em tracking, short labels only. Radius: 8px cards and pill chips. Glass: `bg-black/60 backdrop-blur-md border-white/15` (dark glass so white chip text holds 4.5:1 over any photo; the border is decorative). Motion: 80ms stagger, 500ms ease-out; the player docks into the header after the hero with a 300ms layout animation. Dark only.

### Components & interactions
- Player: play/pause toggles the icon and `aria-pressed`; next and previous update the caption; shuffle has a visible on state; buffering spinner; an error toast if a track fails.
- Update cards: hover zooms art and brightens the title; focus ring; skeleton loading.
- Status badges carry both text and color.
- Shop: "View in store" opens the hosted product; copy-link toast.
- Drawer menu on mobile with focus trap.

### Data & state
`Album{slug,title,year,format,cover,tracks[]}`, `Track{title,duration,src}`, `TourDate{date,city,venue,status,ticketUrl?}`, `Product{slug,name,category,price,badge?,images[],storeUrl}`, `Video{title,thumb,embedId}`, `Update{kind,title,status,image,href}`. Player state lives in a context that persists across routes. Seed invented songs, cities and products.

### Accessibility
Give the hero a lower gradient scrim reaching 60% black so the 300-weight title and the small caption stay above 4.5:1 over the brightest stage light; the orange #d9772b is used for indicators and fills, never small text on the photo. Player controls need `aria-label`s and must be at least 44px targets. Do not autoplay audio. Label card category icons with text. Honor reduced motion by removing staggered entrances and the dock animation. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; muted status lines on cards: #a3a3a3 on #0d0d0d = 7.7:1; hero title/caption over 60% black scrim on white-worst-case photo: #ffffff on #666666 = 5.74:1; black text on orange button: #000000 on #d9772b = 6.62:1.

### Security
Never collect payment data; send buyers to a hosted checkout. External links use `rel="noopener noreferrer"`. Validate any contact form with zod on the client and server, with a honeypot and a rate limit. No secrets in client code.

### Performance & SEO
Responsive WebP/AVIF images, lazy-loaded below the hero; `preload="none"` on audio; route-level code splitting. MusicAlbum, Event and Product JSON-LD; per-page OG images. Target LCP under 2.5s on 4G.

### Guardrails
- Use original copy and placeholder or generated imagery; no real band names, venues or logos.
- Don't fabricate reviews or sales claims.
- Store no customer data.
- Keep components small and typed, never use `any`, and surface errors visibly.
- Done when: the mini player plays, skips and persists across routes; the docked player never overlaps the header links; all badge states include text; the album detail sidebar stays sticky on desktop and stacks on mobile; Lighthouse accessibility is 95 or higher.

Open the builderAll templatesThis palette on its own