Vaultrey

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.

• Source Sans 3Headings: Source Sans 3 700, 26px H1; 20px card values 700
• JetBrains MonoBody: Source Sans 3 400/600, 16px/1.5; meter captions 14px; mono handle JetBrains Mono 13px

Patterns

• settings sidebar with account identity
• tabbed billing sections
• three-column billing overview (credits / usage / rate limits)
• usage meters with inline actions
• upgrade banner with pill CTA
• info tooltips on metrics
• rate-limit mini meters

States it is designed for

• Free tier (zeros, upgrade banner)
• Paid tier (banner hidden, higher limits)
• Near-limit usage (amber + text)
• Over limit (red text + action)
• Auto-recharge off (dash) / on (threshold and amount)
• Loading skeleton cards
• Payment failed notice

Who it is for

• Individual developers on a free tier
• Researchers checking compute and storage usage
• Users deciding whether to upgrade

Layout

1. Public header (logo, search, nav, avatar)
2. Settings sidebar (~180px): avatar + account name and mono handle; nav (Profile, Account, Authentication, Organisations, Billing active, Downloads 'New', Repositories, Access tokens, SSH keys, Inference providers, Webhooks, Papers, Notifications, Jobs, Hardware, Local apps, Gated repositories)
3. Main: H1 'Billing'; tabs Overview (active), Payment information, Subscriptions, Invoices
4. Column 1 card: Credits $0.00 + 'Add credits'; Automatic recharge; Current period usage; Ends on date
5. Column 2: green upgrade banner with pill; Storage section (private and public meters with View usage / + Add); Compute (shared GPU minutes, inference usage); Bandwidth (egress)
6. Column 3 card: Rate limits (API, resolvers, pages) mini meters; footnote about 5-minute windows
7. Below 1200px column 3 moves under column 2; below 768px everything stacks and sidebar becomes a select

Palette

transparent, calm, data-first. Usage shown plainly with a soft upsell.

• page#ffffff
• card surface#fbfbfd
• primary text#111827
• muted text#5b6472
• border#8b919c
• upgrade banner#e9fbf2
• banner text#146c43
• meter track#e5e7eb
• meter fill#2563eb
• near-limit meter#b45309
• 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. 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

Source Sans 3 700, 26px H1; 20px card values 700

Body

Source Sans 3 400/600, 16px/1.5; meter captions 14px; mono handle JetBrains Mono 13px

Humanist sans similar to observed; tabular numerals for all amounts.

Spacing and imagery

Three-column grid (1fr 2fr 1fr) with 16px gaps; cards radius 10px, 1px border, 16px padding; meters 6px tall radius 3px; banner radius 8px.

Small icons (info, sparkle on upgrade pill); meters are the only graphics.

Components

• Settings sidebar with identity block
• Billing tabs
• Credits card with Add credits
• Automatic recharge setting
• Period usage + end date
• Upgrade banner
• Usage meter row (label, value/limit, action chip, info tooltip)
• Rate limit mini meter
• Add credits dialog
• Auto-recharge dialog

Interactions

• Info icons open tooltips explaining each limit
• View usage chips open a usage breakdown drawer with a chart
• Add credits opens preset amounts then hosted checkout
• Meters turn amber at 80% and show text 'Near limit'
• Tabs deep-link via URL

Data

• Account{id, handle, plan (free|pro|team), credits_cents, auto_recharge{enabled, threshold_cents, amount_cents}, period_end}
• UsageMetric{account_id, key (private_storage|public_storage|gpu_minutes|inference_cents|egress_bytes), used, limit}
• RateLimit{account_id, key (api|resolvers|pages), used, limit, window_s}

Guardrails

Experience

• Show every meter with numbers (used / limit), not bars alone
• Explain limits with tooltips that are reachable by keyboard
• Keep upgrade messaging to one banner
• Show when the billing period ends
• Make 'Add credits' and auto-recharge separate, explicit actions

Accessibility

• Meters use role=meter with aria-valuenow/max and text
• Tooltips are Radix Tooltip triggered by focusable buttons
• Near-limit state uses text as well as amber
• Tabs are links with aria-current
• Mono handle readable at 13px only as secondary text

Security

• Payments only through a hosted checkout provider; credits changed by verified webhook
• RLS: usage and account rows owner-only
• Auto-recharge changes require recent re-authentication
• Rate limit counters maintained server-side only

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 **Vaultrey**'s billing overview for developer accounts on an ML community platform. One screen shows prepaid credits, period spend, storage, compute and bandwidth meters and rate-limit use, with a gentle upgrade banner for free-tier users.

