Slotwise

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

Pathway Extreme is a neutral grotesk with optical sizes, so it takes the aggressive negative tracking on headings and stays crisp in small UI labels.

• Pathway ExtremeHeadings: hero 40px and section titles 32px, 600, -0.04em
• Pathway ExtremeBody: body 16px, UI labels 13px 500

Who it is for

• Freelancers, coaches and consultants
• Sales reps sharing discovery-call links
• Managers offering office hours or 1:1s
• Small businesses dropping paid schedulers

Layout

1. Sticky white top bar: bold wordmark left; 'See demo', 'Sign in' text links and blue pill 'Get started' right
2. Full-bleed blue hero: centered white title, one-line tagline, pill tab switcher (Event Types / Booking Page / Bookings / Availability) with play-pause control
3. Large browser-frame mock under the tabs cycling through product screens (event type list with durations, Active/Inactive badges, Copy link)
4. Auto-advancing demo carousel with progress pill + pause button
5. Testimonials section with short quotes from fictional users
6. Centered closing CTA with blue pill button
7. Four-column footer: wordmark, Product, Legal, Connect
8. App: top pill-tab nav (Event Types, Bookings, Availability, Settings) with avatar; public booking page with month or column-week view, slot list, guest form, confirmation

Palette

Crisp, trustworthy, neutral, efficient. A calm corporate-blue product site that lets the interface demo do the selling.

• background#ffffff
• text#0a0a0a
• primary / hero blue#006bb8
• muted surface#f4f4f5
• success badge#15803d
• border#e5e5e5

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

Pathway Extreme 600, 40px hero on blue and 32px section titles, tight tracking (-0.04em)

Body

Pathway Extreme 400 at 16px; UI labels 13px 500

Single-family system: one neutral grotesk carries everything, hierarchy via weight and aggressive negative tracking on headings. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Clean and roomy; ~900px centered mock inside a 1200px container; pill buttons (9999px) with 10px card radius (.625rem); dense list rows inside the product mock contrasted against generous marketing whitespace.

No stock photos; the hero is a live product UI mock framed in a faux browser window with traffic-light dots. Small avatar photos for host profile and testimonials.

Components

• Pill tab switcher with animated fill
• Browser-frame product mock
• Event type list rows with duration, status badge, copy link, overflow menu
• Booking page URL bar with copy/open
• Month calendar + slot list
• Column week grid of slots
• Guest details form
• Booking confirmation with Add to Google/Outlook and .ics
• Bookings tabs (Upcoming/Past/Cancelled) with count badges
• Weekly availability editor with time ranges
• Timezone selector
• Profile settings with avatar upload

Interactions

• Auto-advancing hero demo with progress indicator and pause/play
• Copy link to clipboard with toast
• Toggle event type active/inactive
• Switch between month and column views
• Slot selection highlights then reveals form
• Expandable booking rows with cancel confirmation
• Dark mode toggle persisted locally
• Demo routes with seed data

Data

• Profile{user_id, display_name, bio, avatar_url, slug, timezone, conferencing_url}
• EventType{id, user_id, title, duration_min, description, location, active}
• AvailabilityRule{user_id, weekday, start_time, end_time}
• Booking{id, event_type_id, host_id, guest_name, guest_email, notes, start_utc, end_utc, status: confirmed|cancelled}

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 **Slotwise**, a personal booking tool for consultants, coaches and sales reps. A host signs in, defines meeting types (length, description, location), sets weekly working hours in their timezone, and shares one public link. Guests open it, see only free slots converted to their own timezone, enter name and email, and receive a confirmation with calendar-add options. No guest account is needed.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Use date-fns + date-fns-tz for slot maths, react-hook-form + zod for event type and guest forms, TanStack Query for data, Framer Motion for the landing demo carousel and tab indicator. Supabase provides Auth (email/password + Google OAuth), Postgres for profiles, event types, availability and bookings, and Storage for avatars. A Postgres function or Edge Function performs the actual booking insert so conflicts are checked server-side.

