Liltwave

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

Special Gothic is a punchy modern grotesque with a studio-console edge, bold enough for creator-friendly headlines and steady in the uppercase status labels.

• Special GothicHeadings: hero 64px 700, -0.023em; H2 48px 700; card titles 22px 700
• Special GothicBody: body 16px/1.6 500, stats 22px 600, status label 18px 600 uppercase +0.05em

Patterns

• scrolling promo ticker bar above nav
• split hero: bold headline left, live waveform player card right
• icon-inline headline glyph
• three-up proof stats with avatars, flags and store badges
• placeholder logo row
• use-case photo cards with 'start now' buttons
• staggered teal feature cards with geometric pixel ornaments
• language pill cloud with flags
• check-list + CTA split section
• dialog / script demo section
• testimonial cards
• pricing pill toggle monthly/yearly
• FAQ accordion
• decorative ring and stripe motifs in headings

States it is designed for

• Player: idle, generating (animated), ready, playing, paused, error loading audio
• Audio autoplay blocked: show a play prompt instead
• Pricing: monthly vs yearly with savings label
• Try-it form (text box + voice select): empty, over character limit, generating, done, rate-limited
• Reduced motion: static waveform and ticker
• Many languages: pill cloud wraps and collapses to 'show all' on mobile

Who it is for

• Long-form and short-form video creators
• Podcast and audiobook producers
• Marketing teams localizing video ads
• Developers needing a speech API

Layout

1. Promo ticker: lime bar with a repeating 'limited offer' message and badge icons
2. Nav: logo left, anchor links (Home, Dialog, Features, Reviews, Pricing, FAQ) center-right, teal 'Try it now' button; hairline under nav; mobile hamburger in a teal square
3. Hero split: 64px bold three-line headline ending in a small geometric glyph, teal 'Start generating' + light 'Quick tutorial' buttons; right a player card: brand tag + count chip, orange 'generating voice' status with a radio icon, elapsed time and file name, large teal waveform with scrubber, progress bar and caption
4. Proof row: three columns separated by vertical rules (voices count with avatar stack, languages with flag chips, rating with store badges)
5. Placeholder logo row
6. Use cases: heading with a ring-chain ornament, short paragraph with orange ring cluster, four photo cards (conversation, podcast mic, audiobook shelf, film scene) each with a title and 'Start now' button
7. Features: heading + paragraph and four teal cards at staggered heights (clone voice, multilingual, API & batch, custom TTS) with pixel-block and stripe ornaments
8. Languages: cloud of flag + country pills over a faint globe; right heading with dot ornaments, check list, CTA
9. Dialog demo, 'create voices in seconds', 'human-like' sections, testimonials, pricing with pill toggle, FAQ, footer
10. Mobile: headline 40px, player card under headline, CTAs full width, cards single column

Palette

bold, energetic, modern, creator-friendly, confident. A studio console with a teal signal line running through it.

• page background#f6f6f6
• card surface#ffffff
• primary text#2d2d2d
• secondary text#6d6d6d
• teal brand (buttons, waveform, cards)#007769
• lime promo bar#ceec69
• orange accent text (accessible fix)#c44816
• orange ornament (decorative)#e25319
• mint tint surface#ecfffb
• input border#8a8a8a

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

Special Gothic 700, 64px hero with -0.023em tracking, 48px section headings, 1.1 line-height

Body

Special Gothic 500, 16px / 1.6; card titles 22px 700; stats 22px 600 in teal

Status label in uppercase 18px 600 with 0.05em tracking. Time and file name use tabular numerals.

Spacing and imagery

Medium density: 120px sections, 1180px container, 24px gaps; cards 12-16px radius; buttons 12px radius with soft bottom shadow; language pills fully rounded; vertical rules separate proof columns.

Warm cinematic photos of people recording or conversing, a colourful bookshelf; flat flag chips; geometric ornaments (pixel checkerboards, slanted stripes, ring chains) in teal and orange; a waveform drawn with vertical bars.

Components

• Promo ticker bar
• Anchor nav with CTA
• Waveform player card
• Avatar stack
• Flag chip / language pill
• Store badge buttons
• Use-case photo card with button
• Teal feature card with icon
• Geometric ornament set
• Check list
• Dialog script demo (speaker lines with play buttons)
• Testimonial card
• Pricing toggle + plan cards
• FAQ accordion

Interactions

• Waveform bars animate while 'generating'; scrubber is draggable and keyboard-adjustable
• Play buttons in the dialog demo play short sample clips; only one plays at a time
• Ticker scrolls continuously; pauses on hover/focus
• Feature cards lift 4px on hover
• Anchor links smooth-scroll and update the active nav item
• Pricing toggle slides a teal pill between Monthly and Yearly

Data

• Voice{id, name, language, accent, gender (female|male|neutral), sample_url}
• Language{code, name, flag_emoji}
• UseCase{title, image, cta_href}
• Plan{id, name, monthly, yearly, characters_per_month, voices, api_access (bool)}
• Testimonial{quote, name, role}
• GenerationRequest{id, text, voice_id, status (queued|processing|done|failed), audio_url, created_at}
• FaqItem{question, answer}

Guardrails

Experience

• The hero player must play a real sample within one click
• Never autoplay audio with sound
• Keep ornaments decorative and away from text blocks
• Language pills show the language name, not only a flag
• Promo ticker message must be truthful and dismissible

Accessibility

