Raskett

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, 18px card titles; 26px price
• InterBody: Inter 400, 16px, line-height 1.5

Patterns

• app sidebar with grouped sections
• settings sub-nav in a tinted panel
• current plan card with credits meter
• two plan cards side by side
• feature checklist
• dark upgrade and outlined contact-sales buttons
• theme switcher in sidebar footer
• breadcrumb header

States it is designed for

• free plan
• paid plan (Upgrade replaced with Manage billing)
• credits near limit (≥80%): warning line
• credits exhausted: banner
• checkout cancelled: neutral toast
• payment failed: danger banner with Update payment
• loading skeleton
• non-owner: buttons disabled with explanation

Who it is for

• operations teams automating document workflows with agents
• developers evaluating an agent platform

Layout

1. sidebar (~125px): logo, groups (primary items, Agent, Workflow, Developer), Settings active; footer: docs link, avatar, theme switcher (system/light/dark)
2. header: workspace switcher and breadcrumb 'Settings'
3. settings sub-nav in a rounded grey panel
4. main: current plan card (name, badge, description, credits used with monospace fraction and progress bar)
5. two plan cards: paid (price per month, features, dark Upgrade) and enterprise (Custom, features, outlined Contact sales with external icon)
6. below 900px plan cards stack; sub-nav turns into a select

Palette

Neutral, clean, self-serve; pricing presented without pressure.

• bg#f5f5f5
• card#ffffff
• text#171717
• muted#5c5c5c
• subnav#ebebeb
• button#171717
• border#8a8a8a
• meter#2f7d4f
• track#e3e3e3
• brand#1f9d55

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, 18px card titles; 26px price

Body

Inter 400, 16px, line-height 1.5

Credits fraction in JetBrains Mono 15px; group labels 12px uppercase 0.06em.

Spacing and imagery

Density: Medium. Grid: 8px; card padding 16px; 16px gaps. Container: main max 520px. Radius: 12px cards, 6px buttons, 8px sub-nav items. Shadows: Cards 0 1px 2px rgba(0,0,0,0.05) with 1px border.

Line icons beside plan names; no illustrations.

Components

• AppSidebar with ThemeSwitcher
• Breadcrumbs
• SettingsSubNav
• CurrentPlanCard
• CreditsMeter
• PlanCard
• FeatureList
• ContactSalesButton

Interactions

• Upgrade creates a checkout session with a hosted checkout provider and redirects
• Contact sales opens a form in a new tab
• Theme switcher toggles system/light/dark
• After successful checkout, return URL shows a success toast and refreshed plan

Data

• Organization{id, name, plan (free|pro|enterprise), credits_limit, credits_used, period_start, period_end}
• Subscription{org_id, provider_customer_id, status (active|past_due|canceled), renews_at}
• BillingEvent{id, org_id, type, created_at}

Guardrails

Experience

• Show usage before plans so users know why they'd upgrade
• Keep one primary action per plan card
• Show price with period and what 'credits' mean
• Keep enterprise as contact, not a fake price
• Confirm plan changes after webhook, not on redirect alone

Accessibility

• Meter uses role=progressbar with value text '0 of 1,000 credits'
• Plan cards are articles with headings
• External-link icon plus visually hidden '(opens in new tab)'
• Theme switcher is a radio group with labels
• Focus ring visible in both themes

Security

• Only org owners can start checkout (RLS + server check)
• Verify webhook signatures; update subscriptions only from webhooks
• Never trust client-sent price or plan ids; map server-side
• Store only provider customer ids, no card data
• Audit billing events

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 **Raskett**, the billing section of an agent-automation product's settings: current plan with a credits meter, a paid plan card with Upgrade and an enterprise card with Contact sales. Build the sidebar shell, settings sub-nav and billing page with checkout integration stubs.

### 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. Use a hosted checkout provider via an Edge Function and a webhook to update subscriptions.

### Pages & layout
1. **Sidebar**: logo, groups, Settings active (dark pill); footer with docs link, avatar and theme switcher.
2. **Settings layout**: breadcrumb header; sub-nav panel (Organization, Members, Model, Usage, Email servers, Data retention, Billing, Monitoring).
3. **Billing**: current plan card; two plan cards; success/cancel return handling.

