Tallowmere

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 Serif 4Headings: Source Serif 4 500, 22px wordmark and 40px balance figure (similar to the observed book serif)
• InterBody: Inter 400/500, 16px/1.5 UI; table 15px; group labels 12px 600 uppercase 0.06em

Patterns

• warm-paper settings shell
• three-level navigation (app nav / settings nav / content)
• hero balance tile with metallic gradient
• payment method chip + primary buy button
• auto-reload status callout with edit
• sales contact banner
• invoice history table
• serif display wordmark

States it is designed for

• Auto-reload disabled (callout explains risk of interruption)
• Auto-reload enabled (callout shows threshold and amount)
• Low balance (tile caption in clay text + banner)
• No payment method (chip replaced by 'Add payment method')
• Checkout pending/failed
• Empty invoice history
• Credit grant expiring soon status

Who it is for

• Developers paying for API usage with prepaid credits
• Small-team owners managing a shared organisation
• Finance contacts downloading invoices

Layout

1. App nav (155px, warm paper): serif wordmark + collapse; groups Build (Dashboard, Playground, Files, Skills), Analytics (Usage, Cost, Logs, Batches), CLI tool (Usage, Preferences), Manage (API keys, Limits), Documentation; org/user switcher at bottom
2. Settings nav (135px): organisation card at top, items Profile, Appearance, Organisation, Workspaces, Billing (active pill), Limits, API keys, Privacy controls
3. Content: 'Credit balance' card: heading, description; row with large balance tile (metallic gradient, big amount, caption) and right column: 'Charged to' label, payment method chip with edit, dark 'Buy credits'; auto-reload callout with status and dark Edit
4. Banner: invoicing offer with 'Contact sales' outline button
5. 'Invoice history' card: description (timezone note), table Date, Invoice type, Status, Cost, Actions (View)
6. Below 1100px settings nav becomes a horizontal scroller; below 768px balance tile stacks above payment column

Palette

warm, grown-up, understated. A console that feels like good stationery.

• page (warm paper)#faf9f5
• nav/active fill#f1efea
• card surface#ffffff
• primary text#1f1e1d
• muted text#5d5a52
• border#8f8b81
• dark button#1f1e1d
• balance tile#e8e6dc
• accent clay (links, focus)#b4532a
• success/active status#2e7d4f

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 Serif 4 500, 22px wordmark and 40px balance figure (similar to the observed book serif)

Body

Inter 400/500, 16px/1.5 UI; table 15px; group labels 12px 600 uppercase 0.06em

Serif for identity and the balance figure, sans for everything functional.

Spacing and imagery

Soft, roomy cards on warm paper: card radius 12px, 24px padding, 24px between cards; balance tile 280x160 radius 10px; buttons 36px radius 8px; table rows 48px with hairlines.

The balance tile uses a subtle brushed-metal gradient (decorative); payment chip shows a small generic card-brand glyph; line icons elsewhere.

Components

• Serif wordmark
• App nav with grouped sections
• Organisation card
• Settings nav
• Balance tile
• Payment method chip with edit
• Buy credits button + dialog
• Auto-reload callout + settings dialog
• Invoicing banner with Contact sales
• Invoice history table
• Invoice detail link

Interactions

• Buy credits opens a dialog with amount presets and custom input, then hosted checkout
• Edit auto-reload opens dialog: toggle, threshold, reload amount, monthly cap
• Payment chip edit opens hosted payment-method update
• View opens invoice PDF in new tab
• Balance refreshes after checkout return with a success toast

Data

• Organisation{id, name, credit_balance_cents, currency}
• PaymentMethod{org_id, brand_label, last4, provider_ref}
• AutoReload{org_id, enabled, threshold_cents, amount_cents, monthly_cap_cents}
• Invoice{id, org_id, date, type (credit_purchase|credit_grant), status (paid|expiring|expired|refunded), expires_at, amount_cents, pdf_url}

Guardrails

Experience

• Make the balance the largest thing on the page
• State plainly what happens when credits run out and whether auto-reload is on
• Keep Buy credits next to the payment method it will charge
• Show invoice timezone explicitly
• Offer invoicing/sales as a quiet banner, not a modal

Accessibility

• Balance tile text meets 4.5:1 on the gradient's lightest and darkest stops
• Uppercase nav group labels are short with 0.06em tracking
• Invoice table has th scope and a caption
• Callout icon + text for auto-reload state
• Dialogs trap focus and have clear titles

Security

• Payment details handled only by a hosted checkout provider; store provider refs and last4 only
• Balance and invoices written only by verified webhooks
• RLS: org billing tables readable by org admins/billing role only
• Auto-reload changes require admin role and are audited; enforce a monthly cap server-side

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 **Tallowmere**'s billing page for a developer console selling prepaid API credits. Developers see the remaining balance on a big tile, the card that will be charged, auto-reload status and invoice history, and can top up in two clicks.

