Reslow

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, 24px heading; 28px price
• InterBody: Inter 400, 16px, line-height 1.55

Patterns

• two-column upgrade page: explanation left, plan card right
• underline tabs monthly/yearly
• plan card with tinted header band
• feature list with check and dash markers
• dark CTA echoing selected billing period
• minimal top bar with account menu

States it is designed for

• monthly selected
• yearly selected with savings note
• creating checkout (CTA spinner)
• checkout cancelled return
• payment succeeded return → redirect to app
• trial ended: stronger heading and no 'continue trial' link
• non-admin: explainer asks to contact an admin

Who it is for

• trial admins of an AI assistant workspace
• team leads converting to paid

Layout

1. top bar: page title left, account avatar with name and chevron right
2. left column (~250px): card icon, heading, status sentences, CTA
3. right column (~250px): monthly/yearly underline tabs, plan card with tinted header (price, per-user note, plan name) and feature list
4. below 768px columns stack with the plan card first

Palette

Honest and plain-spoken; a fresh lime band gives the one plan some energy.

• bg#ffffff
• text#14161a
• muted#5b6068
• band#e6f5a8
• band-text#1d3b0f
• check#3d7a1c
• limit#9a6a00
• button#20242c
• border#8b919a
• link#3a5fcf

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, 24px heading; 28px price

Body

Inter 400, 16px, line-height 1.55

Bold 16px lead sentences; feature list 15px; tabs 15px 500.

Spacing and imagery

Density: Relaxed. Grid: 8px; 16px paragraph spacing. Container: max 720px, two columns with 32px gap. Radius: 12px plan card, 8px CTA. Shadows: Plan card 0 8px 24px rgba(20,22,26,0.10).

A small credit-card icon above the heading; no photos.

Components

• TopBar with AccountMenu
• UpgradeExplainer
• BillingPeriodTabs
• PlanCard with tinted header
• FeatureList (included/limited markers)
• CTAButton

Interactions

• Tabs switch between monthly and yearly and update both the price and the CTA label
• CTA creates a hosted checkout session for the chosen period
• Links in features open a fair-use explainer popover
• Account menu offers switch workspace and sign out

Data

• Workspace{id, name, trial_ends_at, plan (trial|pro), billing_period (monthly|yearly), seats}
• Price{id, plan, period, amount_cents, currency, per_seat}

Guardrails

Experience

• State the current status (on trial) and the consequence in the first two sentences
• Mirror the selected period in the CTA label
• Show taxes and per-user basis next to the price
• Mark limits distinctly from inclusions (dash vs check, plus text)
• Explain cancellation terms before the CTA

Accessibility

• Tabs use Radix Tabs with arrow keys
• Price change announced via aria-live
• Markers have hidden text ('Included' / 'Limit')
• Heading hierarchy: h1 page, h2 plan
• CTA is a button with a descriptive label

Security

• Only workspace admins can subscribe (RLS + server check)
• Prices resolved server-side by id
• Verify webhook signatures
• Idempotent checkout creation

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 **Reslow**, the page a trial workspace sees when it's time to subscribe: plain explanation and one CTA on the left, a single plan card with monthly/yearly tabs on the right. Build the page, account menu and checkout handoff.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui on Radix primitives and lucide-react icons. TanStack Query for server state, react-hook-form + zod for every form, date-fns for relative times. Supabase for Auth, Postgres with row-level security and Edge Functions for anything that needs a secret. Hosted checkout provider via Edge Function; webhook updates the workspace plan.

### Pages & layout
1. **Top bar**: page title ('Joining Reslow'), account avatar menu.
2. **Left**: icon, 'Subscribe to a paid plan', trial status line, explanation, selected period sentence, cancellation note, CTA ('Start with monthly billing').
3. **Right**: tabs, plan card (tinted header with price, per-user note, plan name; list of 10 features with check or dash markers).

### Design system
- Colors: `--bg: #ffffff` (page), `--text: #14161a` (primary text), `--muted: #5b6068` (secondary text), `--band: #e6f5a8` (plan header tint), `--band-text: #1d3b0f` (price on tint), `--check: #3d7a1c` (check markers), `--limit: #9a6a00` (dash markers for limits), `--button: #20242c` (CTA), `--border: #8b919a` (card border and tab rule), `--link: #3a5fcf` (inline links).
- Fonts: Inter 600, 24px heading; 28px price for headings; Inter 400, 16px, line-height 1.55 for body. Bold 16px lead sentences; feature list 15px; tabs 15px 500.
- Spacing: Relaxed. 8px; 16px paragraph spacing. Container: max 720px, two columns with 32px gap.
- Radius: 12px plan card, 8px CTA.
- Shadows: Plan card 0 8px 24px rgba(20,22,26,0.10).
- Motion: Tab switch crossfades the price (150ms) and updates CTA wording; card lifts 2px on hover.

### Components & interactions
PlanCard header is a lime band holding the big price left and plan name right; body rows are separated by hairlines with markers at the left.

- Tabs switch between monthly and yearly and update both the price and the CTA label
- CTA creates a hosted checkout session for the chosen period
- Links in features open a fair-use explainer popover
- Account menu offers switch workspace and sign out

### Data & state
Prices from a `prices` table; invented amounts in euros. Selected period in URL (?period=yearly).

Entities: `Workspace{id, name, trial_ends_at, plan (trial|pro), billing_period (monthly|yearly), seats}`; `Price{id, plan, period, amount_cents, currency, per_seat}`.

States to build and show in a dev-only state switcher:
- monthly selected
- yearly selected with savings note
- creating checkout (CTA spinner)
- checkout cancelled return
- payment succeeded return → redirect to app
- trial ended: stronger heading and no 'continue trial' link
- non-admin: explainer asks to contact an admin

### Accessibility
- Tabs use Radix Tabs with arrow keys
- Price change announced via aria-live
- Markers have hidden text ('Included' / 'Limit')
- Heading hierarchy: h1 page, h2 plan
- CTA is a button with a descriptive label
Verified contrast: body text: #14161a on #ffffff = 18.11:1; muted text: #5b6068 on #ffffff = 6.33:1; price on tint: #1d3b0f on #e6f5a8 = 10.68:1; CTA label: #ffffff on #20242c = 15.55:1; check marker: #3d7a1c on #ffffff = 5.25:1; limit marker: #9a6a00 on #ffffff = 4.73:1; card border: #8b919a on #ffffff = 3.17:1; link text: #3a5fcf on #ffffff = 5.65:1.

### Security
- Only workspace admins can subscribe (RLS + server check)
- Prices resolved server-side by id
- Verify webhook signatures
- Idempotent checkout creation
RLS detail: `workspaces` select for members, plan/billing fields updated by service role only; `prices` read-only for authenticated users.

### Performance & SEO
Server-render prices; private route noindex.

### Guardrails
- State the current status (on trial) and the consequence in the first two sentences
- Mirror the selected period in the CTA label
- Show taxes and per-user basis next to the price
- Mark limits distinctly from inclusions (dash vs check, plus text)
- Explain cancellation terms before the CTA
- Write fresh, generic copy and invented sample data; no real brands, logos, product names or people.
- Keep components small and typed (no `any`); surface every error visibly with a way to recover.

Acceptance criteria:
- Tabs update price and CTA
- Checkout created for correct period
- Webhook activates plan
- Non-admins see contact-admin message
- Markers readable without colour

Open the builderAll templatesThis palette on its own