Ashen Veil

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

Archivo Black gives the heavy, tight, loud headline over smoky photography, and PT Sans is a plain humanist body.

• Archivo BlackHeadings: headline 128px at -6.4px, second line reduced opacity
• PT SansBody: body 16px at 1.6, 12px uppercase nav and eyebrows

Who it is for

• Rock and alternative bands
• Bands selling merch direct to fans
• Small labels with several artist pages
• Fans checking presale and sold-out shows

Layout

1. Header: bold monogram left, centered tracked links (Music, Merch, Videos, Tour, Info), white 'Buy tickets' pill with ticket icon right
2. Full-viewport concert photo with red haze and Ken Burns zoom, film-grain overlay
3. Centered short rule, two-line band name (first word white, second translucent), 24-bar animated waveform, tracked tagline
4. Bottom row of 3 horizontal tiles, each with vertical category label, thumbnail, eyebrow (New release / Just dropped / New upload), title, meta and chevron, with color-tinted borders
5. Releases page with sticky two-column layout
6. Merch grid with category badges
7. Videos gallery
8. Tour list with status pills
9. Slide-over mobile nav

Palette

Smoky, loud, cinematic, gritty, immersive. It captures the moment the lights hit the crowd.

• background#000000
• text#ffffff
• muted meta text#a3a3a3
• card#0d0d0d
• decorative border#2e2e2e
• haze red (imagery, merch tile tint)#7a2e2e
• music tile border blue (decorative)#2f4f7f
• video tile border amber (decorative)#7a5a2a
• available status green#4ade80
• presale status amber#f5b54a
• hero overlay (black 60%)#00000099

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

System sans bold 128px with -6.4px tracking; second line reduced opacity (the system face is not on Google Fonts; a vibld project loads Archivo Black)

Body

System sans 16px, line-height 1.6; nav and eyebrows 12px uppercase, weight 500, with wide tracking (the system face is not on Google Fonts; a vibld project loads PT Sans)

Heavy tight sans headline with small tracked caps; relies on photography and color tints for character

Spacing and imagery

Hero 100vh; 64px side insets; 3-column tile row with 16px gaps and 12px radius; pill CTA

Red-lit concert photo with smoke and raised hands, slow zoom, under a 60% black overlay; small square thumbnails for release art, merch rack and live DJ shot; SVG grain overlay

Components

• Monogram header with ticket pill
• Ken Burns hero
• Two-tone stacked band name
• Animated waveform equalizer
• Category tiles with vertical labels
• Release page with sticky art column
• Merch cards with category badges
• Video grid
• Tour rows with status pills
• Grain texture overlay
• Slide-over mobile nav

Interactions

• Continuous slow zoom on hero image
• 24-bar waveform animates like an equalizer
• Tile hover brightens border and nudges chevron
• Slide-over nav on mobile
• Status pills color-coded
• Slug-based deep links to items
• Sticky column on release pages

Data

• Release{slug, title, type, date, cover, tracks[], links[]}
• MerchItem{slug, name, category, price, edition, image, url}
• Video{slug, title, kind, thumbnail, embedId}
• Show{date, city, venue, status: available|presale|soldout, ticketUrl}
• Highlight{kind: music|merch|video, eyebrow, title, meta, 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 dark portfolio site for a fictional alternative rock band called **Ashen Veil**. The audience is fans who want the newest single, merch or live video, and people ready to buy tickets. The home screen is one cinematic frame: a smoky concert photo, the band name, a pulsing waveform and three "what's new" tiles. Inner pages cover releases, merch, videos, tour and band info.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Sheet for the slide-over nav, Badge, Tabs), lucide-react, React Router with slug routes, and Framer Motion for the Ken Burns zoom, waveform bars and tile hovers. Embla provides a mobile swipe row for tiles. No backend; tickets and merch link to hosted services.

