Tidewell Sessions

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

Poppins at 800 gives the rounded geometric headliner, Tomorrow is a techy grotesk for the body, and Share Tech Mono gives the radio-log tagline.

• PoppinsHeadings: headliner ~224px 800 at -5.6px, venue line
• TomorrowBody: body 16px at 1.6
• Share Tech MonoFigures and code: short uppercase tagline with wide tracking

Who it is for

• DJs and producers with a mix series
• Event organizers promoting one-off parties
• Music collectives with resident artists
• Promoters sharing press kits

Layout

1. Transparent top nav: widely tracked wordmark left, About / Episodes / Events right
2. Full-viewport photo hero: huge headliner name left-center, monospace uppercase tagline below
3. Bottom hero bar: large date (DD.MM) with year, outlined-type venue and city centered, stacked 'Buy tickets' solid and 'Play trailer' outline buttons right
4. Episodes grid with featured mix, BPM/duration/genre badges
5. Episode detail page with full tracklist and streaming links
6. Events timeline grouped by year
7. Press kit page
8. Dark and light alternating sections

Palette

Dreamy, airy, hypnotic, cool, contemporary. Pastel dusk sky and oversized type make it feel like a sunrise set announcement.

• background#0a0a0a
• text#f2f2f2
• card#121212
• muted text on dark#9a9a9a
• muted text on light sections#6e6e6e
• accent violet (fills, text on light)#8249df
• violet text on dark#9463e4
• secondary pink (dark sections only)#ef5d8d
• decorative border#242424
• 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

Poppins extra-bold (800) at ~224px with -5.6px tracking for the headliner; solid Poppins for venue with an optional decorative stroke-only echo

Body

Tomorrow 16px, line-height 1.6; short monospace uppercase tagline with wide tracking

Rounded geometric display plus techy grotesk and mono details create a festival-poster meets radio-log feel

Spacing and imagery

Hero is a single 100vh frame with 48px insets; square (0 radius) buttons; content pages on a ~1200px grid with tight card gaps

Full-bleed pastel landscape photo (beach, setting sun, lone figure) under a 60% black gradient scrim where text sits; episode cover art with zoom-on-hover; event photos in timeline

Components

• Transparent nav
• Photo hero with giant headliner
• Date block
• Venue text with decorative outline echo
• Ticket and trailer buttons
• Trailer modal video
• Episode card grid with featured card
• Metadata pill badges (BPM, length, genre)
• Tracklist table
• Streaming link buttons
• Year-grouped event timeline
• Press kit downloads

Interactions

• Play trailer opens video modal/drawer
• Cinematic scroll reveals and parallax on sections
• Episode cards zoom image on hover
• Featured episode highlighted in grid
• Timeline indicators animate as years scroll in
• Mobile drawer menu
• Buy tickets opens external ticketing

Data

• Event{title, headliner, date, venue, city, country, ticketUrl, trailerUrl, year}
• Episode{number, title, artist, cover, bpm, duration, genre, featured, tracklist[], streamLinks[]}
• Track{position, artist, title, label}
• PressAsset{title, fileUrl, type}

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 website for a fictional DJ event series and mix show called **Tidewell Sessions**. The audience is ravers deciding whether to buy a ticket, listeners hunting for the next mix, and promoters looking for a press kit. The home screen announces the next event in poster form. Other pages hold mix episodes with tracklists, an archive of past events, and press material.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) plus Vaul for the mobile drawer and trailer sheet, lucide-react icons, React Router, and Framer Motion for scroll reveals and hero entrance. Use Embla if episodes are shown as a mobile carousel. No backend; content is typed data.

