Liftoff Lab

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

Sofia Sans runs from black-weight, tightly tracked caps to relaxed text, so a single family can still be pushed to keynote-poster extremes.

• Sofia SansHeadings: display 80-96px, 800, uppercase, -0.05em
• Sofia SansBody: body 17px in sentence case

Who it is for

• Workshop and cohort-course creators
• Consultants and coaches selling programs
• Founders who teach growth
• Course creators who need pricing and sign-up in one place

Layout

1. Sticky header: uppercase bold wordmark left; Workshop / Instructor / Pricing / Contact links, social icons and a white 'Login' pill right; turns solid on scroll
2. Hero on a deep-blue gradient with a subtle plus-sign grid: giant uppercase three-line headline with two rounded photos inset between words, bright-blue pill CTA with arrow
3. Marquee ticker repeating a tagline with star separators
4. Problem/value section with three pain points
5. Instructor section: rounded portrait left (sticky), name with a short blue underline and a three-paragraph bio right
6. Curriculum grid with staggered images and hover zoom
7. Pricing tiers with a highlighted plan
8. Full-width testimonial blockquote
9. Contact form (five fields plus a dropdown) under a short contact heading
10. Footer with legal links; separate privacy/terms/refund pages and a protected dashboard

Palette

bold, energetic, ambitious, polished, persuasive. It reads like a conference keynote poster built into a web page.

• hero gradient navy#1a2a5e
• hero gradient royal blue#1e40af
• primary blue#2563eb
• text on dark#ffffff
• muted text on dark#c7d2fe
• light background#ffffff
• body text#1a212d

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

Sofia Sans ExtraBold 96px uppercase, very tight tracking (-4.8px); H2 60px uppercase extra-bold

Body

Sofia Sans 16-18px, light blue-grey on dark sections

One family pushed to extremes: shouting uppercase headlines against relaxed body copy.

Spacing and imagery

Full-bleed sections alternating dark gradient and solid blue; 1200px container; 16px radius on photos; pill CTAs; generous padding of about 120px.

Candid team and workspace stock photos in rounded frames, inset into the headline; an instructor portrait; staggered curriculum images; a faint plus-pattern texture on the gradients.

Components

• Transparent-to-solid sticky header
• Social icon links
• Hero headline with inline photos
• Glowing pill CTA
• Infinite marquee ticker
• Instructor bio with sticky image
• Curriculum module grid
• Pricing tier cards with a 'most popular' highlight
• Testimonial blockquote
• Contact form with select
• Login/signup pages
• Protected participant dashboard
• Legal pages
• Mobile hamburger menu

Interactions

• Header background fades in on scroll
• Headline blur-to-sharp reveal
• Marquee scrolls continuously
• Scroll-reveal fade-ups through IntersectionObserver
• Curriculum images zoom on hover
• CTA glow on hover
• Contact form validation with a success toast
• Route guard redirects to login

Data

• Tier{id, name, price, currency, features[], highlighted, checkout_url}
• Module{id, order, title, summary, image}
• Inquiry{id, name, email, company, interest, message, created_at}
• Enrollment{id, user_id, tier_id, status, created_at}
• Profile{id, full_name}

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 **Liftoff Lab**, a persuasive landing site for a paid, instructor-led product-growth workshop. Visitors should understand the promise, trust the instructor, scan the curriculum, choose a tier and either enrol or ask a question. Enrolled participants log in to a simple dashboard.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Sheet, Select, Accordion) and lucide-react. Use Framer Motion for the headline reveal and scroll animations, react-fast-marquee (or a CSS keyframe marquee) for the ticker, react-hook-form + zod for the contact form, Sonner for toasts and React Router for pages. Use Supabase for Auth (email), a table for enrollments and inquiries, and an Edge Function that stores inquiries and creates Stripe Checkout sessions.

