Gadabout

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

Ysabeau Office is a lively humanist sans that can carry the whole page at regular weight, giving the evenings-out posters a social warmth while hierarchy comes from size.

• Ysabeau OfficeHeadings: hero 82px 400 at -0.04em, H2 54px, H3 26px
• Ysabeau OfficeBody: body 18px/1.55, hero subcopy 25px 500, eyebrows 12px uppercase +0.08em

Patterns

• split hero with inline email waitlist form
• auto-advancing photo carousel with floating event card and pause control
• live local-time chip in the nav
• staggered feature list with mini UI chips
• two-row counter-scrolling category pill marquee
• weekly agenda board grouped by day
• segmented control switching audience (guest/host)
• numbered bento of product screens on colour tiles
• trust and safety list with mini UI proofs
• city-by-city launch list
• FAQ accordion

States it is designed for

• Waitlist form: empty, invalid email, submitting, joined (show position and city), already on list, network error with retry
• Carousel paused vs playing; reduced-motion shows first slide static
• Segmented control selected tab
• Agenda row statuses: saved, few places left, just posted, joined, drop-in
• Capacity meter partially filled and full
• Mobile menu open
• City not yet launched vs live

Who it is for

• Young professionals new to a city
• People who want small-group activities
• Independent hosts of dinners, games and classes
• Early adopters joining a city waitlist

Layout

