Wayfarer

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

Chivo's black weight stands in for the Supreme-style brutal caps, and Lora keeps the warm, bookish serif of a retro travel poster.

• ChivoHeadings: headlines 120px 900, uppercase, -2px
• LoraBody: body and quotes 18px, italic wordmark

Who it is for

• Weekend and city-break travelers
• Road-trippers and families planning activities
• Solo travelers wanting local tips
• Travel startups prototyping an AI planner

Layout

1. Top nav: italic serif wordmark left, uppercase tracked links (Features, Pricing, FAQ) center, pink outlined 'Sign in' pill right
2. Centered hero on cream: rotating quoted prompt in serif, huge black uppercase 3-line headline, serif subcopy, pink and outlined pill CTAs
3. Full-bleed landscape photo band holding an auto-cycling feature showcase card (Restaurants / Activities / Itineraries / Local tips) with chat mock and 'Where to?' input
4. Testimonials carousel with numbered pill pager and pause
5. Trusted-worldwide logos, pricing (Free / Pro), FAQ accordion grid, footer
6. App: collapsible trip sidebar, resizable split with AI chat left and itinerary canvas right, usage widget and upgrade modal

Palette

Bold, warm, playful, wanderlust, confident. Retro travel-poster attitude softened by cream and pink.

• background cream#fff1e2
• text / border#000000
• primary pink#f3b1de
• secondary plum#5d3278
• accent sand#e0c9b3
• muted#e1d5ca
• secondary text#685b50

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

Heavy grotesk (Supreme-style) 800–900, 120px, uppercase, -2px tracking (Grotesk is not on Google Fonts; a vibld project loads Chivo)

Body

Lora serif 400 18px for body and quotes

Brutal all-caps sans headlines contrasted with a warm bookish serif; italic serif wordmark

Spacing and imagery

Centered layout, 1200px container; pills with 1.5px black borders; 24px radius cards; big 120px hero padding; photo bands full-bleed

Full-bleed landscape photography (mountains, sky) behind floating UI cards; grayscale circular avatars in testimonials.

Components

• Pill nav with arrow CTA
• Rotating prompt quote
• Giant uppercase headline
• Auto-cycling feature tabs with mock chat
• Destination suggestion chips
• Testimonial carousel with numbered pager + pause
• Pricing cards (Free/Pro)
• FAQ accordion grid
• Chat thread with streaming replies
• Itinerary canvas with day columns and draggable stops
• Collapsible trip sidebar
• Usage meter + upgrade modal

Interactions

• Rotating hero tagline
• Feature showcase auto-advances with progress
• Carousel pager with active pill fill and pause
• Streaming AI responses
• Add suggestion to itinerary
• Drag-and-drop reorder of stops across days
• Inline edit of trip title and dates
• Resizable split panels
• Upgrade modal when free limit hit

Data

• Trip{id, user_id, title, destination, start_date, end_date, cover_url}
• ItineraryItem{id, trip_id, day, position, type(restaurant|activity|tip|transport), title, notes, time, location}
• ChatMessage{id, trip_id, role(user|assistant), content, created_at}
• Subscription{user_id, plan(free|pro), status, stripe_customer_id, current_period_end}
• Usage{user_id, period, messages_used}

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 **Wayfarer**, an AI trip planner. Travelers describe what they want in chat; the assistant suggests places and day plans that can be dropped onto an itinerary board and rearranged. Free users get a monthly message allowance; Pro unlocks more. The job: go from "weekend in a new city" to a usable day-by-day plan in one sitting.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. dnd-kit for itinerary reordering across days; react-resizable-panels for chat/canvas split; TanStack Query; react-hook-form + zod for trip details; date-fns; Embla for testimonials; Framer Motion for the rotating tagline and showcase. Supabase: Auth (Google, Apple, email), Postgres, Storage (trip covers), Edge Functions for the LLM chat (streaming) and Stripe Checkout/Billing Portal/webhooks.