### 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. A hosted checkout provider handles purchases and payment-method updates; an Edge Function verifies its webhooks.

### Pages & layout
1. **App nav** (155px, `--bg`): serif wordmark; groups BUILD, ANALYTICS, CLI TOOL, MANAGE with items; Documentation; org/user switcher.
2. **Settings nav** (135px): organisation card ('Organisation · Riverside Labs', invented) with expand icon; Profile, Appearance, Organisation, Workspaces, Billing (active `--nav` pill), Limits, API keys, Privacy controls.
3. **Credit balance card**: heading, description ('Credits are used by API, CLI and playground requests. Buy directly or set up auto-reload.'); balance tile ('$4.95', 'Remaining balance'); right column 'Charged to' + payment chip (generic card glyph, '•••• 4242' style last4, edit) + dark 'Buy credits'; auto-reload callout ('Auto-reload is disabled. Enable it to avoid interruptions when credits run out.') + Edit.
4. **Banner**: 'Prefer monthly invoicing? Talk to our team.' + 'Contact sales'.
5. **Invoice history**: 'Invoices are issued when credits are purchased. Dates shown in UTC+1.'; table Date, Invoice type, Status ('Expiring Feb 19, 2027'), Cost, Actions (View).
6. Responsive per layout.

### Design system
- Colors: `--bg: #faf9f5` (page (warm paper)), `--nav: #f1efea` (nav/active fill), `--card: #ffffff` (card surface), `--fg: #1f1e1d` (primary text), `--muted: #5d5a52` (muted text), `--border: #8f8b81` (border), `--primary: #1f1e1d` (dark button), `--tile: #e8e6dc` (balance tile), `--accent: #b4532a` (accent clay (links, focus)), `--success: #2e7d4f` (success/active status).
- Fonts: Source Serif 4 500 (wordmark 22px, balance 40px); Inter 400/500/600 (body 16px/1.5, table 15px, group labels 12px uppercase 0.06em).
- Spacing: 4px base; card padding 24px; 24px card gap.
- Radius: cards 12px, tile 10px, buttons 8px, nav pills 8px.
- Shadows: cards `0 1px 2px rgb(31 30 29 / 0.05)`; tile inner highlight only.
- Motion: balance count-up 400ms after top-up (off under reduced motion); dialogs 150ms.

### Components & interactions
`AppNav`, `OrgCard`, `SettingsNav`, `BalanceTile` (decorative gradient, low-balance caption), `PaymentChip`, `BuyCreditsDialog` (presets, custom amount with zod min/max), `AutoReloadCallout`, `AutoReloadDialog` (toggle, threshold, amount, monthly cap), `SalesBanner`, `InvoiceTable` (caption, status text, View link), `Toast`.

### Data & state
`organisations(id, name, credit_balance_cents, currency)`, `payment_methods(org_id, brand_label, last4, provider_ref)`, `auto_reload(org_id, enabled, threshold_cents, amount_cents, monthly_cap_cents)`, `invoices(id, org_id, date, type, status, expires_at, amount_cents, pdf_path)`, `org_members(org_id, user_id, role admin|billing|developer)`. Balance decremented by usage metering server-side.

### Accessibility
Balance tile text checked against the tile tone; gradient is decorative. Invoice table with caption and `th scope`. Auto-reload state conveyed by icon + text. Dialog titles and descriptions set. Focus ring 2px clay.
Verified contrast: body text on card: #1f1e1d on #ffffff = 16.64:1; muted text on paper: #5d5a52 on #faf9f5 = 6.54:1; nav text on active fill: #1f1e1d on #f1efea = 14.48:1; balance figure on tile: #1f1e1d on #e8e6dc = 13.30:1; dark button label: #ffffff on #1f1e1d = 16.64:1; accent link on card: #b4532a on #ffffff = 4.99:1; status text on paper: #2e7d4f on #faf9f5 = 4.79:1; border on card: #8f8b81 on #ffffff = 3.40:1; focus ring clay: #b4532a on #ffffff = 4.99:1.

### Security
RLS: billing tables select for `role in (admin, billing)` of the org; no client writes to balances, invoices or payment methods (webhook only). `auto_reload` update for admin only, with server-enforced monthly cap and audit row. Webhook signatures verified with a server-side secret. Invoice PDFs via short-lived signed URLs.

### Performance & SEO
Server-render the page; invoices paginated 20 per page. Settings routes `noindex`.

### Guardrails
- Invent organisation name, amounts and dates.
- Name payment and card brands generically.
- Never show full card numbers.

Acceptance criteria:
- [ ] Buy credits completes via checkout and balance updates after webhook
- [ ] Auto-reload settings save with cap enforced
- [ ] Developers (non-billing role) cannot see billing (RLS)
- [ ] Invoice PDFs open via signed URL
- [ ] Contrast pairs pass

Open the builderAll templatesThis palette on its own