### 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. Recharts for the usage drawer; a hosted checkout provider for credits with a server-verified webhook.

### Pages & layout
1. **Public header**.
2. **Settings sidebar**: avatar, account name, mono handle; nav list with Billing active and a 'New' badge on Downloads.
3. **/settings/billing**: H1; tabs Overview, Payment information, Subscriptions, Invoices.
4. **Grid** `1fr 2fr 1fr`:
   - Credits card: '$0.00', '+ Add credits'; Automatic recharge '–' with Edit; Current period usage '$0.00'; Ends on 'Oct 1'.
   - Usage column: banner 'Upgrade for up to ~10x more storage, compute and rate limits' with pill; Storage (Private 0 GB/100 GB, Public 0 TB/8.7 TB with + Add); Compute (Shared GPU 0/5 minutes, Inference $0.00/$0.10 with a note about billing to an organisation); Bandwidth (Egress 0 B/20 TB this month).
   - Rate limits card: API 29/1k, Resolvers 0/5k, Pages 12/200 with mini meters and footnote.
5. Responsive per layout.

### Design system
- Colors: `--bg: #ffffff` (page), `--card: #fbfbfd` (card surface), `--fg: #111827` (primary text), `--muted: #5b6472` (muted text), `--border: #8b919c` (border), `--banner: #e9fbf2` (upgrade banner), `--banner-fg: #146c43` (banner text), `--track: #e5e7eb` (meter track), `--meter: #2563eb` (meter fill), `--warn: #b45309` (near-limit meter), `--ring: #2563eb` (focus ring).
- Fonts: Source Sans 3 400/600/700; H1 26px; values 20px 700; body 16px/1.5; captions 14px; JetBrains Mono 13px for handle.
- Spacing: 4px base; grid gap 16px; card padding 16px.
- Radius: cards 10px, banner 8px, meters 3px, pills full.
- Shadows: none; 1px borders at 40%.
- Motion: meters animate width 300ms once; drawer 200ms.

### Components & interactions
`SettingsSidebar`, `BillingTabs`, `CreditsCard`, `AddCreditsDialog`, `AutoRechargeDialog` (enable, threshold, amount; re-auth), `UpgradeBanner`, `UsageSection`, `UsageMeterRow` (label, info tooltip, value/limit, action chip), `UsageDrawer` (30-day chart), `RateLimitCard`, `MiniMeter`.

### Data & state
`accounts(id, handle, plan, credits_cents, auto_recharge jsonb, period_end)`, `usage_metrics(account_id, key, used, limit, updated_at)`, `rate_limits(account_id, key, used, limit, window_s)`, `usage_daily(account_id, key, day, amount)`, `payments(id, account_id, amount_cents, status, provider_ref)`. Meters computed as used/limit with thresholds at 80% and 100%.

### Accessibility
Meters `role=meter` with labels like 'Private storage, 0 of 100 gigabytes'. Tooltips on focusable info buttons. Near/over-limit states include text. Tabs are nav links with `aria-current`. Focus ring 2px blue.
Verified contrast: body text on page: #111827 on #ffffff = 17.74:1; muted text on card: #5b6472 on #fbfbfd = 5.79:1; banner text on banner: #146c43 on #e9fbf2 = 6.00:1; meter fill on track: #2563eb on #e5e7eb = 4.17:1; near-limit text: #b45309 on #ffffff = 5.02:1; card border: #8b919c on #ffffff = 3.17:1; focus ring: #2563eb on #ffffff = 5.17:1; body text on card: #111827 on #fbfbfd = 17.16:1.

### Security
RLS: all billing tables owner-only select; no client insert/update on `accounts.credits_cents`, `usage_*`, `rate_limits` (server jobs only). Credits change only from verified checkout webhooks. Auto-recharge edits require re-authentication within 10 minutes. Audit payment and recharge changes.

### Performance & SEO
Fetch usage in one RPC; cache 60s; lazy-load Recharts in the drawer. Settings routes `noindex`.

### Guardrails
- Invent all amounts and limits.
- Name the paid tier generically ('Plus').
- No dark patterns: upgrade banner dismissible for 30 days.

Acceptance criteria:
- [ ] Meters show numbers and states at 80%/100%
- [ ] Add credits updates balance only after webhook
- [ ] Tooltips work with keyboard
- [ ] RLS blocks other users' billing
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own