Sharewell

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.

• AntonHeadings: Anton 400, 56px uppercase, 0.01em tracking, line-height 1.0 (similar to the observed heavy condensed display face)
• InterBody: Inter 400/600, 16px body at 1.5; 24px card titles (600); 14px nav and field label

Patterns

• oversized condensed uppercase headline hero
• read-only link field with inline Copy pill
• bright green pill Share button
• hero illustration of envelope/card on right
• two-card "They get / You get" reward split
• check and cross icon lists for terms
• minimal left nav with highlighted Earn item
• avatar initials chip top-right

States it is designed for

• Loading skeleton for link and reward amounts
• Link generation failed (retry button)
• Clipboard blocked (show "Press Ctrl+C" hint with text selected)
• Program paused in your region (hero replaced by notice)
• Reward earned (progress: 1 of 3 friends qualified)
• Account not eligible (unverified identity) with verify CTA

Who it is for

• Existing customers of a payments or money-transfer app
• Freelancers paid across borders
• Growth teams running referral programs

Layout

1. Header: wordmark left; notification bell and account chip (initials + name + chevron) right
2. Left nav (~180px): Home, Card, Recipients, Payments, Earn (active, green)
3. Hero panel (rounded, pale sage): huge two-line uppercase headline with reward amount; "Share your link" label; link field with Copy pill; green Share button; envelope illustration right
4. Two equal cards below: "They get" and "You get" with check/cross bullet lists
5. Terms link and FAQ accordion further down
6. Mobile: nav becomes bottom tabs; illustration moves above headline; cards stack

Palette

bold, upbeat, direct, trustworthy. Loud headline, calm details.

• page background#ffffff
• hero panel#e8ece9
• headline and body#0e0f0c
• secondary text, nav#454745
• Share button and Copy pill fill#9fe870
• label on green button#163300
• check icons, active nav#2f7a34
• cross icons#c02c2c
• link field outline#868685
• reward card outline (decorative)#e2e5e3

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

Anton 400, 56px uppercase, 0.01em tracking, line-height 1.0 (similar to the observed heavy condensed display face)

Body

Inter 400/600, 16px body at 1.5; 24px card titles (600); 14px nav and field label

Uppercase is limited to the hero headline. Currency figures use tabular numerals.

Spacing and imagery

Generous: 8px base; hero padding 48px; 24px gap between cards; radius 16px hero and cards, full pill for buttons and Copy; no shadows, only hairline borders.

One glossy 3D illustration of an envelope with a card inside (invented, no logo); simple line icons in nav; filled check and cross icons in lists.

Components

• Header with account chip and bell
• Left nav with active pill
• Hero headline
• Read-only link field with Copy pill
• Share button (Web Share API with fallback menu)
• Reward card with icon list
• Terms link
• FAQ accordion
• Copied toast

Interactions

• Copy writes the link to clipboard and swaps label to "Copied" for 2s
• Share opens the native share sheet when supported, otherwise a menu (email, message, copy)
• Clicking the link field selects all text
• Nav items show a tinted background on hover
• FAQ items expand with 150ms height transition

Data

• ReferralProgram{id, region, reward_amount, currency, friend_benefit, qualifying_rule, active}
• ReferralLink{user_id, code, created_at}
• Referral{id, referrer_id, invitee_email_hash, status (invited|signed_up|qualified|paid), qualified_at}
• Payout{id, user_id, amount, currency, status}

Guardrails

Experience

• State both sides of the reward in plain numbers with the qualifying condition
• Show exclusions (the cross list) as clearly as the benefits
• Keep Copy and Share adjacent and one tap each
• Show progress toward the reward once invites exist
• Region-specific terms and currency are shown in the user’s currency

Accessibility

• Link field is a labelled read-only input; Copy announces "Link copied" via role="status"
• Check/cross icons have text equivalents ("Included", "Not included")
• Headline is real text (not an image) and reflows at 200% zoom
• Green button label meets 4.5:1 using the dark green label colour
• Nav current item uses aria-current="page"

Security

• Referral codes are random and non-guessable; never expose user IDs
• Store invitee emails hashed; do not show who signed up beyond first name or initials
• Reward qualification computed server-side from transactions; client cannot mark referrals qualified
• Rate-limit link regeneration and invite sends; fraud checks before payout

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 **Sharewell**, the referral page of a money-transfer app. A signed-in customer sees a loud hero ("INVITE FRIENDS, GET $75"), copies or shares a personal link, and reads two plain cards describing what their friend gets and what they get, including what doesn't count.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui (Accordion, DropdownMenu, Toast) on Radix, lucide-react, TanStack Query, zod. Supabase for auth, referral links and referral status; a server route computes qualification from transactions.