### Pages & layout
1. **Home**:
   - Sticky header: uppercase wordmark; Workshop, Instructor, Pricing and Contact anchors; social icons; a white Login pill. It turns solid on scroll and collapses to a hamburger on mobile.
   - Hero on a navy-to-royal gradient with a faint plus-sign pattern: a three-line uppercase headline with two small rounded photos set between the words, then a glowing blue pill CTA.
   - A marquee tagline strip.
   - Value section with three pain points and outcomes.
   - Instructor: a sticky portrait and a bio with a short accent underline under the name.
   - Curriculum: six modules in a staggered image grid.
   - Pricing: two or three tiers, one highlighted.
   - A full-width testimonial.
   - Contact: name, email, company, an interest select and a message.
   - Footer.
2. **Login / Sign up**.
3. **Dashboard** (protected): enrolled tier, schedule, resource links.
4. **Privacy, Terms, Refund policy** pages.

### Design system
- Tokens: `--hero-from: #1a2a5e`, `--hero-to: #1e40af`, `--primary: 221 83% 53%` (≈`#2563eb`), `--on-dark: #ffffff`, `--on-dark-muted: #c7d2fe`, `--background: #ffffff`, `--foreground: #1a212d`, `--border: #e5e7eb`, `--input-border: #6b7280` (light) / `#7c8bc0` (navy).
- Font: Sofia Sans. Display 80-96px, weight 800, uppercase, -0.05em; H2 56-60px uppercase; body 17px/1.7 in sentence case, 72ch max.
- Spacing on a 4px base; section padding 112-128px.
- Radius: 16px on images, full on pills.
- Shadows: CTA glow `0 0 40px hsl(var(--primary) / .45)`.
- Motion: reveal at 600ms ease-out with an 80ms stagger; marquee at 30s linear.
- Mostly dark sections with one light section for rhythm.

### Components & interactions
StickyHeader, MobileMenu (focus trap), HeroHeadline (inline images; word blur reveal), Marquee (pauses on hover and focus), InstructorBio, ModuleCard (hover zoom), PricingCard (default, highlighted, loading while redirecting to checkout), Testimonial, ContactForm (inline errors, submitting, success toast, error toast with retry), AuthForms, ProtectedRoute (loading spinner, redirect), Dashboard (empty "No enrollment yet" state).

### Data & state
Tiers and modules live in typed config files. Tables: `inquiries(id, name, email, company, interest, message, created_at)`, `enrollments(id, user_id, tier_id, status, stripe_session_id)`, `profiles(id, full_name)`. A Stripe webhook in an Edge Function marks enrollments as paid. The instructor, their bio and the testimonial must be fictional and labelled as placeholders.

### Accessibility
White and light-blue text pass on every gradient stop; white CTA labels pass on `#2563eb`; focus rings are white on dark sections. Uppercase display text needs a sentence-case `aria-label` if letter-spacing hurts readability. The marquee is `aria-hidden` with its message repeated once in plain text, and it stops under `prefers-reduced-motion`. Inline hero photos get alt text or are marked decorative. Form fields need visible labels, and the error summary receives focus. Social icon links need accessible names.
Verified contrast: white on royal: #ffffff on #1e40af = 8.7:1; muted on royal: #c7d2fe on #1e40af = 5.8:1; white on primary: #ffffff on #2563eb = 5.2:1; body: #1a212d on #ffffff = 16.2:1.

### Security
Validate the contact form with zod on the client and again in the Edge Function; add a honeypot field and IP rate limiting (for example, 5 per hour). RLS: inquiries are insert-only for anon and readable only by admins; enrollments and profiles are owner-only. Payments go through Stripe hosted Checkout only, and the secret key stays in the function environment. External social links get `rel="noopener noreferrer"`. Protect dashboard routes on the client and through RLS.

### Performance & SEO
Serve responsive AVIF/WebP images with lazy loading below the fold and preload the hero images. Split legal pages and the dashboard into their own chunks. Add title, description, OG/Twitter cards and Course/Event structured data. Target LCP under 2.5s.

### Guardrails
- Write fresh copy, fictional instructor details and royalty-free photos; no real company claims.
- Don't present sample testimonials or student numbers as real.
- Store only inquiry data you will act on.
- Keep components small and typed; no `any`. Show errors visibly.
- Done when: (1) the contact form stores inquiries with spam protection; (2) a tier button reaches Stripe test checkout; (3) the dashboard is reachable only after login; (4) animations respect reduced motion; (5) mobile navigation works fully by keyboard.

Open the builderAll templatesThis palette on its own