Low Tide Signal

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

The condensed poster face with its own regular-width sibling is the design's idea, and Barlow Condensed is used nowhere else, so the pair stays.

• Barlow CondensedHeadings: hero name up to 208px bold uppercase, 24px wide-tracked dates
• BarlowBody: body 16px at 1.6, warm off-white

Who it is for

• Electronic music artists and DJs
• Artist managers
• Promoters checking booking info
• Fans looking for tour dates and mixes

Layout

1. Full-bleed 80vh photo hero with small eyebrow label and a massive condensed uppercase artist name
2. Two-tab bar under hero: tour vs recordings (split gradient panels)
3. Tour list: spaced-letter dates, venue · area · city, RECAP/TICKETS links, 'Full calendar' CTA
4. Recordings list: numbered mixes with dates and LISTEN actions + audio player
5. Bio: text column left, photo mosaic right with a 'Releases' tile
6. Full-bleed concert-lights video section with play button and ghosted giant type
7. Releases section
8. Contact for bookings card
9. Two-column social footer
10. Sticky scroll-aware header / mobile slide-out menu

Palette

Warm, nocturnal, cinematic, gritty, festival-ready. It feels like a tour poster lit by a campfire.

• background#141110
• text#ebe6e0
• muted text (past dates, time off)#8f867f
• card#1c1917
• secondary#24201e
• decorative border#332c28
• accent ember#dc6018
• light tile#e7e0da

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

Barlow Condensed bold, uppercase, up to 208px with tight negative tracking for the hero name; 24px wide-tracked (2.4px) section labels

Body

Barlow 16px regular, line-height 1.6, warm off-white; muted #8f867f for past dates

Condensed poster display paired with its regular-width sibling for body; spaced-letter dates add a flyer feel

Spacing and imagery

Section-based single column around 1150px, 2-column bio split, 16px radius on image tiles, generous dark negative space between sections

Warm golden-hour and firelight photography of people and DJs, full-bleed concert lighting video, photo mosaic with rounded corners, dark gradient scrims (#141110 at 70%) behind any overlaid text

Components

• Parallax photo hero
• Giant condensed wordmark
• Split tab bar (tour / recordings)
• Tour date row with status link
• Numbered recordings list
• Custom audio player with seek bar
• Bio with photo mosaic
• Video section with play button
• Releases grid
• Booking contact card
• Sticky blurred header
• Mobile slide-out menu
• Social footer

Interactions

• Scroll-linked parallax on hero image
• Fade/slide-in on scroll for sections
• Tab switch between tour and recordings
• Play/pause, mute, seek on audio player; active track highlight
• Video plays inline on click
• Header gains backdrop blur after scroll
• Mobile menu slides in from side
• Hover underline on ticket/recap links

Data

• TourDate{date, endDate?, venue, area, city, status: tickets|recap|off, url}
• Recording{index, title, date, audioSrc, externalUrl}
• Release{title, cover, year, link}
• Contact{role, name, email}
• SocialLink{platform, url}

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 one-page website for a fictional electronic music artist called **Low Tide Signal**. The audience is fans checking the next show, promoters looking for booking contacts, and new listeners who want to hear a mix right away. The page puts tour dates, playable recordings, a short bio, a video moment and booking details on one scroll with a warm, after-dark mood.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) for Sheet (mobile menu), Tabs and Slider, lucide-react icons, and Framer Motion for parallax (`useScroll` / `useTransform`) and scroll reveals. Use the HTML5 `<audio>` element with a custom React controller hook. No backend; content lives in typed data files.