### Pages & layout
1. **Header**: invented wordmark left; bell and account chip (initials circle, name, chevron) right.
2. **Left nav**: Home, Card, Recipients, Payments, and "Earn $75" (active, green text with gift icon).
3. **Hero panel** (pale sage, 16px radius): two-line uppercase condensed headline; "Share your link" label; a 360px read-only field with the link and a green "Copy" pill inside it on the right; a larger green "Share" pill beside it; a glossy envelope-and-card illustration on the right half.
4. **Reward cards** (two columns): "They get" (a check item: fee-free transfer up to $600) and "You get" (check: $75 when three friends each send $300; cross: same-currency transfers don't count).
5. **Terms and FAQ** accordion below.
6. Mobile: bottom tab bar, illustration above the headline, cards stacked, Share full-width.

### Design system
- Colors: `--bg: #ffffff` (page background), `--hero: #e8ece9` (hero panel), `--fg: #0e0f0c` (headline and body), `--muted: #454745` (secondary text, nav), `--brand: #9fe870` (Share button and Copy pill fill), `--on-brand: #163300` (label on green button), `--positive: #2f7a34` (check icons, active nav), `--negative: #c02c2c` (cross icons), `--input-border: #868685` (link field outline), `--card-border: #e2e5e3` (reward card outline (decorative)).
- Fonts: Anton (similar to the observed heavy condensed display) for the hero only, 56px desktop / 40px mobile, uppercase, line-height 1.0; Inter for everything else (body 16px/1.5, card titles 24px/600, labels 14px/600).
- Spacing: 8px scale; hero padding 48px; 24px card gap; 32px section gap.
- Radius: 16px hero and cards; buttons, Copy and nav highlight fully rounded.
- Shadows: none; hairline borders.
- Motion: Copy label swap; 150ms accordion; nothing else.

### Components & interactions
AppHeader, SideNav (aria-current), ReferralHero, LinkField (select on focus), CopyButton (clipboard with fallback hint), ShareButton (`navigator.share` or a menu with email, message and copy), RewardCard with IconList (check/cross with text labels), ProgressStrip ("1 of 3 friends qualified"), FAQ Accordion, Toast.

### Data & state
Tables: `referral_programs(id, region, reward_amount, currency, friend_benefit, qualifying_rule, active)`, `referral_links(user_id, code, created_at)`, `referrals(id, referrer_id, invitee_email_hash, status, qualified_at)`, `payouts(id, user_id, amount, currency, status)`. Mock one program and three referrals at different statuses. Handle states: loading skeleton, link generation failed, clipboard blocked, program paused in region, progress toward reward, not eligible (verify identity CTA).

### Accessibility
The link is a labelled read-only input; Copy announces "Link copied" through a polite status region. Icons in the lists carry text alternatives. The hero headline is live text and reflows at 200% zoom. The green buttons use a dark green label to meet contrast. Focus rings: 2px dark ink with 2px offset.
Verified contrast: headline and body: #0e0f0c on #ffffff = 19.23:1; headline on hero panel: #0e0f0c on #e8ece9 = 16.12:1; muted label on hero panel: #454745 on #e8ece9 = 7.86:1; button label on green: #163300 on #9fe870 = 9.45:1; positive check icon: #2f7a34 on #ffffff = 5.31:1; negative cross icon: #c02c2c on #ffffff = 5.77:1; link field border: #868685 on #ffffff = 3.64:1; active nav text: #2f7a34 on #ffffff = 5.31:1.

### Security
Codes are random 10-character strings, never user IDs. RLS: users select only their own link, referrals and payouts; programs are public read. Qualification and payout are server-only writes. Hash invitee emails, show at most initials, rate-limit link regeneration, and run fraud checks before any payout.

### Performance & SEO
Serve the illustration as an optimised image with explicit dimensions. Prefetch the link server-side so the hero renders without a spinner. The page is authenticated and noindex.

### Guardrails
- Invented wordmark, amounts and illustration; no real brand names or card designs.
- Always show exclusions next to the benefits.
- Acceptance criteria: (1) Copy and Share work, with fallbacks; (2) reward terms render from program data in the user's currency; (3) progress updates when a referral qualifies; (4) every state renders with mock data; (5) contrast and keyboard checks pass.

Open the builderAll templatesThis palette on its own