• Orange status text uses #c44816; the brighter orange is ornament-only
• Waveform scrubber is a slider with aria-valuetext showing time
• Every audio sample has a transcript
• Flags are decorative; country and language names are text
• Ticker and waveform animation stop under prefers-reduced-motion

Security

• Try-it generation runs through an Edge Function with per-IP rate limiting and a character cap
• Voice cloning is not offered on the public page; require sign-in and consent confirmation
• Store only generated sample metadata; purge anonymous audio after 24 hours
• Validate text input length and strip markup server-side

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build the marketing site for **Liltwave**, an AI voice generator that turns text into natural narration in dozens of languages, offers voice cloning to signed-in users and exposes a speech API. Visitors are creators and producers; the page must let them hear quality immediately and then choose a plan.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Slider, Tabs, Accordion, Switch), lucide-react, Motion for ticker and waveform animation, react-hook-form + zod for the try-it box. Supabase Edge Function queues demo generations; Supabase Storage holds sample audio.

### Pages & layout
Single long landing page with anchor nav, plus Pricing and Legal pages:
1. Lime promo ticker (dismissible).
2. Nav: logo, anchor links, teal "Try it now".
3. Hero split: bold 64px headline with a small geometric glyph, teal "Start generating" + light "Quick tutorial"; waveform player card (brand tag, status label, elapsed time, file name, bar waveform with scrubber, progress bar, caption).
4. Proof row (voices with avatar stack, languages with flag chips, rating with store badges).
5. Placeholder logo row.
6. Use cases: four photo cards with titles and "Start now".
7. Features: four teal cards staggered in height, with pixel and stripe ornaments.
8. Languages: pill cloud + heading, check list and CTA.
9. Dialog demo: two-speaker script with play buttons.
10. Try-it box (text area, voice select, generate).
11. Testimonials, pricing (pill toggle, three plans), FAQ, footer.
Mobile: 40px headline, player under headline, full-width CTAs, single-column cards, language cloud truncated with "Show all".

### Design system
- Colors: `--bg: #f6f6f6`, `--card: #ffffff`, `--fg: #2d2d2d`, `--muted: #6d6d6d`, `--teal: #007769`, `--on-teal: #ffffff`, `--lime: #ceec69`, `--orange-text: #c44816`, `--orange-ornament: #e25319` (decorative), `--mint: #ecfffb`, `--input-border: #8a8a8a`, `--ring: #007769`.
- Fonts: Special Gothic; hero 64px/1.1 700 -0.023em; H2 48px 700; body 16px/1.6 500; status label 18px 600 uppercase 0.05em.
- Spacing: 8px base; sections 120px / 72px mobile; container 1180px.
- Radius: cards 16px, buttons 12px, pills 999px.
- Shadows: buttons `0 4px 0 rgba(0,0,0,.08)`; cards none.
- Motion: waveform bars scale 0.4-1 on a 1.2s loop while generating; ticker 25s; hover lift 150ms.

### Components & interactions
PromoTicker (dismiss persisted per viewer in localStorage with try/catch), AnchorNav (scroll-spy), WaveformPlayer (bars from precomputed peaks, Radix Slider scrubber, play/pause, time), ProofColumn, AvatarStack, LanguagePill, UseCaseCard, FeatureCard, Ornament (pixel | stripes | rings), DialogDemo (single active audio), TryItBox, TestimonialCard, PricingToggle + PlanCard, FaqAccordion.

### Data & state
Static JSON for voices, languages, use cases, plans and testimonials (invented). TryItBox states: empty, typing (character counter), over limit, generating, done (inline player), failed, rate-limited. Audio state in a small store so only one clip plays.

### Accessibility
Body 16px+, nothing under 12px. Every sample has a transcript toggle. Scrubber has aria-valuetext ("1 minute 12 seconds of 2 minutes"). Orange text uses `--orange-text`. Flags are aria-hidden next to text names. Reduced motion freezes waveform and ticker. Focus ring 2px `--ring`.
Verified contrast: body text on page: #2d2d2d on #f6f6f6 = 12.74:1; secondary text on page: #6d6d6d on #f6f6f6 = 4.79:1; white label on teal button/card: #ffffff on #007769 = 5.46:1; ticker text on lime: #2d2d2d on #ceec69 = 10.38:1; orange status text on page: #c44816 on #f6f6f6 = 4.53:1; teal stat text on white card: #007769 on #ffffff = 5.46:1; waveform bars / focus ring on page: #007769 on #f6f6f6 = 5.06:1; input border on white: #8a8a8a on #ffffff = 3.45:1.

### Security
Generation requests go through an Edge Function with zod validation (max 500 characters), markup stripping, per-IP rate limit (5/hour) and a queue; `generation_requests` has RLS with no anon select; anonymous audio is deleted after 24h by a scheduled job. Voice cloning requires sign-in and an explicit consent checkbox confirming rights to the voice. No API keys in the client.

### Performance & SEO
Precompute waveform peaks; stream sample audio with `preload="none"`. Lazy-load use-case photos. Static rendering; OG image of the player card; FAQ structured data. Target LCP under 2s.

### Guardrails
- Invent all voices, reviewers and figures; no real creators or brands.
- No audio autoplay with sound.
- Keep claims measurable ("40+ languages" only if the data says so).
- Acceptance criteria:
  - [ ] Hero player plays, pauses and scrubs by mouse and keyboard
  - [ ] Try-it box handles all seven states and rate limiting
  - [ ] Pricing toggle updates all plans
  - [ ] Contrast pairs pass; reduced motion honoured

Open the builderAll templatesThis palette on its own