### Pages & layout
1. Sticky header: artist wordmark, anchor links, and a menu button that opens a side sheet on mobile.
2. Hero: 80vh full-bleed photo, a small spaced eyebrow ("Electronic artist"), and a huge condensed uppercase name overlapping the image.
3. Tab bar: two wide panels, "2026 on tour" and "Recordings", with a subtle warm-to-dusk gradient and an ember edge on the active one.
4. Tour list: spaced-letter dates, venue · district · city, and a right-aligned link (Tickets, Recap, or a muted "Time off"); first ten rows, then a "Full calendar" button.
5. Recordings: numbered rows (01–07) with title, month and a Listen action that loads the sticky mini player.
6. Bio: three paragraphs left; a rounded photo mosaic right with a light "Releases" tile that links down.
7. Video: full-bleed stage-light footage behind giant ghosted type and a circular play button.
8. Releases grid, booking contact card (agent, management, press), and a two-column social footer.

### Design system
Tokens: `--background: #141110; --foreground: #ebe6e0; --card: #1c1917; --secondary: #24201e; --border: #332c28 (decorative only); --muted-foreground: #8f867f; --accent: #dc6018; --tile: #e7e0da`. Fonts: Barlow Condensed 700 for display and Barlow 400/600 for body (Google Fonts). Scale: clamp(96px, 16vw, 208px) hero with -2.5% tracking, 24px uppercase section labels with 0.1em tracking, 18/16/12px text (12px only for short meta at weight 400+; body line-height 1.6, max 68ch). Spacing: 8px base, 96–128px between sections. Radius 16px on image tiles, pill buttons. Shadows: none, rely on dark overlays. Motion: 500ms ease-out reveals, parallax factor 0.3. Dark only.

### Components & interactions
- Audio player: play/pause, mute, seek slider with elapsed/remaining time, next/previous; show loading while buffering and an error message if a source fails.
- Tour row: hover lightens the row background and underlines the link; past dates render muted.
- Tabs: animated underline; arrow-key navigation.
- Video: poster image until pressed; pause when scrolled out of view.
- Header: transparent at the top, blurred `#141110cc` after 80px.
- Mobile sheet: focus trapped, closes on link click.

### Data & state
`TourDate{start,end?,venue,area,city,status,url?}`, `Recording{n,title,date,src,external?}`, `Release{title,year,cover,url}`, `Contact{role,name,email}`. Current track and play state live in a React context so the player persists across sections. Seed invented venues and cities (for example "The Foundry, Harbor District").

### Accessibility
#ebe6e0 on #141110 is about 15:1; the ember accent #dc6018 may be used for link text only on #141110 or #1c1917 (not on #24201e), and as the fill of pill buttons with #141110 text. Muted past dates use #8f867f. The hero name sits over a bottom gradient scrim of #141110 at 70% opacity so it stays readable over any photo. Letter-spaced dates must keep a readable `aria-label` like "January 30". The player needs labeled buttons, a slider with `aria-valuetext`, and no autoplay. Give the hero heading real text, not an image. Honor `prefers-reduced-motion` by disabling parallax. Add captions or a transcript note for the video. Verified contrast: body text on background: #ebe6e0 on #141110 = 15.15:1; muted past dates on background: #8f867f on #141110 = 5.27:1; hero name over 70% #141110 scrim on white-worst-case photo: #ebe6e0 on #5b5858 = 5.68:1.

### Security
Static site: keep booking emails as `mailto:` links with light obfuscation, and add `rel="noopener noreferrer"` to external ticket and streaming links. Validate outbound URLs in data files, allowing only https. No secrets in the client.

### Performance & SEO
Serve hero and mosaic images as responsive WebP with a blurred placeholder; lazy-load below the fold; `preload="none"` on audio and video. Add MusicGroup and Event JSON-LD for each tour date, OG image, and descriptive title. Aim for LCP under 2.5s on mobile.

### Guardrails
- Use original bio copy and placeholder photography; no real artist names, labels or logos.
- Don't present quotes from press as real.
- Collect no personal data.
- Keep components small and typed, never use `any`, and show player errors visibly.
- Done when: every Listen button plays the right track in the persistent player; the tab bar and mobile menu work fully by keyboard; past and upcoming shows are styled differently; reduced-motion removes parallax; Lighthouse accessibility is 95 or higher.

Open the builderAll templatesThis palette on its own