Verrimond

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 700, 26px H1; plan prices 32px 700 with tabular numerals
• InterBody: Inter 400/500, 16px/1.5; checklist 15px/1.5

Patterns

• admin sidebar with grouped sections
• expiry alert callout
• current-plan badge
• billing period segmented control (monthly/yearly)
• two plan cards with feature checklists
• custom-price enterprise card
• usage meter in sidebar footer

States it is designed for

• Trial active with days left
• Trial ended (alert: connections will be removed, members revoked on date)
• Paid plan active (alert hidden, manage billing link)
• Payment failed (alert variant with update payment)
• Checkout in progress/returned success
• Contact sales submitted confirmation
• Non-admin: plan cards read-only with 'Ask an admin'

Who it is for

• Workspace admins converting a trial
• Finance approvers comparing plans
• IT buyers evaluating enterprise security features

Layout

1. Admin sidebar (200px): mode tabs (Chat, Projects, Admin active); Workspace (People & security, Workspace settings, Analytics, Subscription active), API & programmatic, Builder tools; footer usage card and workspace/help switchers
2. Main (max 520px + cards wider): icon, H1 'Subscription', 'Manage your plan'
3. 'Your plan' heading, pink alert callout with end date and consequences + details link, current plan badge 'Free trial'
4. 'Choose a plan' heading + description; segmented control Monthly / Yearly right
5. Two cards side by side: per-seat plan (name, big price + 'per user', checklist, Subscribe button) and enterprise (name, 'Custom', 'pay-per-use from 100+ users', checklist, Contact sales)
6. Below 900px cards stack; segmented control goes under the heading

Palette

clear, fair, decisive. Plans laid out plainly with the stakes of inaction stated once.

• page#ffffff
• sidebar#f7f7f7
• primary text#111418
• muted text#5e6168
• border#8a8e99
• alert fill#fce7ef
• alert text#9c2554
• plan badge fill#eaf4ff
• badge/check blue#1a64bd
• dark button#1e2230
• focus ring#1a64bd

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 700, 26px H1; plan prices 32px 700 with tabular numerals

Body

Inter 400/500, 16px/1.5; checklist 15px/1.5

Neutral grotesk similar to observed; currency symbol and unit in 14px muted beside price.

Spacing and imagery

Cards 50/50 with 16px gap, radius 12px, 24px padding, soft shadow; checklist rows 28px with 16px check icon; alert radius 10px, 16px padding; segmented control 32px tall.

Blue check icons in lists; no imagery beyond the page icon.

Components

• Admin sidebar
• Usage meter card
• Page header with icon
• Expiry alert callout
• Current plan badge
• Billing period segmented control
• Plan card (name, price, unit, checklist, CTA)
• Custom-price card
• Checkout handoff
• Contact sales form dialog
• Plan comparison link

Interactions

• Monthly/Yearly toggle updates prices with savings note ('2 months free') and announces change
• Subscribe opens seat count confirmation then hosted checkout
• Contact sales opens a short form (company size, needs)
• Alert details link opens the data-retention explanation
• Current plan card shows 'Current plan' instead of CTA

Data

• Workspace{id, plan (trial|pro|enterprise), trial_ends_at, seats, billing_period (monthly|yearly), subscription_status (trialing|active|past_due|canceled)}
• Plan{key, name, price_per_seat_monthly, price_per_seat_yearly, currency, features[]}
• SalesLead{id, workspace_id, company_size, message, created_by, created_at}

Guardrails

Experience

• State the end date and consequences once, clearly, without alarmist styling
• Keep plan comparison to two cards with the same checklist order
• Show per-user pricing units and yearly savings explicitly
• Label the current plan instead of offering it again
• Route enterprise to a short form, not a calendar wall

Accessibility

• Segmented control is a radio group with visible labels
• Price change after toggle announced politely
• Checklist uses ul with icons aria-hidden
• Alert has role=status (not alert) unless the trial has ended
• Plan cards have headings so screen readers can jump between them

Security

• Subscriptions changed only through hosted checkout and verified webhooks
• RLS: workspace plan readable by members, writable only by server
• Sales leads insert-only for admins; rate-limited
• Seat counts validated server-side against members

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 **Verrimond**'s subscription page for an AI assistant workspace. Admins see when the trial or subscription ends and what happens then, their current plan, and a clear choice between a per-seat plan and a custom enterprise plan, billed monthly or yearly.

