Ombrin

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.

• ManropeHeadings: Manrope 600 20px dialog title, 24px page title
• ManropeBody: Manrope 400 16px / 1.5

Patterns

• small centered alert dialog with pill label
• two equal-width buttons (neutral + soft danger)
• centered settings column with left section nav
• danger card at bottom with small solid delete button
• heavy grey scrim

States it is designed for

• dialog open
• deleting
• deleted (goodbye page)
• error with retry
• active paid subscription (dialog explains it will be cancelled)
• owner of shared workspaces (must transfer first, dialog lists them)

Who it is for

• users of a lightweight SaaS tool
• people closing personal accounts

Layout

1. Top bar: product mark, breadcrumb-like switcher 'Account' with chevrons, avatar right
2. Centered page title and subtitle
3. Two-column body: left section nav (general active, billing), right stacked cards (Full name with input and Save footer; other setting card; Delete account card with explanation, footer 'Proceed with caution' and small red Delete button)
4. Dialog (~220px wide, 16px radius): pill label, two-line title, explanation, two buttons in a row
5. Mobile: nav becomes tabs; dialog width 90vw

Palette

Soft, polite and restrained - destructive but not alarming.

• page#ffffff
• card surface#fafafa
• text#18181b
• muted text#6d6d73
• pill bg#f1f1f2
• danger#e1311a
• on danger#ffffff
• soft danger bg#fde4df
• soft danger text#b42318
• scrim#d1d1d3
• focus ring#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.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

Manrope 600 20px dialog title, 24px page title

Body

Manrope 400 16px / 1.5

Similar to the observed geometric sans; pill label 12px 500.

Spacing and imagery

Relaxed; dialog 20px padding, 12px button gap; cards 16px padding; radius 12px cards, 16px dialog, 999px buttons in dialog, 6px elsewhere; dialog shadow 0 24px 60px rgba(0,0,0,.18).

None.

Components

• TopBar with switcher
• SettingsNav
• SettingsCard with footer
• DangerCard
• DeleteAccountAlertDialog
• PillLabel

Interactions

• Delete in the danger card opens the dialog; focus lands on Cancel (safer default)
• Delete account shows a spinner then signs the user out to a goodbye page
• Escape and scrim click close the dialog
• Save buttons enable only when their card has changes

Data

• User{id, name, email, created_at}
• Workspace{id, owner_id, name}
• Subscription{user_id, status}
• DeletionRequest{user_id, requested_at, completed_at?}

Guardrails

Experience

• Keep the dialog to title, one explanation and two buttons
• Put the safer option first and focused
• Explain blockers instead of failing silently
• Confirm the result on a dedicated page

Accessibility

• Use role=alertdialog; initial focus on Cancel
• Title and description connected via aria-labelledby/-describedby
• Buttons have clear verbs ('Delete account', 'Cancel')
• Scrim does not hide focus ring
• Goodbye page is a real h1 with a link home

Security

• Require recent login (re-auth within 5 minutes) before deletion
• Delete or anonymise all PII server-side; keep only legally required billing records
• Block deletion while the user owns shared workspaces
• Audit the deletion request
• Revoke all sessions and tokens after deletion

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 **Ombrin**, a minimal account settings page with a compact delete-account alert dialog and a goodbye page. Cover subscription and workspace-ownership blockers.

### Stack
Use React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui, Radix, lucide-react, TanStack Query, react-hook-form, zod, Supabase.  Use Supabase for Auth, Postgres (row-level security on every table) and Storage where noted; keep only the anon key in the browser and run privileged work in Edge Functions.

### Pages & layout
1. **/account/general** with cards and dialog.
2. **/account/billing** stub.
3. **/goodbye** after deletion.

Regions, in order:
- Top bar: product mark, breadcrumb-like switcher 'Account' with chevrons, avatar right
- Centered page title and subtitle
- Two-column body: left section nav (general active, billing), right stacked cards (Full name with input and Save footer; other setting card; Delete account card with explanation, footer 'Proceed with caution' and small red Delete button)
- Dialog (~220px wide, 16px radius): pill label, two-line title, explanation, two buttons in a row
- Mobile: nav becomes tabs; dialog width 90vw

