Woolberry

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 700, 28px H1, -0.01em; eyebrow 18px 600
• InterBody: Inter 400 16px / 1.5; subline 15px 500

Patterns

• centred single-CTA welcome
• muted eyebrow above headline
• time-to-complete promise
• logged-in-as line with log out
• floating support chat launcher

States it is designed for

• Default
• Starting (button busy)
• Returning user who already finished quiz: redirect to app
• Partially completed quiz: button reads 'Continue personalising' with step count
• Chat unavailable: launcher hidden

Who it is for

• sales reps
• recruiters
• growth marketers

Layout

1. Top bar: wordmark left; 'Logged in with name@example.com' and underlined Log out right
2. Centre (vertically at ~35%): small brand icon, muted eyebrow 'Welcome to <product>', H1, subline with duration, violet primary button with arrow
3. Bottom-right floating chat launcher
4. Mobile: same stack, button full width, top bar email truncates

Palette

Welcoming and brisk: one sentence, one button, done.

• canvas#ffffff
• text#1f1f1f
• muted#6b6b6b
• eyebrow#737373
• primary#6a4fe0
• on-primary#ffffff
• primary-hover#5a3fd0
• border#e6e6e6
• focus#6a4fe0

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

Inter 700, 28px H1, -0.01em; eyebrow 18px 600

Body

Inter 400 16px / 1.5; subline 15px 500

Top bar text 14px. Similar to the observed grotesk.

Spacing and imagery

Extremely airy; 8px base; content column 480px; 24px between eyebrow and headline; button 40px tall, radius 8px; no shadows except chat launcher.

Only a small line-art brand icon; no photos or illustrations.

Components

• TopBar with SessionInfo and LogoutLink
• BrandIcon
• Eyebrow
• Headline
• DurationSubline
• StartButton
• ChatLauncher

Interactions

• Button hover darkens; arrow nudges 2px right
• Start navigates to the first quiz question with a slide transition
• Log out ends session and returns to sign-in
• Chat launcher opens support panel

Data

• User{id, email, full_name}
• OnboardingQuiz{user_id, answers jsonb, current_step, completed_at}

Guardrails

Experience

• One primary action; no competing links in the centre
• State the time it takes honestly and keep the quiz within it
• Let users resume a partial quiz
• Keep the logged-in identity visible to avoid wrong-account set-ups
• Provide a skip path inside the quiz, not here

Accessibility

• Single H1; eyebrow is a paragraph, not a heading
• Button text describes the action, arrow icon aria-hidden
• Chat launcher labelled and doesn't overlap focusable content at 200% zoom
• Focus ring 2px #6a4fe0 with 2px offset
• Muted eyebrow still meets 4.5:1

Security

• Quiz answers stored per user with RLS owner-only
• Collect only answers needed for personalisation; mark optional questions
• Logout invalidates the session server-side
• Validate answers with zod 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 **Woolberry**, the post-sign-up welcome screen of a B2B contact-data product. It greets the user, promises a questionnaire that takes under a minute, and starts it with one button.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui, lucide-react, Motion for the transition into the quiz, TanStack Query, zod. Supabase Auth + Postgres for quiz progress.

### Pages & layout
1. **Top bar**: wordmark left; 'Logged in as name@example.com' + underlined 'Log out' right.
2. **Centre**: small line-art icon; eyebrow 'Welcome to Woolberry' (muted); H1 'Let's tailor your setup'; subline 'A few quick questions, under a minute'; violet 'Personalise my setup' button with arrow.
3. **Quiz** (next route): one question per screen (role, team size, primary use, tools), progress bar, Back/Skip, finish to app.
4. Chat launcher bottom-right.
5. Mobile: full-width button; top bar truncates email.

### Design system
- Colors: `--canvas: #ffffff`, `--text: #1f1f1f`, `--muted: #6b6b6b`, `--eyebrow: #737373`, `--primary: #6a4fe0`, `--on-primary: #ffffff`, `--primary-hover: #5a3fd0`, `--border: #e6e6e6`, `--focus: #6a4fe0`.
- Fonts: Inter 400/500/600/700; body 16px/1.5; H1 28px; eyebrow 18px 600.
- Spacing: 8px base; generous whitespace; column 480px.
- Radius: 8px button; 999px launcher.
- Shadows: launcher 0 6px 16px rgba(106,79,224,.3).
- Motion: button arrow nudge 120ms; route slide 250ms; reduced motion crossfade only.

### Components & interactions
TopBar (session info, log out), BrandIcon, Eyebrow, Headline, Subline, StartButton (idle, busy, continue variant), QuizShell (progress, back, skip), ChatLauncher.
Quiz screens reuse the same centred column: question as H1, answer options as large selectable cards (radio behaviour for single choice, checkbox for multi), Back and Skip as text buttons, Continue as the violet button. A thin progress bar sits under the top bar. The last screen shows a short summary of what will be tailored (e.g. default filters and credits guidance) and a 'Go to my workspace' button. The chat launcher opens a panel with a greeting and an email fallback when chat is offline.

### Data & state
Table `onboarding_quizzes(user_id pk, answers jsonb, current_step int, completed_at)`. On load, fetch quiz; redirect if completed; label button 'Continue' if current_step > 0. Answers validated with zod schema per step.
Persist answers after each step (upsert) so closing the tab loses nothing. A pure function maps answers to initial workspace defaults (saved filters, suggested integrations) and is unit-tested.

### Accessibility
Single H1, meaningful button label, labelled launcher, strong focus ring, muted text at >=4.5:1, and quiz steps announce 'Question 2 of 4'.
Verified contrast: body text: #1f1f1f on #ffffff = 16.48:1; muted subline: #6b6b6b on #ffffff = 5.33:1; eyebrow: #737373 on #ffffff = 4.74:1; button label: #ffffff on #6a4fe0 = 5.52:1; button label hover: #ffffff on #5a3fd0 = 6.87:1; focus ring: #6a4fe0 on #ffffff = 5.52:1; chat launcher icon: #ffffff on #6a4fe0 = 5.52:1.

### Security
RLS owner-only on `onboarding_quizzes`; server-side zod validation; logout revokes the refresh token; collect minimal data and mark optional questions.

### Performance & SEO
Tiny welcome route; prefetch the quiz chunk on hover of the button. Auth-only routes noindex.

### Guardrails
- Invented product copy and example email only.
- Acceptance criteria: (1) start opens quiz step 1; (2) partial quiz resumes; (3) completed users skip welcome; (4) log out works; (5) layout holds at 390px.

Open the builderAll templatesThis palette on its own