### 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. Subscriptions use a hosted checkout provider; an Edge Function verifies webhooks and updates the workspace.

### Pages & layout
1. **Admin sidebar** as in the workspace admin area, with Subscription active and the usage card in the footer.
2. **/admin/subscription**: icon, H1, 'Manage your plan'.
3. **Your plan**: pink alert 'Your subscription ends on March 3, 2027. Connections will be removed and members lose access. Learn more' (invented date); badge 'Free trial'.
4. **Choose a plan**: 'Pick the plan that fits your team.'; segmented Monthly / Yearly.
5. **Plan cards**: 'Team' -- '€24 per user' (yearly shows '€20 per user, billed yearly'), checklist: from 1 user, leading AI models, data connections to common workplace tools, native chat and support-desk integrations, email support, free programmatic credits; 'Subscribe'. 'Enterprise' -- 'Custom', 'usage-based, from 100+ users', checklist: everything in Team, advanced security controls, larger storage and file limits, programmatic access, single sign-on with your identity provider, user provisioning (SCIM), flexible billing, advanced connectors, priority access, regional data hosting; 'Contact sales'.
6. Responsive per layout.

### Design system
- Colors: `--bg: #ffffff` (page), `--sidebar: #f7f7f7` (sidebar), `--fg: #111418` (primary text), `--muted: #5e6168` (muted text), `--border: #8a8e99` (border), `--alert-bg: #fce7ef` (alert fill), `--alert: #9c2554` (alert text), `--badge-bg: #eaf4ff` (plan badge fill), `--accent: #1a64bd` (badge/check blue), `--primary: #1e2230` (dark button), `--ring: #1a64bd` (focus ring).
- Fonts: Inter 400/500/700; H1 26px; prices 32px 700 tabular; body 16px/1.5; checklist 15px.
- Spacing: 4px base; section gap 32px; card padding 24px.
- Radius: cards 12px, alert 10px, badge full, segmented 8px.
- Shadows: cards `0 2px 12px rgb(17 20 24 / 0.06)`.
- Motion: price crossfade 150ms on toggle; none under reduced motion.

### Components & interactions
`AdminSidebar`, `UsageMeter`, `PageHeader`, `PlanAlert` (trialing/ended/past_due variants), `PlanBadge`, `BillingPeriodToggle` (Radix RadioGroup styled as segmented), `PlanCard` (name, `Price`, unit, `FeatureList`, CTA or 'Current plan'), `SeatConfirmDialog`, `ContactSalesDialog` (react-hook-form + zod), `Toast`.

### Data & state
`workspaces(id, plan, trial_ends_at, seats, billing_period, subscription_status)`, `plans(key, name, price_seat_monthly_cents, price_seat_yearly_cents, currency, features text[])`, `sales_leads(id, workspace_id, company_size, message, created_by, created_at)`, `members(workspace_id, user_id, role)`. Plans served from a static table; prices formatted with Intl.

### Accessibility
Toggle is a radio group; price updates announced once. Plan cards are articles with h3. Alert uses `role=status` while trialing, `role=alert` once after expiry. Check icons aria-hidden. Focus ring 2px blue.
Verified contrast: body text: #111418 on #ffffff = 18.47:1; muted text: #5e6168 on #ffffff = 6.20:1; sidebar text: #5e6168 on #f7f7f7 = 5.79:1; alert text on alert fill: #9c2554 on #fce7ef = 6.35:1; plan badge text: #1a64bd on #eaf4ff = 5.24:1; dark button label: #ffffff on #1e2230 = 15.83:1; check icons blue on card: #1a64bd on #ffffff = 5.83:1; card border: #8a8e99 on #ffffff = 3.28:1; focus ring: #1a64bd on #ffffff = 5.83:1.

### Security
RLS: `workspaces` select for members; no client update on plan fields (webhook only). `plans` public read. `sales_leads` insert for admins only, no select for non-admins; rate-limit 3/day. Seat count checked server-side before creating a checkout session. Webhook signatures verified with a server secret.

### Performance & SEO
Static plan data; page server-rendered; checkout session created on click only. Admin routes `noindex`.

### Guardrails
- Invent prices, dates and plan names.
- Describe integrations and AI models generically; name no vendors.
- No fake urgency timers; one factual alert.

Acceptance criteria:
- [ ] Toggle switches all prices and shows savings
- [ ] Subscribe goes to checkout with seat count
- [ ] Enterprise form submits and confirms
- [ ] Non-admins cannot change plans
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own