Oriel Sands

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

Montserrat's black weight gives the tight, heavy geometric club-flyer display, against the techy grotesk Bai Jamjuree.

• MontserratHeadings: headline 96px 900 uppercase at -4.8px
• Bai JamjureeBody: body 16px at 1.6, 12px uppercase nav 600

Who it is for

• Electronic producers building an artist brand
• DJs announcing a new release
• Independent artists collecting fan emails
• Collectives promoting multiple releases

Layout

1. Floating rounded glass nav bar: streaming links (Spotify, Apple Music, SoundCloud) left, bold wordmark center, cream 'Pre-save' pill right
2. Full-bleed color editorial photo (three figures in cream suits) with dark tint
3. Tracked 'Coming soon' eyebrow at top center
4. Huge heavy uppercase title of the release near bottom
5. Underline-style email input with 'Subscribe' text button, helper text below
6. Inner pages: releases (single/EP/album/mixtape), tour with 3-state badges and price tiers, merch with category badges, video gallery with duration badges, bio

Palette

Stylish, anticipatory, warm, fashion-forward, confident. It feels like a teaser campaign for a record drop.

• background#0d1110
• text (cream)#faf7eb
• helper text on hero#cfcdc6
• muted text (sold out, meta)#8f9693
• primary yellow#f9ce1f
• accent gold#dcb518
• card#151918
• secondary#1e2422
• decorative border#232927
• underline input border on hero#aaa8a0
• hero overlay (#0d1110 at 70%)#0d1110b3

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

Montserrat black (900) uppercase, 96px with -4.8px tracking

Body

Bai Jamjuree 16px, line-height 1.6; nav and short labels 12px uppercase weight 600, tracked

Tight, heavy geometric display against a techy grotesk gives a club-flyer punch

Spacing and imagery

Hero single 100vh frame; nav inset 32px with 24px radius glass bar; centered ~680px signup form; 12px (.75rem) radius cards on inner pages

Full-bleed color fashion/editorial photograph with muted teal-brown grade under a 70% #0d1110 overlay; cover art and merch on inner pages

Components

• Floating glass nav bar
• Streaming text links
• Pre-save pill button
• Coming soon eyebrow
• Oversized release title
• Underline email field with inline submit
• Release cards by type
• Tour rows with price tiers and status badges
• Merch cards with category badges
• Video grid with duration badges
• Bio section

Interactions

• Email subscribe with validation and success state
• Pre-save opens platform chooser
• Glass nav hover highlight
• Fade-up entrance for title
• Badge states for tickets
• Mobile menu drawer
• Countdown optional to release date

Data

• Release{title, type: single|EP|album|mixtape, date, cover, description, links[]}
• TourDate{date, venue, city, tiers[{name, price}], status}
• MerchItem{name, category, price, image, url}
• Video{title, duration, thumbnail, embedId}
• Subscriber{email, created_at}

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 pre-release campaign site for a fictional melodic house producer called **Oriel Sands**. The audience is existing fans and new listeners arriving from social teasers. The home page is a "coming soon" landing for the next release that collects email sign-ups and pre-saves. Secondary pages hold the release catalog, tour dates, merch and videos.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Popover, Dialog, Badge, Sheet), lucide-react, React Router, Framer Motion for entrance and countdown transitions, react-hook-form + zod, and date-fns for the release countdown. Backend: one Supabase table or edge function for sign-ups (or a mailing-list provider behind an edge function).

### Pages & layout
1. Floating glass nav: a wide rounded bar inset from the edges with plain streaming links left, a bold wordmark center, and a cream "Pre-save" pill right.
2. Hero (100vh): a full-bleed editorial color photograph with a dark overlay of #0d1110 at 70%; a tracked "Coming soon" eyebrow; an optional countdown (days, hours, minutes); a massive heavy uppercase release title near the bottom; an underline email input with a "Subscribe" text button and helper text.
3. Releases: grid filtered by type (single, EP, album, mixtape), each with a detail page.
4. Tour: rows with date, venue, city, price tiers (early bird, general, VIP) and status badges.
5. Merch: cards with category badges and store links.
6. Videos: thumbnails with duration badges.
7. About: bio and press photos.