### Pages & layout
1. Home hero (100vh): full-bleed pastel landscape photo, transparent nav (tracked wordmark; About, Episodes, Events), a huge headliner name at left-center, a monospace uppercase tagline, and a bottom bar with a large `25.07` date and small year, the venue and city in solid display type (an outlined echo of the venue may sit behind it as decoration), and stacked "Buy tickets" (solid white) and "Play trailer" (outline) buttons.
2. Episodes: grid with one featured large card, others square; each card shows episode number, title, and pill badges for BPM, duration and genre.
3. Episode detail: cover, description, numbered tracklist table, and streaming buttons.
4. Events: archive grouped by year with a vertical timeline line and dot markers.
5. About and Press kit: bio, downloadable logos and photos, tech rider.
Alternate dark (#0a0a0a) and light (#f2f2f2) sections on content pages.

### Design system
Tokens: `--background: #0a0a0a; --foreground: #f2f2f2; --card: #121212; --accent: #8249df; --secondary: #ef5d8d; --border: #242424 (decorative); --radius: 0; --muted-foreground: #9a9a9a; --accent-text-dark: #9463e4; --muted-foreground-light: #6e6e6e`. On light sections text is #0a0a0a, muted text #6e6e6e and violet text #8249df; on dark sections violet text uses #9463e4 and the pink #ef5d8d is used only on dark surfaces. Fonts: Poppins 800 for display and Tomorrow 400/500 for body, plus Share Tech Mono for taglines and metadata. Scale: clamp(96px, 17vw, 224px) headliner with -2.5% tracking; 64px date; 40 / 24 / 16 / 12px (12px only for mono badges and meta at weight 400+; body line-height 1.6, max 70ch). Outline text (`-webkit-text-stroke: 1.5px #fff; color: transparent`) is decorative only and never the sole copy of information. Spacing: 48px hero insets, 8px base. Buttons are square and 44px tall. Motion: 700ms ease-out hero entrance, 300ms hovers, image zoom to 1.06.

### Components & interactions
- Trailer: opens in a dialog (desktop) or drawer (mobile); video is muted by default with captions; Esc closes it.
- Episode card: hover zoom, focus ring, featured variant; skeleton while loading; empty state for filters.
- Badges: small mono pills with an icon (activity for BPM, clock for duration).
- Tracklist: sortable by position; long titles wrap; include a copy-tracklist button with a toast.
- Timeline: year headers stick while scrolling their group.

### Data & state
`Event{slug,title,headliner,date,venue,city,country,ticketUrl?,trailerUrl?}`, `Episode{number,slug,title,artist,cover,bpm,durationMin,genre,featured,tracks[],links[]}`, `Track{pos,artist,title,label?}`, `PressAsset{title,url,kind}`. Genre filter lives in the URL. Seed with invented artist aliases and venues.

### Accessibility
Venue and city are set as solid text; any outlined echo is `aria-hidden` decoration. White on the pale pink sky falls far below 4.5:1, so add a dark gradient scrim reaching 60% black under all hero text and buttons; #f2f2f2 over that scrim is 5.1:1 even on a white-worst-case sky. The accent violet #8249df is 3.7:1 on #0a0a0a, so on dark it is used only for large text, fills and indicators, with #9463e4 for small violet text. Format dates with full `aria-label`s. The trailer needs captions and a visible close button. Buttons need a 2px focus ring. Reduced motion disables the entrance and parallax. Verified contrast: body text on background: #f2f2f2 on #0a0a0a = 17.68:1; muted text on light section: #6e6e6e on #f2f2f2 = 4.55:1; hero text over 60% black scrim on white-worst-case sky: #f2f2f2 on #666666 = 5.13:1.

### Security
Static: external ticket and streaming links get `rel="noopener noreferrer"`, and only https URLs are allowed. Press kit files should be served from your own origin with content-type set. No secrets client-side.

### Performance & SEO
Preload the hero image and serve AVIF; lazy-load episode covers; code-split detail routes. MusicEvent JSON-LD for the upcoming event and past events; per-episode meta and OG images. Target LCP under 2.5s.

### Guardrails
- Use original copy, invented artist names and placeholder imagery; no real festival or DJ brands.
- Don't fabricate attendance numbers or quotes.
- Collect no personal data.
- Keep components small and typed, never use `any`, and handle missing media visibly.
- Done when: hero text passes contrast over the photo; the trailer opens and closes by keyboard with captions; episode detail pages resolve by slug and show tracklists; the events archive groups by year; Lighthouse SEO is 100.

Open the builderAll templatesThis palette on its own