### Pages & layout
1. Header: bold two-letter monogram left, centered tracked links, a white "Buy tickets" pill with ticket icon right.
2. Home (100vh): a red-hazed concert photo with a slow zoom, a 60% black overlay behind the text, and SVG grain at about 6% opacity; a short rule; the band name on two lines (first word solid white, second at 70% opacity); a 24-bar waveform; a tracked tagline; and a bottom row of three horizontal tiles, each with a vertical category label (Music, Merch, Video), a square thumbnail, an eyebrow ("New release"), a title, a meta line and a chevron. Each tile border is tinted differently (blue, red, amber).
3. Releases: list and a detail page with sticky cover art on the left and scrolling tracklist and notes on the right.
4. Merch: category tabs, cards with category and edition badges.
5. Videos: grid with kind tags; detail by slug.
6. Tour: rows with status pills; the "Buy tickets" header pill jumps to the next available show.
7. Info: band bio and contacts.

### Design system
Tokens: `--background: #000000; --foreground: #ffffff; --card: #0d0d0d; --border: #2e2e2e; --tint-music: #2f4f7f; --tint-merch: #7a2e2e; --tint-video: #7a5a2a; --muted-foreground: #a3a3a3; --status-available: #4ade80; --status-presale: #f5b54a; --radius: .75rem`. Tile tints are decorative borders; each tile's text and link carry the meaning. Fonts: PT Sans 700/800 for display (tight -5% tracking) and PT Sans 400/500 for body. Scale: clamp(64px, 10vw, 128px) name; 20 / 16 / 13 / 12px (16px body at line-height 1.6, max 70ch; nothing below 12px); eyebrows 12px uppercase, weight 500, with 0.15em tracking, short labels only. Motion: 30s zoom 1 → 1.1 alternate; waveform bars animate `scaleY` with random 600–1200ms durations; tile hover 200ms. Dark only.
- Typeface: Archivo Black (Google Fonts) for headline 128px at -6.4px, second line reduced opacity.

### Components & interactions
- Waveform: 24 `span` bars, transform-only animation; static under reduced motion.
- Tile: hover brightens the tinted border and slides the chevron 4px; focus ring; the whole tile is one link with a clear accessible name.
- Status pills: Available (#4ade80 green outline and text), Presale (#f5b54a amber), Sold out (muted #a3a3a3, strikethrough, no link) -- each with text.
- Slide-over nav: focus trap and Esc to close.
- Loading skeletons for images; fallback art if an image fails; 404 page for unknown slugs.

### Data & state
`Release{slug,title,type,date,cover,tracks[],links[]}`, `MerchItem{slug,name,category,price,edition?,image,url}`, `Video{slug,title,kind,thumb,embedId}`, `Show{date,city,venue,status,ticketUrl?}`, `Highlight{kind,eyebrow,title,meta,href}`. Highlights are derived from the newest item of each collection. Seed invented titles and cities.

### Accessibility
The hero sits under a 60% black overlay, so the solid first word holds 5.7:1 and the 70%-opacity second word (display size only) holds 3.8:1 over a white-worst-case photo. Gray meta text on tiles is #a3a3a3 (7.7:1 on #0d0d0d). The waveform is decorative (`aria-hidden`). Vertical labels are rotated text, so give tiles an explicit `aria-label` such as "Music: Silent Thunder, latest single". The grain overlay must not intercept pointer events. Reduced motion stops the zoom and waveform. Verified contrast: body text on background: #ffffff on #000000 = 21.0:1; muted meta on card: #a3a3a3 on #0d0d0d = 7.7:1; band name over 60% black overlay on white-worst-case photo: #ffffff on #666666 = 5.74:1; 70%-opacity second word: #d1d1d1 on #666666 = 3.76:1; available pill text on card: #4ade80 on #0d0d0d = 11.15:1.

### Security
Static: https-only data URLs, `rel="noopener noreferrer"` on ticket and store links, privacy-enhanced video embeds, no secrets client-side. Merch purchases go to a hosted checkout.

### Performance & SEO
Serve the hero as AVIF with priority; keep grain as a tiny inline SVG. Lazy-load tile thumbnails and inner-page images; code-split routes. MusicGroup, MusicAlbum, Product and Event JSON-LD; per-slug meta and OG images.

### Guardrails
- Use original copy and placeholder photos; no real band names or logos.
- Don't invent reviews or chart claims.
- Collect no personal data.
- Keep components small and typed, never use `any`, and show missing-media states.
- Done when: highlight tiles update automatically from data; every slug route resolves or shows a 404; status pills include text; reduced motion stops all looping animation; the slide-over nav is keyboard-operable.

Open the builderAll templatesThis palette on its own