### Design system
- Colors: `--bg: #f5f5f5` (page), `--card: #ffffff` (cards), `--text: #171717` (primary text), `--muted: #5c5c5c` (descriptions), `--subnav: #ebebeb` (sub-nav panel), `--button: #171717` (Upgrade and active nav), `--border: #8a8a8a` (outlined buttons), `--meter: #2f7d4f` (credit meter fill), `--track: #e3e3e3` (meter track), `--brand: #1f9d55` (logo glyph).
- Fonts: Inter 600, 18px card titles; 26px price for headings; Inter 400, 16px, line-height 1.5 for body. Credits fraction in JetBrains Mono 15px; group labels 12px uppercase 0.06em.
- Spacing: Medium. 8px; card padding 16px; 16px gaps. Container: main max 520px.
- Radius: 12px cards, 6px buttons, 8px sub-nav items.
- Shadows: Cards 0 1px 2px rgba(0,0,0,0.05) with 1px border.
- Motion: Meter animates on load; Upgrade opens hosted checkout; plan card hover raises border contrast.

### Components & interactions
CurrentPlanCard: plan name with a small grey badge, description, 'Credits used' label left and monospace fraction right, thin progress bar. PlanCard: icon + name + tagline, large price with '/month', check list, button.

- Upgrade creates a checkout session with a hosted checkout provider and redirects
- Contact sales opens a form in a new tab
- Theme switcher toggles system/light/dark
- After successful checkout, return URL shows a success toast and refreshed plan

### Data & state
Seed a free org with 0 of 1,000 credits; toggle to near-limit and paid variants. Plans are defined server-side.

Entities: `Organization{id, name, plan (free|pro|enterprise), credits_limit, credits_used, period_start, period_end}`; `Subscription{org_id, provider_customer_id, status (active|past_due|canceled), renews_at}`; `BillingEvent{id, org_id, type, created_at}`.

States to build and show in a dev-only state switcher:
- free plan
- paid plan (Upgrade replaced with Manage billing)
- credits near limit (≥80%): warning line
- credits exhausted: banner
- checkout cancelled: neutral toast
- payment failed: danger banner with Update payment
- loading skeleton
- non-owner: buttons disabled with explanation

### Accessibility
- Meter uses role=progressbar with value text '0 of 1,000 credits'
- Plan cards are articles with headings
- External-link icon plus visually hidden '(opens in new tab)'
- Theme switcher is a radio group with labels
- Focus ring visible in both themes
Verified contrast: body text on card: #171717 on #ffffff = 17.93:1; muted on card: #5c5c5c on #ffffff = 6.69:1; sub-nav text: #171717 on #ebebeb = 15.04:1; Upgrade label: #ffffff on #171717 = 17.93:1; outlined button border: #8a8a8a on #ffffff = 3.45:1; meter fill vs track: #2f7d4f on #e3e3e3 = 3.93:1; focus ring: #171717 on #f5f5f5 = 16.44:1.

### Security
- Only org owners can start checkout (RLS + server check)
- Verify webhook signatures; update subscriptions only from webhooks
- Never trust client-sent price or plan ids; map server-side
- Store only provider customer ids, no card data
- Audit billing events
RLS detail: `organizations` select for members, update of plan fields only by the service role; `subscriptions` select for owners; `billing_events` owner select, service-role insert.

### Performance & SEO
Prefetch the checkout session only on click; private route noindex.

### Guardrails
- Show usage before plans so users know why they'd upgrade
- Keep one primary action per plan card
- Show price with period and what 'credits' mean
- Keep enterprise as contact, not a fake price
- Confirm plan changes after webhook, not on redirect alone
- 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:
- Upgrade redirects to hosted checkout and returns with updated plan via webhook
- Meter reflects usage and warns at 80%
- Non-owners can't upgrade
- Theme switcher works and persists
- No payment data stored locally

Open the builderAll templatesThis palette on its own