Zestlane

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, 26px H1, -0.01em
• InterBody: Inter 400 16px / 1.5; quote 20px / 1.45

Patterns

• split-screen auth
• six-box one-time code input
• resend countdown with ghost button
• testimonial card carousel with peeking neighbours
• dotted texture panel
• step-progress dots
• slim legal footer with language picker

States it is designed for

• Empty code (Verify disabled)
• Submitting
• Invalid code error
• Expired code
• Locked after too many tries
• Resent confirmation
• Carousel paused
• Success: advance to next step dot

Who it is for

• marketers signing up for a trial
• growth and SEO leads
• agency teams

Layout

1. Left half (white): logo, H1, sent-to line, six large code boxes, right-aligned resend countdown and ghost Resend button, full-width Verify button (disabled until complete), bottom row with Back link and step-progress dots
2. Right half: pale grey panel with a dotted noise texture; centred testimonial card (quote, avatar, name, role and company, square company mark) with neighbouring cards peeking at both edges
3. Footer bar across full width: Contact link left; language picker, privacy link and copyright right
4. Below 960px the right panel is hidden; below 480px code boxes shrink to fit and footer wraps

Palette

Confident and polished; a quiet form on one side, social proof on the other.

• canvas#ffffff
• panel#f4f4f5
• text#18181b
• muted#5f5f66
• input-border#8a8a91
• primary#18181b
• on-primary#ffffff
• disabled-bg#f4f4f5
• disabled-text#6e6e75
• accent#4f46e5
• focus#4f46e5

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 600, 26px H1, -0.01em

Body

Inter 400 16px / 1.5; quote 20px / 1.45

Countdown in JetBrains Mono 14px. Similar to the observed grotesk.

Spacing and imagery

Spacious; 8px base; left column max 380px, 80px from the left edge; code boxes 60x64px with 12px gap; radius 8px boxes and buttons, 16px testimonial card; testimonial shadow 0 12px 32px rgba(0,0,0,.08).

Testimonial avatars are small circular photos of invented people (or initials); company marks are generic geometric squares; dotted texture drawn with CSS radial gradients.

Components

• Logo
• OtpInput (6 large boxes)
• ResendCountdown + GhostResend
• VerifyButton
• BackLink
• StepDots
• TestimonialCarousel
• LegalFooter with LanguageSelect

Interactions

• Carousel auto-advances every 7s with fade/slide; pauses on hover, focus or reduced motion; manual prev/next buttons
• Code input auto-advances and accepts paste; Verify activates at 6 digits
• Resend enabled when the countdown reaches zero
• Back returns to the email step keeping the entered email

Data

• SignupFlow{id, email, step (email|verify|profile|workspace|done)}
• OtpChallenge{id, email, code_hash, expires_at, attempts}
• Testimonial{id, quote, person_name, role, company, avatar_url}

Guardrails

Experience

• Keep testimonial motion calm and pausable; it must never pull focus from the form
• Show which email the code went to and let Back change it
• Disabled Verify must still explain why (helper text 'Enter the 6-digit code')
• Step dots show progress through the whole sign-up
• Testimonials are illustrative sample content, clearly editable by the team

Accessibility

• Carousel has pause control, prev/next buttons and aria-roledescription='carousel'; auto-rotation stops under prefers-reduced-motion
• Code input labelled as a group, supports autocomplete='one-time-code'
• Disabled button text still meets 4.5:1 for legibility
• Step dots have aria-label 'Step 2 of 6'
• Focus ring 2px #4f46e5

Security

• Hash codes, expire in 10 minutes, 5 attempts
• Rate-limit resend per email and IP
• Testimonial content served read-only; admin-only writes via RLS
• No PII in URLs (email held in server session)

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 **Zestlane**, the code-verification step of a multi-step sign-up for a marketing analytics product. The left side takes a six-digit email code; the right side shows a calm, pausable carousel of sample customer quotes.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui, lucide-react, Motion (carousel), react-hook-form + zod. Supabase Auth OTP and a `testimonials` table for sample quotes.