### Pages & layout
1. **Landing**: white sticky nav (wordmark, See demo, Sign in, blue pill Get started). Full-width blue hero with centered title, tagline, and a pill tab switcher that drives an auto-advancing product mock inside a browser frame; pause button. Testimonials, closing CTA, four-column footer.
2. **Event types**: list rows showing duration, title, subtitle, Active/Inactive badge, Copy link, overflow menu; "New event type" button; booking-link bar at the bottom.
3. **Bookings**: Upcoming / Past / Cancelled tabs with count badges; expandable rows revealing notes, location, cancel.
4. **Availability**: seven weekday rows with toggles and one or more time ranges; timezone picker.
5. **Settings**: profile, avatar, bio, conferencing URL, theme toggle.
6. **Public booking page** `/book/:slug`: host card, event picker, month view with day slot list or a week column grid, guest form, confirmation screen with Google/Outlook links and .ics download.
7. `/demo/*` mirrors each screen with seed data.

### Design system
Light default with a dark toggle. Tokens: `--background: #ffffff`, `--foreground: #0a0a0a`, `--primary: #006bb8`, `--primary-foreground: #ffffff`, `--muted: #f4f4f5`, `--border: #e5e5e5`, `--success: #15803d`. Font: Pathway Extreme (Google Fonts) for everything; headings 600 with -0.04em tracking; scale 13/16/20/32/40. Spacing on 4px steps; cards radius 10px, buttons and tabs fully rounded. Shadows soft (`0 1px 2px rgb(0 0 0 / .06)`). Motion: 200ms ease-out for tab indicator, 5s interval for the demo carousel. Add `--muted-foreground: #52525b` for secondary copy and `--input-border: #8a8a8a` for inputs and slot outlines (the `#e5e5e5` border is for decorative dividers only).

### Components & interactions
Tab switcher with sliding fill; slot buttons (default, hover, selected, disabled for past or booked); form fields with inline errors; loading skeletons on dashboards; empty states ("No upcoming bookings" with share-link CTA); error toasts on failed booking with a "pick another slot" recovery. Cancel requires a confirm dialog.

### Data & state
Profile, EventType, AvailabilityRule(weekday, start, end), Booking(start_utc, end_utc, status). Store all times in UTC; compute slots client-side from rules minus confirmed bookings, then re-validate on insert. Theme preference in localStorage. Seed four event types (15/30/45/60 min) and a fictional host.

### Accessibility
Calendar grid uses `role="grid"` with arrow-key navigation and `aria-selected`; slots are real buttons announcing date, time and timezone. Auto-rotating hero must pause on hover/focus and honour `prefers-reduced-motion`. White on #006bb8 must meet 4.5:1. Visible 2px focus rings on pills. Avatar images get alt text with the host's name. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #0a0a0a on #ffffff = 19.8:1; text #0a0a0a on #f4f4f5 = 18.01:1; secondary text #52525b on #ffffff = 7.73:1; white hero title and button text #ffffff on #006bb8 = 5.53:1.

### Security
RLS: hosts can read/write only their own profile, event types, rules and bookings; the public can read active event types and a minimal profile view by slug. Guests never read the bookings table; they call a `create_booking` RPC that validates with zod-equivalent checks, rejects overlaps inside a transaction, and rate-limits by IP. Validate guest email and cap notes length. Avatar uploads: images only, ≤2 MB. Sanitize the conferencing URL to https only. Only the anon key in the client.

### Performance & SEO
Lazy-load dashboard routes and the landing carousel frames. Public booking pages get dynamic titles and OG tags with the host's name. Target LCP under 2s.

### Guardrails
- Original copy, fictional host and testimonial names clearly marked as examples; no third-party logos.
- Keep components small and typed; no `any`; show errors visibly.
- Don't store more guest data than name, email and notes.
- Done when: a host can create an event type and availability; a guest in another timezone sees correct slots and books; double-booking the same slot fails gracefully; the confirmation offers .ics download; cancelled bookings move to the Cancelled tab.

Open the builderAll templatesThis palette on its own