Varnel

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 600, 28px H1, -0.02em tracking
• InterBody: Inter 400/500, 16px, line-height 1.5; labels 14px 500; testimonial quote 20px/1.45 400

Patterns

• split-screen auth
• testimonial card carousel
• dotted-grid backdrop
• multi-step progress dots
• first/last name side-by-side
• disabled primary until valid
• footer utility bar with language switcher

States it is designed for

• Pristine form with disabled button
• Field-level errors (invalid email, weak password, terms unticked on submit attempt)
• Email already in use with sign-in link
• Submitting spinner
• Server error banner with retry
• Carousel paused / reduced-motion static quote
• Mobile single-column with proof hidden

Who it is for

• Marketing and SEO leads evaluating a B2B analytics tool
• Agency strategists creating a trial workspace
• Buyers arriving from a demo or ad campaign

Layout

1. Two columns at >=1024px: form column (~50%) on white, proof column on a very light grey with a faint dotted grid
2. Form column: wordmark top-left, H1, muted subheading, Email, First/Last name row, Password with eye toggle and rule hint, terms checkbox, full-width primary button, Back link left and progress dots right
3. Proof column: horizontally sliding testimonial cards, the active one centred and full opacity, neighbours partially visible and faded
4. Bottom utility bar across both columns: Contact link left; language select, privacy link and copyright right
5. Below 1024px the proof column is hidden and a single short quote appears under the form; form max-width 360px with 16px gutters

Palette

quiet, credible, editorial, B2B. The form stays calm while social proof does the persuading.

• page surface#ffffff
• proof panel#f7f7f7
• dot grid#d9d9d9
• primary text#171717
• muted text#5c5c5c
• input border#8c8c8c
• primary button#171717
• disabled button fill#f2f2f2
• disabled label#6b6b6b
• focus ring#2f6bff
• error#c02626

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.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

Inter 600, 28px H1, -0.02em tracking

Body

Inter 400/500, 16px, line-height 1.5; labels 14px 500; testimonial quote 20px/1.45 400

Neutral grotesk similar to the observed UI face; the larger quote size gives the proof column its own voice.

Spacing and imagery

Generous: form column padded 64px top, 80px left at desktop; 20px between fields; inputs 44px tall, radius 8px; testimonial cards radius 16px with soft shadow; dotted grid 12px spacing.

Small circular headshots on testimonial cards (use generated/illustrated avatars in mocks), invented customer wordmarks as text; no product screenshots on this step.

Components

• Wordmark
• Text inputs with labels
• Name pair row
• Password input with visibility toggle and rule hint
• Terms checkbox with link
• Primary button with disabled state
• Back link
• Step progress dots
• Testimonial card (quote, avatar, name, role, company)
• Testimonial carousel
• Footer utility bar with language select

Interactions

• Primary button enables only when all fields are valid and terms ticked
• Carousel advances every 7s, pauses on hover/focus, arrow keys move between cards when focused
• Password rule hint turns to a success tick when satisfied
• Progress dots show current step as a wider pill
• Back returns to the email-entry step preserving input

Data

• Account{id, email, first_name, last_name, created_at, signup_step (1..5)}
• Testimonial{id, quote, person_name, role, company, avatar_url, order}
• Consent{user_id, terms_version, accepted_at}

Guardrails

Experience

• Keep the form column visually dominant; the carousel must never steal focus or scroll position
• Explain the password rule before the user types
• Disabled button must still look like a button and explain why via the unmet checklist, not silently
• Keep first and last name side by side only when each field is at least 140px wide
• Show step position (dots plus 'Step 2 of 5' text for screen readers)
• Never auto-advance testimonials faster than 6s

Accessibility

• Carousel has pause control, is keyboard operable and marked as a region with aria-roledescription 'carousel'
• Quotes are real text, not images
• Disabled button label still meets 4.5:1 on its disabled fill
• Checkbox has a large 24px hit area with the label clickable
• Progress dots have a text equivalent
• Eye toggle is a labelled button with aria-pressed

Security

• Supabase Auth for credentials; minimum 12-character password checked client and server side
• Store terms version and acceptance timestamp for audit
• RLS: accounts readable/updatable only by owner; testimonials public read, write restricted to admin role
• Rate-limit sign-up endpoint by IP
• Do not include personal data in analytics events from the form

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 **Varnel**'s account-creation step: a split-screen sign-up for a B2B analytics product that shows teams how their brand appears in AI-generated answers. The left half collects email, name and password; the right half rotates short customer quotes to reassure the buyer. This is step 2 of a 5-step onboarding (email entered on step 1), so it must feel like progress, not a wall.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix primitives) and lucide-react icons. TanStack Query for server state, react-hook-form + zod for forms, date-fns for dates. Supabase for Auth, Postgres and Row Level Security. Next.js App Router with a server action for sign-up, Motion for the carousel.