### Pages & layout
1. **Left column**: logo; H1 'Verify your email'; 'We sent it to name@example.com.'; six 60x64 code boxes; right-aligned 'Resend in 00:57' plus ghost 'Resend'; full-width 'Verify'; bottom row with 'Back' and step dots (2 of 6 active as a longer pill).
2. **Right panel**: pale panel with dot texture; centred testimonial card (20px quote, avatar, invented name, role, company, square mark); neighbour cards peek at edges; prev/next/pause controls bottom.
3. **Footer**: Contact left; language select, privacy link and copyright right.
4. Responsive: panel hidden below 960px.

### Design system
- Colors: `--canvas: #ffffff`, `--panel: #f4f4f5`, `--text: #18181b`, `--muted: #5f5f66`, `--input-border: #8a8a91`, `--primary: #18181b`, `--on-primary: #ffffff`, `--disabled-bg: #f4f4f5`, `--disabled-text: #6e6e75`, `--accent: #4f46e5`, `--focus: #4f46e5`.
- Fonts: Inter 400/600; body 16px/1.5; H1 26px; quote 20px/1.45; JetBrains Mono 14px countdown.
- Spacing: 8px base; 32px between form blocks.
- Radius: 8px boxes/buttons, 16px testimonial card, 999px step pill.
- Shadows: testimonial 0 12px 32px rgba(0,0,0,.08).
- Motion: carousel crossfade 400ms every 7s; code box focus scale 1.02; reduced motion disables auto-rotation.

### Components & interactions
OtpInput (paste, auto-advance), ResendCountdown, VerifyButton (disabled with helper text), BackLink, StepDots, TestimonialCarousel (auto, pause, prev/next, peeking neighbours), LegalFooter, LanguageSelect.
The left column should never shift when the error message appears: reserve a line under the boxes for helper or error text. Step dots are purely indicative (not clickable) but carry a text label. The carousel's neighbour cards are clipped at the panel edges with a fade mask and are aria-hidden; only the active card is in the accessibility tree. Pause state persists while the user is on the page. The language picker in the footer changes UI copy, not the testimonial language, and reloads strings without losing entered digits.

### Data & state
Supabase OTP for email; signup step stored in `signup_flows(user_id, step)`. `testimonials(id, quote, person_name, role, company, avatar_url, is_published)` seeded with three invented quotes about growing search visibility. Carousel index in local state.
Hold `digits`, `status`, `resendAt` and `carouselIndex` in local state; the signup step comes from the server so a refresh resumes on the correct dot. Testimonials are fetched once and cached for the session.

### Accessibility
Carousel follows the ARIA carousel pattern with pause and labelled controls; code group labelled; disabled Verify readable; step dots labelled; focus visible everywhere; quotes are real text.
Verified contrast: body text: #18181b on #ffffff = 17.72:1; muted text: #5f5f66 on #ffffff = 6.33:1; primary button label: #ffffff on #18181b = 17.72:1; disabled button text: #6e6e75 on #f4f4f5 = 4.6:1; code box border: #8a8a91 on #ffffff = 3.43:1; focus ring: #4f46e5 on #ffffff = 6.29:1; quote text on card: #18181b on #ffffff = 17.72:1; muted footer on white: #5f5f66 on #ffffff = 6.33:1.

### Security
OTP hashed, expiring, attempt-limited; resend throttled; `testimonials` public read where published, writes admin-only; email kept server-side rather than in query strings.

### Performance & SEO
Lazy-load testimonial avatars; carousel only mounts above 960px. Auth routes noindex.

### Guardrails
- Testimonials are invented sample content with invented people and companies; label them as samples in the admin.
- Acceptance criteria: (1) paste fills code; (2) Verify disabled until 6 digits with helper; (3) resend countdown; (4) carousel pausable and stops with reduced motion; (5) panel hides on small screens.

Open the builderAll templatesThis palette on its own