1. Minimal top bar: lowercase wordmark, divider, city name and live local time; anchor links (Why, How it works, Safety, FAQ); dark 'Join the waitlist' button; hamburger on mobile
2. Split hero: status chip with red dot, two-line 82px headline, 25px subcopy, EMAIL label + input + red-orange submit, avatar stack with waitlist count; right: rounded photo carousel (5 slides) with a floating white event card overlapping its lower-left, slide counter '01 / 05', dot indicators and pause button
3. Problem/benefit section: large heading left with a photo card and time chip; right column of three staggered benefits, each with a mini UI chip (event row, saved toggle, chat bubble)
4. 'This week' section: heading left, small note right, two rows of image+label pills scrolling in opposite directions
5. Agenda board card: day headings in small caps, event rows with square illustrated icon, meta line, right-side status (Saved badge, places left, just posted, You're in highlight row), footer summary
6. How it works: heading, Discover/Host segmented control, 2x2 numbered bento (periwinkle, orange, lime, near-black tiles) each holding a product mock
7. Safety: four blocks separated by hairlines, each with a mini proof (verified host card, capacity meter, hidden-address reveal, rules)
8. Launch cities list, FAQ accordion, final waitlist form, footer
9. Breakpoints: hero stacks (headline, form, then carousel); bento becomes one column; marquee rows keep scrolling; agenda meta wraps under titles

Palette

warm, social, lively, trustworthy. Evenings out made easy, with colour-blocked tiles that feel like posters for small events.

• page background (warm grey-white)#f2f3f1
• card surface#ffffff
• ink#161816
• muted text#656963
• primary CTA red-orange#c93a14
• bento tile orange#e8491f
• bento tile periwinkle / highlight row#dce1ff
• saved badge blue#2544d8
• lime accent (confirm, meters)#c8e64c
• dark tile / dark section#1b1f1d
• muted text on dark#9aa39c
• input border#8e928c

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

Ysabeau Office 400, hero 82px/0.95 with -0.04em tracking, h2 54px with -0.04em, h3 26px

Body

Ysabeau Office 400-500, 18px/1.55 body; hero subcopy 25px/1.4 weight 500 with slight negative tracking

One humanist grotesk at regular weight does all the work; hierarchy comes from size. Day headings and card eyebrows are 12px uppercase with 0.08em tracking.

Spacing and imagery

Generous: 140px section spacing, 1100px container, 24px gutters in the bento; cards 12-16px radius, bento tiles 16px, buttons 8px radius; soft 0 8px 24px rgba(0,0,0,.08) shadow only on floating cards.

Warm lifestyle photography of small groups at dusk; flat, bold, cut-paper style square icons for each event type; realistic phone-card UI mocks rather than device frames.

Components

• Nav with live local-time chip
• Inline waitlist form with label
• Avatar stack with count
• Photo carousel with pause and counter
• Floating event card (category chip, time, place, host, places-left pill)
• Mini UI chips (saved toggle, chat bubble)
• Category pill marquee (two rows)
• Weekly agenda board
• Segmented control
• Numbered bento tile
• Capacity meter
• Address reveal row
• FAQ accordion

Interactions

• Hero carousel auto-advances every 6s with crossfade; pause/play button; dots are buttons
• Local time ticks each minute
• Marquee rows scroll opposite ways, pause on hover/focus
• Segmented control swaps bento content between guest and host views with a 200ms fade
• Agenda rows highlight on hover; 'You're in' row stays tinted
• Save toggle in mini chip flips to 'Saved' with a small scale pop
• Accordion expands with height animation

Data

• City{slug, name, status (live|soon), timezone}
• EventPreview{title, category, area, starts_at, price, places_left, status (saved|joined|new|drop-in), icon}
• Slide{image, alt, event_preview}
• Faq{question, answer}
• WaitlistEntry{email, city_slug, created_at, referrer}

Guardrails

Experience

• Waitlist form appears in the hero and again at the end; both remember the chosen city
• The floating event card must not cover faces in the photo on any breakpoint
• Every event row shows time, area and a single status; no more than one badge per row
• The segmented control changes content in place without scrolling the page
• Keep safety claims concrete and short, each paired with a visual proof
• Show the visitor's city time only when a launch city is selected

Accessibility

• Carousel has a visible pause button, pauses on hover/focus and under reduced motion (WCAG 2.2.2)
• Photos get descriptive alt text; icons in agenda rows are decorative
• Text on the orange bento tile uses ink (#161816), not white
• Status is conveyed with text ('2 places left', 'Saved'), not colour only
• Segmented control uses Radix Tabs semantics with arrow-key navigation
• Email input has a persistent visible label and error text linked by aria-describedby

Security

• Validate email and city slug with zod server-side; normalise email case
• RLS on waitlist: anon may insert only; no select; unique (email, city)
• Rate-limit joins per IP and add a hidden honeypot
• Never expose waitlist counts per person; publish only an aggregated, cached total
• Store no location or personal data beyond email and chosen city

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 pre-launch site for **Gadabout**, a consumer app that gathers a city's small social plans (supper clubs, pickup games, sunrise runs, gigs) into one feed you can join in two taps. The site must make the week feel full, show the product honestly through realistic cards, reassure people about safety, and collect waitlist sign-ups per city.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Tabs, Accordion, Sheet), lucide-react, Motion for the carousel, marquee and tab transitions, react-hook-form + zod for the waitlist, date-fns (with time zones) for the live city clock, Supabase for the waitlist table.

### Pages & layout
1. **Home**. Top bar: lowercase wordmark, hairline divider, city name + live local time, anchor links, dark "Join the waitlist" button (hamburger Sheet on mobile).
   Hero split 5/7: status chip with red dot, two-line 82px headline (fresh copy), 25px subcopy, labelled email field + red-orange submit, avatar stack with an invented waitlist count. Right: 16px-radius photo carousel (five invented scenes) with a white event card overlapping the lower-left edge (category chip, time, title, area, host avatar with verified tick, "places left" pill), counter "01 / 05", dots and pause.
   Benefits: big heading and a photo card left; three staggered benefit blocks right, each with a mini UI chip.
   This week: heading + small note, two rows of image-label pills scrolling opposite ways.
   Agenda board: white card with day headings (12px caps), event rows (square illustrated icon, title, meta, right status), one highlighted "You're in" row, footer summary.
   How it works: heading, Discover/Host segmented control, 2x2 numbered bento (periwinkle, orange, lime, near-black tiles) with product mocks.
   Safety: four hairline-separated blocks with mini proofs (verified host card, capacity meter, address revealed after joining, house rules).
   Launch cities, FAQ, final waitlist, footer.
2. **Privacy** and **Terms** pages; **/city/[slug]** variant with localised agenda.
Mobile: hero stacks with the form before the carousel; bento one column; floating card sits below the photo instead of overlapping.

### Design system
```
--bg: #f2f3f1; --surface: #ffffff; --ink: #161816; --muted: #656963;
--cta: #c93a14; --tile-orange: #e8491f; --tile-periwinkle: #dce1ff;
--saved: #2544d8; --lime: #c8e64c; --dark: #1b1f1d; --muted-on-dark: #9aa39c;
--input-border: #8e928c;
```
Font: Ysabeau Office throughout. Hero 82px/0.95 weight 400 tracking -0.04em; h2 54px; h3 26px; body 18px/1.55; eyebrows 12px uppercase +0.08em. Spacing 4px base, 140px sections, 1100px container, 24px bento gutter. Radius: cards 12px, tiles 16px, buttons 8px, pills full. Shadow only on floating cards: 0 8px 24px rgba(0,0,0,.08). Motion: 6s carousel interval, 500ms crossfade, 200ms tab fade, marquees 50s linear.

### Components & interactions
TopBar with CityClock (updates each minute), WaitlistForm (label, input, submit, inline error), AvatarStack, HeroCarousel (crossfade, pause button, dot buttons, pauses on hover/focus), EventCard, MiniChip variants (event row, saved toggle, chat bubble, time chip), PillMarquee (two rows, aria-hidden duplicates), AgendaBoard + AgendaRow (status variants), SegmentedTabs, BentoTile (number, title, blurb, mock slot), CapacityMeter (text "9 of 12"), AddressReveal, Faq.

### Data & state
Content files: `cities`, `slides`, `events` (invented titles like "Tuesday padel ladder", areas like "Old Harbour"), `faqs`. Waitlist posts to a server action writing `waitlist(id, email, city_slug, referrer, created_at)` with a unique (email, city_slug). Return position and city; handle duplicate as "already on the list". Client state: carousel index + paused flag, selected tab, menu open.

### Accessibility
Carousel meets pause/stop rules and stops under prefers-reduced-motion. Radix Tabs for the segmented control; Accordion for FAQ. Ink text on the orange tile; statuses always spelled out. Descriptive alt on photos, empty alt on decorative icons. Visible 2px focus ring in `--cta` with offset. The live clock uses `aria-live="off"` so it is not announced every minute.
Verified contrast: body ink on page: #161816 on #f2f3f1 = 16.04:1; muted text on page: #656963 on #f2f3f1 = 5.03:1; CTA label on red-orange: #ffffff on #c93a14 = 5.12:1; ink on orange bento tile: #161816 on #e8491f = 4.59:1; white on saved badge blue: #ffffff on #2544d8 = 7.25:1; lime on dark tile: #c8e64c on #1b1f1d = 11.81:1; muted text on dark tile: #9aa39c on #1b1f1d = 6.42:1; input border on white: #8e928c on #ffffff = 3.16:1; red-orange focus ring on white: #c93a14 on #ffffff = 5.12:1; ink on periwinkle highlight row: #161816 on #dce1ff = 13.82:1.

### Security
Server-side zod validation of email and city; RLS on `waitlist`: enable, insert-only policy for anon with check city_slug in live or soon cities, no select/update/delete. Aggregate count comes from a cached RPC returning only a number. Rate-limit by IP, honeypot field, and confirm via a transactional email service. Keep keys server-side.

### Performance & SEO
Pre-render all pages; first carousel image is priority AVIF with fixed aspect ratio, others lazy. Self-host Ysabeau Office with swap. Marquee images tiny (64px). Metadata, OG image per city page, FAQPage JSON-LD. Lighthouse 90+ on mobile with the carousel.

### Guardrails
- Invent every event, venue, host, city area and count; use generic neighbourhood names.
- Photos must be licensed stock or generated; no identifiable real people presented as users.
- Safety copy describes intended features, not guarantees.
- Typed components, no `any`, content outside JSX.
- Acceptance criteria: (1) waitlist works with all six states; (2) carousel can be paused by mouse, keyboard and screen reader; (3) tab switch works with arrow keys; (4) layout holds at 390px with no horizontal scroll; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own