### Pages & layout
1. **/signup/account** (desktop >=1024px): CSS grid `1fr 1fr`. Left: wordmark top-left at 32px; H1 'Create your account'; muted line about tracking brand visibility; Email (prefilled from step 1, editable); First name / Last name row; Password with eye toggle and hint 'At least 12 characters'; terms checkbox with underlined link; full-width primary button 'Create account'; bottom row with '< Back' left and progress dots right.
   Right: `--panel` background with a radial dotted grid (CSS background, 12px spacing); a carousel of testimonial cards 460px wide, active card centred, neighbours at 40% opacity and partly clipped.
2. **Utility bar** spanning both columns: Contact us left; language select, Privacy, copyright right.
3. **Mobile**: single column, proof panel hidden, one static quote card under the form.

### Design system
- Colors: `--bg: #ffffff` (page surface), `--panel: #f7f7f7` (proof panel), `--dots: #d9d9d9` (dot grid), `--fg: #171717` (primary text), `--muted: #5c5c5c` (muted text), `--input-border: #8c8c8c` (input border), `--primary: #171717` (primary button), `--disabled: #f2f2f2` (disabled button fill), `--disabled-fg: #6b6b6b` (disabled label), `--ring: #2f6bff` (focus ring), `--danger: #c02626` (error).
- Fonts: Inter 400/500/600; H1 28px/1.25 600 -0.02em; body 16px/1.5; labels 14px 500; quote 20px/1.45.
- Spacing: 4px base; field gap 20px; input height 44px; column padding 64px/80px.
- Radius: inputs and buttons 8px; testimonial cards 16px.
- Shadows: testimonial card `0 8px 24px rgb(0 0 0 / 0.08)`; inputs none.
- Motion: carousel slide 400ms ease-in-out; opacity crossfade on neighbours; reduced motion shows a single static card.

### Components & interactions
`AuthSplitLayout`, `Wordmark`, `TextField`, `NameRow`, `PasswordField` (rule checklist that flips to success ticks), `TermsCheckbox`, `PrimaryButton` (disabled state with visible reason list), `StepDots` (current dot is a 16px pill; visually hidden 'Step 2 of 5'), `TestimonialCard`, `TestimonialCarousel` (auto-advance 7s, pause on hover/focus, pause button, arrow keys), `UtilityBar` with `LanguageSelect` (Radix Select). Back preserves entered values in session storage.

### Data & state
`accounts(id uuid pk = auth.uid(), email, first_name, last_name, signup_step int, created_at)`, `consents(id, user_id, terms_version, accepted_at)`, `testimonials(id, quote, person_name, role, company, avatar_url, sort)`. Testimonials are fetched at build time (static) with invented people and companies. Form state in react-hook-form with a zod schema shared by the server action.

### Accessibility
Carousel is a labelled region with a visible pause button; slides are `role=group` with 'n of m'. Auto-advance stops permanently once the user interacts. Disabled button text stays at 4.5:1 and the missing requirements are listed under it. All errors are text with icons, linked with `aria-describedby`. Focus ring 2px `--ring`.
Verified contrast: body text on page: #171717 on #ffffff = 17.93:1; muted subheading on page: #5c5c5c on #ffffff = 6.69:1; primary button label: #ffffff on #171717 = 17.93:1; disabled button label: #6b6b6b on #f2f2f2 = 4.76:1; quote text on card over panel: #171717 on #f7f7f7 = 16.73:1; input border on page: #8c8c8c on #ffffff = 3.36:1; focus ring on page: #2f6bff on #ffffff = 4.50:1; error text: #c02626 on #ffffff = 5.92:1.

### Security
Server action validates with the same zod schema; passwords go straight to Supabase Auth. RLS: `accounts` select/update where `id = auth.uid()`; `consents` insert own only, no update/delete; `testimonials` public select, writes only for an `admin` role claim. Rate-limit per IP (10/hour). Log consent version for audit; keep analytics free of email or names.

### Performance & SEO
Render the form server-side; hydrate the carousel lazily after first paint. Avatars 96px WebP. `noindex` the sign-up steps. Keep JS under 120KB for the route.

### Guardrails
- Invent all testimonial people, roles and companies; label them as sample content in mocks.
- Write fresh copy; do not reuse any real tagline.
- No auto-ticked consent boxes.
- The carousel is optional enhancement; the form must work with JS disabled via the server action.

Acceptance criteria:
- [ ] Button enables only when valid and consent ticked
- [ ] Carousel pauses on hover, focus and via button
- [ ] Mobile shows the form first with one quote
- [ ] Consent rows record terms version
- [ ] Contrast pairs below pass

Open the builderAll templatesThis palette on its own