### Design system
Tokens: `--background: #0d1110; --foreground: #faf7eb; --primary: #f9ce1f; --primary-foreground: #0d1110; --accent: #dcb518; --card: #151918; --secondary: #1e2422; --border: #232927 (decorative); --muted-foreground: #8f9693; --helper: #cfcdc6; --input-underline: #aaa8a0; --radius: .75rem`. Fonts: Montserrat 700/900 for display and Bai Jamjuree 400/600 for body. Scale: clamp(56px, 9vw, 120px) title with -5% tracking; 32 / 20 / 16 / 12px (body 16px, line-height 1.6, max 65ch; 12px only for weight-600 labels); eyebrows 12px with 0.3em tracking, short labels only. Glass nav: `bg-[#0d1110]/70 backdrop-blur-lg border border-white/15 rounded-3xl` (dark glass so cream links hold 4.5:1; the border is decorative). Motion: title fades up 600ms ease-out; countdown digits flip in 250ms. Dark only.

### Components & interactions
- Email form: labelled input, zod email check, loading state on submit, success message replacing the form, error message with retry, and duplicate-email message.
- Pre-save: a popover listing platforms with icons; each is an external link.
- Countdown: switches to "Out now" with a listen button once the date passes.
- Badges: available (yellow), presale (outline yellow), sold out (muted #8f9693 with text).
- Tour tier chips show price and availability.
- Mobile: the nav collapses to wordmark plus menu and pre-save.

### Data & state
`Release{slug,title,type,date,cover,blurb,links[]}`, `TourDate{date,venue,city,tiers[],status,ticketUrl?}`, `MerchItem{name,category,price,image,url}`, `Video{title,duration,thumb,embedId}`, `subscribers(email unique, source, created_at)`. The release date lives in config so the countdown and hero copy update automatically. Seed invented venues.

### Accessibility
Cream on the darkened photo must stay at or above 4.5:1, so the hero overlay is #0d1110 at 70% (6.7:1 even over a white-worst-case photo). Helper text uses #cfcdc6 and the input underline #aaa8a0 so both stay legible and visible over the overlay. The underline input still needs a visible label (visually hidden label plus a clear placeholder is not enough alone, so add an `aria-describedby` helper). The countdown uses `aria-live="off"` to avoid chatter, with a static date also given. Yellow #f9ce1f with dark text is high contrast for buttons. Verified contrast: body text on background: #faf7eb on #0d1110 = 17.71:1; hero title/eyebrow over 70% overlay on white-worst-case photo: #faf7eb on #565858 = 6.67:1; helper text over hero overlay: #cfcdc6 on #565858 = 4.5:1; dark text on yellow pre-save / available button: #0d1110 on #f9ce1f = 12.56:1.

### Security
Validate email with zod on the client and in the edge function; add a honeypot and IP rate limit; RLS on `subscribers` allows anonymous insert only. Use double opt-in. Provider API keys live in edge-function env only. External links get `rel="noopener noreferrer"`.

### Performance & SEO
The hero photo is the LCP: preload, AVIF, under 300 KB. Lazy-load inner pages and code-split them. OG image built from the hero and title; MusicAlbum JSON-LD with the release date. Target LCP under 2s.

### Guardrails
- Use original copy and placeholder photography; no real artists, labels or platform logos beyond plain text links.
- Don't fabricate pre-save counts or quotes.
- Store only the email and signup source.
- Keep components small and typed, never use `any`, and surface errors visibly.
- Done when: sign-up handles success, duplicate and error states; the countdown flips to "Out now" after the date; the nav collapses correctly on mobile; hero text meets contrast; bots are blocked by the honeypot.

Open the builderAll templatesThis palette on its own