### Pages & layout
1. **Landing** – cream background; nav with italic serif wordmark, tracked uppercase links, pink pill "Sign in →". Hero: a rotating quoted prompt in serif, a 3-line 120px uppercase headline, serif subcopy, pink + outlined pill CTAs. Full-bleed landscape photo band containing a cream card that auto-cycles four feature tabs (Food, Activities, Itineraries, Local tips) with a mock chat and "Where to?" field. Testimonials carousel with numbered pill pager and pause. Logo strip, Free/Pro pricing, 2-column FAQ accordions, footer.
2. **Auth**.
3. **Planner** – collapsible left sidebar of trips; resizable split: chat (messages, suggestion chips, composer) and itinerary canvas (day columns with cards, add/edit, drag between days); inline editable title/dates; usage widget; upgrade modal.
4. **Billing** – plan status and portal link.

### Design system
`--background: #fff1e2`, `--foreground: #000000`, `--primary: #f3b1de`, `--secondary: #5d3278`, `--accent: #e0c9b3`, `--muted: #e1d5ca`, `--border: #000000`, `--muted-foreground: #685b50`. Display: heavy grotesk like Chivo uppercase; body Lora 400/italic. Scale 14/16/18/24/48/120 (body 18px/1.6, max ~70ch; uppercase nav links 14px with 0.08em tracking); display tracking -0.02em, fallbacks Impact/system sans for display and Georgia/serif for body. Radius 24px cards, 999px pills, 1.5px black borders. Shadows minimal. Motion 250ms ease-out; showcase interval 5s; streaming text fade-in.

### Components & interactions
PillButton (primary pink/outline; hover darken; focus ring plum), RotatingTagline, FeatureShowcase (playing/paused/progress), TestimonialCarousel (numbered pager, pause), PricingCard, FaqAccordion, TripSidebar (collapsed/expanded, empty), ChatMessage (streaming/complete/error with retry), SuggestionChip ("Add to Day 2"), ItineraryCard (drag, edit, delete), DayColumn (empty drop hint), UsageMeter, UpgradeModal.

### Data & state
Tables above; assistant replies parsed into structured suggestions (JSON schema validated with zod) so they can be added to the board. Usage incremented server-side per message. Seed a demo trip ("3 days in a fictional coastal town") with 12 items.

### Accessibility
Uppercase display text is for short headings only (hero headline ≤ 8 words); body stays sentence case serif at ≥ 18px. Pink #f3b1de with black text passes. Carousel/showcase have pause and stop on reduced motion. Drag-and-drop has keyboard and "Move to day" menu alternatives. Chat log is `role="log"` with polite announcements; composer labeled. Photos have alt text; decorative ones empty alt. Verified contrast: body text #000000 on #fff1e2 = 18.9:1; secondary text #685b50 on #fff1e2 = 5.9:1; black text #000000 on #f3b1de = 12.1:1; white text #ffffff on #5d3278 = 9.5:1; plum link text #5d3278 on #fff1e2 = 8.6:1.

### Security
RLS owner-only on trips, items, messages, usage; subscriptions readable by owner, writable only by webhook (service role in Edge Function). LLM and Stripe secrets only in Edge Function env. Enforce plan limits server-side, rate-limit chat, validate prompts and structured outputs with zod, render model text as plain text/sanitized markdown (DOMPurify). Cover uploads image-only ≤ 5 MB. Stripe Checkout hosted; verify webhook signatures.

### Performance & SEO
Optimize hero photo band (AVIF/WebP, responsive), lazy-load below-fold. Code-split planner. Stream responses to reduce perceived latency. Meta/OG on landing; Lighthouse 90+.

### Guardrails
- Original copy, placeholder photography, no real brand logos in the trust strip.
- Testimonials labeled as sample; no real names.
- Don't store precise location history; allow trip deletion.
- Typed small components, no `any`, visible errors.
- Done when: a user signs in, chats and adds three suggestions to different days, reorders by keyboard, hits the free limit and sees the upgrade modal, completes test checkout, and the limit lifts.

Open the builderAll templatesThis palette on its own