### Design system
- Colors: `--page: #ffffff` (page), `--card-surface: #fafafa` (card surface), `--text: #18181b` (text), `--muted-text: #6d6d73` (muted text), `--pill-bg: #f1f1f2` (pill bg), `--danger: #e1311a` (danger), `--on-danger: #ffffff` (on danger), `--soft-danger-bg: #fde4df` (soft danger bg), `--soft-danger-text: #b42318` (soft danger text), `--scrim: #d1d1d3` (scrim), `--focus-ring: #2563eb` (focus ring).
- Fonts: Manrope 600 20px dialog title, 24px page title for headings; Manrope 400 16px / 1.5 for body. Similar to the observed geometric sans; pill label 12px 500.
- Spacing, radius and shadows: Relaxed; dialog 20px padding, 12px button gap; cards 16px padding; radius 12px cards, 16px dialog, 999px buttons in dialog, 6px elsewhere; dialog shadow 0 24px 60px rgba(0,0,0,.18).
- Motion: 150-200 ms ease-out for hover, focus and overlay transitions; overlays fade and scale from 98% to 100%; everything collapses to an instant change under prefers-reduced-motion.
- Mood: Soft, polite and restrained - destructive but not alarming. Imagery: None.

### Components & interactions
Build these components: TopBar with switcher; SettingsNav; SettingsCard with footer; DangerCard; DeleteAccountAlertDialog; PillLabel.

- Delete in the danger card opens the dialog; focus lands on Cancel (safer default)
- Delete account shows a spinner then signs the user out to a goodbye page
- Escape and scrim click close the dialog
- Save buttons enable only when their card has changes

### Data & state
Model: `User{id, name, email, created_at}`; `Workspace{id, owner_id, name}`; `Subscription{user_id, status}`; `DeletionRequest{user_id, requested_at, completed_at?}`.

Deletion calls an Edge Function that cancels subscriptions, removes owned data and deletes the auth user. The client just awaits and signs out.

States to implement and demo:
- dialog open
- deleting
- deleted (goodbye page)
- error with retry
- active paid subscription (dialog explains it will be cancelled)
- owner of shared workspaces (must transfer first, dialog lists them)

### Accessibility
- Use role=alertdialog; initial focus on Cancel
- Title and description connected via aria-labelledby/-describedby
- Buttons have clear verbs ('Delete account', 'Cancel')
- Scrim does not hide focus ring
- Goodbye page is a real h1 with a link home
- Body text is 16px with line-height 1.5 (15px only inside dense tables), nothing renders below 12px, weights of 300 or lighter appear only at 24px and above, and uppercase is limited to short labels with at least 0.05em tracking.
Verified contrast: body text on white: #18181b on #ffffff = 17.72:1; muted text on card: #6d6d73 on #fafafa = 4.92:1; Delete label on red: #ffffff on #e1311a = 4.51:1; soft danger button text: #b42318 on #fde4df = 5.43:1; pill label text: #6d6d73 on #f1f1f2 = 4.55:1; focus ring on white: #2563eb on #ffffff = 5.17:1; text on scrim-dimmed page behind: #18181b on #d1d1d3 = 11.62:1.

### Security
- Require recent login (re-auth within 5 minutes) before deletion
- Delete or anonymise all PII server-side; keep only legally required billing records
- Block deletion while the user owns shared workspaces
- Audit the deletion request
- Revoke all sessions and tokens after deletion

RLS: `users` profile row - select/update own; `workspaces` - owner delete; `deletion_requests` - insert own, select own; the actual deletion uses the service role inside the Edge Function.

### Performance & SEO
Tiny; no special work. Noindex account pages.

### Guardrails
- Keep the dialog to title, one explanation and two buttons
- Put the safer option first and focused
- Explain blockers instead of failing silently
- Confirm the result on a dedicated page
- Use the product name Ombrin and fresh, generic copy throughout; all people, companies, amounts and IDs are invented, and no third-party brand, logo or wordmark appears.
- Keep components small and typed (no `any`), and surface every failure visibly instead of swallowing it.

Acceptance criteria:
- [ ] Deletion works end to end with re-auth
- [ ] Blockers are explained
- [ ] Focus management correct
- [ ] 390px works
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own