Wispgate

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.

• Source Sans 3Headings: Source Sans 3 700, 30px card heading
• Source Sans 3Body: Source Sans 3 400 16px / 1.5

Patterns

• mascot emoji overlapping card top
• tinted address box inside card
• underlined resend link
• change-email helper under card
• full site header and footer around auth card

States it is designed for

• Default
• Resending
• Resent with countdown
• Rate-limited
• Update-email dialog: validation error, success toast
• Link expired arrival: message variant
• Already verified: redirect with toast

Who it is for

• new community members
• researchers signing up to download or publish
• returning users who never verified

Layout

1. Global header: logo + wordmark, search input, section links, avatar
2. Centre: card (440px, radius 12px, 1px border) with a mascot illustration overlapping its top edge, H1, subline, tinted box with 'We've sent a verification email to' and the address, two lines of instructions, underlined 'Resend verification email'
3. Below card: 'Entered the wrong address? Update your email' with link
4. Footer: theme selector chip and four link columns
5. Mobile: header collapses to logo + menu; card full width

Palette

Friendly and communal: a cheerful mascot and plain words make a chore feel welcoming.

• canvas#ffffff
• surface#ffffff
• tint-box#f5f6f8
• text#111827
• muted#4b5563
• border#e5e7eb
• link#111827
• mascot-yellow#ffd21e
• input-border#8b93a1
• focus#2563eb

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

Source Sans 3 700, 30px card heading

Body

Source Sans 3 400 16px / 1.5

Address 18px 500. Footer column headings 16px 600. Similar to the observed humanist sans.

Spacing and imagery

Airy; 4px base; card padding 32px top (room for mascot) 24px sides; tint box 16px padding radius 8px; card radius 12px; soft shadow 0 1px 3px rgba(0,0,0,.06).

One original mascot illustration (round, cheerful character) in yellow; no photos; footer text-only.

Components

• SiteHeader
• Mascot
• VerifyCard
• AddressBox
• ResendLink
• UpdateEmailLink
• SiteFooter with ThemeSelect

Interactions

• Resend triggers a request and replaces the link with 'Sent - check again in 60s' countdown
• Update email opens a small dialog with an email field and confirm
• Theme selector switches system/light/dark

Data

• User{id, username, email, email_verified_at}
• EmailChangeRequest{user_id, new_email, token_hash, expires_at}

Guardrails

Experience

• Keep global navigation visible so the user isn't stranded
• Repeat the address in a tinted box for quick checking
• Mention the spam folder in one short line
• Put 'update your email' outside the card as a secondary path
• Resend is a link, not a big button, to avoid spamming

Accessibility

• Mascot has empty alt (decorative)
• Resend and update links are underlined and have clear names
• Countdown and success messages in aria-live='polite'
• Dialog for email change is labelled and traps focus
• Focus ring 2px #2563eb

Security

• Rate-limit resend and email change
• Email change requires re-verification of the new address; old address notified
• Tokens hashed, single-use, expiring
• RLS: email_change_requests owner-only

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 **Wispgate**, the email verification page of a community hub for sharing models and datasets. The page keeps the site header and footer, shows a mascot above a verification card, and supports resending the link or changing the address.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog), lucide-react, react-hook-form + zod, TanStack Query. Supabase Auth for email confirmation and email change; a transactional email service delivers links.

### Pages & layout
1. **Header**: logo + wordmark, search, section links, avatar.
2. **Main**: 80px top space; card with an original mascot overlapping its top edge; H1 'Verify your email'; subline 'One step left before you can start'; tint box with 'We sent a link to' + address; two instruction lines (click the link; check spam); underlined 'Resend verification email'.
3. Below card: 'Wrong address? Update your email' (opens dialog).
4. **Footer**: theme selector and four link columns (Product, Company, Resources, Social) with invented labels.
5. Mobile: compact header, full-width card.

### Design system
- Colors: `--canvas: #ffffff`, `--surface: #ffffff`, `--tint-box: #f5f6f8`, `--text: #111827`, `--muted: #4b5563`, `--border: #e5e7eb`, `--link: #111827`, `--mascot-yellow: #ffd21e`, `--input-border: #8b93a1`, `--focus: #2563eb`.
- Fonts: Source Sans 3 400/600/700; body 16px/1.5; H1 30px.
- Spacing: 4px scale; card padding 32/24px; 24px between card and helper line.
- Radius: 12px card, 8px tint box and inputs.
- Shadows: card 0 1px 3px rgba(0,0,0,.06).
- Motion: mascot gentle 2s bob once on load; off with reduced motion.

### Components & interactions
SiteHeader, Mascot, VerifyCard, AddressBox, ResendLink (countdown), UpdateEmailDialog (email field, zod validation, submit busy, success toast), SiteFooter, ThemeSelect.
The mascot sits half outside the card (negative top margin) and scales down to 56px on mobile. The address box uses a slightly larger size so the user can spot typos. The resend link becomes plain text with a countdown ('You can resend in 58s') while throttled and returns to a link afterwards. The update-email dialog shows the current address read-only above the new field, requires typing the new address once, and on success replaces the address in the card and restarts the resend countdown. The footer theme selector is a three-option menu (System, Light, Dark) persisted per device.

### Data & state
Supabase Auth user; `email_change_requests(user_id, new_email, token_hash, expires_at)` managed by an Edge Function. Resend and change handled via auth APIs with server-side throttling. Mock address: name@example.com.
Card copy variants (default, expired link, just resent) come from one typed map. Keep resend timestamps server-side and return `retryAfter` seconds so the client countdown matches the server rule.

### Accessibility
Decorative mascot hidden; underlined links; live region for status; labelled dialog with focus trap; heading hierarchy H1 in card, footer headings as H2.
Verified contrast: body text: #111827 on #ffffff = 17.74:1; muted instructions: #4b5563 on #ffffff = 7.56:1; address on tint box: #111827 on #f5f6f8 = 16.41:1; muted on tint box: #4b5563 on #f5f6f8 = 6.99:1; input border in dialog: #8b93a1 on #ffffff = 3.09:1; focus ring: #2563eb on #ffffff = 5.17:1.

### Security
Throttle resend and change per user/IP; verify new email before switching and notify the old address; hash tokens; RLS owner-only on change requests; generic error messages.

### Performance & SEO
Mascot as small SVG; header and footer shared layout; auth routes noindex.

### Guardrails
- Original mascot only; invented footer links.
- Acceptance criteria: (1) resend shows countdown; (2) update email validates and re-sends; (3) already-verified users redirect; (4) layout at 390px; (5) keyboard can reach resend and update.

Open the builderAll templatesThis palette on its own