Breakeven

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Be Vietnam Pro is a precise, slightly geometric sans with real italics, and B612 Mono was drawn for aircraft cockpits, which reinforces the calculator/engineering precision.

• Be Vietnam ProHeadings: headline ~56px 700 with italic emphasis word, form headings 30px
• Be Vietnam ProBody: body 16px
• B612 MonoFigures and code: uppercase labels and meta, 12px minimum, 0.2em

Who it is for

• Account executives and sales engineers
• RevOps leads standardising business cases
• Founders selling to mid-market and enterprise
• Consultants pricing engagements

Layout

1. Split-screen auth: left dark navy panel with blurred blue/teal glow orbs over a faint grid, monospace letter-spaced label top-left, large white headline with one italic grey word, subline, and monospace footer tags
2. Right warm off-white panel: app icon + monospace wordmark with 'Back home' link, segmented Sign in / Create account pill, two-tone 'Welcome back.' heading, Google button, 'OR EMAIL' divider, pill email/password inputs with icons, gradient blue pill submit, privacy note
3. App: deals list, deal workspace with template inputs and three-scenario results, formula/template builder, research panel, WYSIWYG report editor with cover page, PDF export, settings with theme

Palette

Technical, premium, focused, trustworthy, a little cinematic. Dark glow on one side, calm paper on the other: serious numbers presented with polish.

• background (warm paper)#fbfaf6
• dark panel#050a14
• text#110c09
• primary blue#1e64ef
• glow teal#1b5a73
• muted surface#f3f2ee
• border#e6e4e1

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

Be Vietnam Pro 700, ~56px on the dark panel with an italic emphasis word; 30px form headings

Body

Be Vietnam Pro 400 16px; B612 Mono uppercase (12px minimum, 0.2em tracking) for short labels and meta tags; placeholders in sentence case

Sans headlines paired with monospace micro-labels to signal 'calculator / engineering precision'. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

50/50 split viewport; narrow ~420px form column; fully rounded pill inputs and buttons; 10px card radius elsewhere; generous vertical spacing.

No photos; abstract blurred colour orbs and a subtle grid on the dark panel; a small glossy app icon. In-app: Recharts scenario charts, prospect logos pulled from websites.

Components

• Split auth layout with glow background
• Segmented sign in / create toggle
• OAuth button
• Icon-prefixed pill inputs
• Gradient pill CTA
• Deal list with status
• Template picker (SaaS, services, automation, blank)
• Parameter input form
• Three-scenario results cards and chart
• Formula editor with live preview
• Research panel output (snapshot, pains, fit, talking points)
• Brand extraction preview (logo, colours, fonts)
• Block-based report editor with AI rewrite
• PDF export and share link

Interactions

• Live recalculation as inputs change
• Scenario tabs conservative/expected/optimistic
• Formula validation with inline errors
• AI research with loading skeleton
• One-click brand extraction with fallback logo
• Inline block editing with AI rewrite
• Export PDF progress
• Copy share link

Data

• Settings{user_id, company_name, product_description, theme}
• Template{id, owner_id, name, description, parameters[{key,label,unit,default}], returns[{key,label,formula}], scenario_multipliers}
• Deal{id, owner_id, prospect_name, url, template_snapshot, inputs, scenario, branding{logo,colors,fonts}, research, report_blocks[], share_token}

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 a template'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 templates)
- 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.

### Goal
Build **Breakeven**, a private workspace where account executives and sales engineers turn discovery-call numbers into a credible ROI business case. A rep creates a deal, chooses a model (software seats, professional services, automation savings, or blank), enters inputs, compares conservative, expected and optimistic outcomes, adds AI-generated prospect research, and exports a report styled in the prospect's own brand.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Recharts for scenario and payback charts, Framer Motion for number tweens and panel transitions, react-hook-form + zod for inputs and the formula-template builder, a safe expression parser (e.g. expr-eval with a whitelist) for formulas, jsPDF + html-to-image for export, Embla for the starter-template carousel. Supabase: Auth (email + Google), Postgres, Storage for logos and PDFs, Edge Functions for research, brand extraction and AI rewrites.

### Pages & layout
1. **Auth**: 50/50 split. Left: near-black navy panel with blurred blue and teal glows over a faint grid, monospace label, large headline with one italic muted word, subline, monospace footer tags. Right: paper-toned panel with app icon, segmented Sign in/Create account, two-tone heading, Google button, "or email" divider, icon pill inputs, gradient pill submit, privacy note.
2. **Deals**: list with prospect logo, template, headline ROI and updated date; New deal.
3. **Deal workspace**: left input column, right results -- three scenario cards (ROI %, payback months, net value) plus a cumulative value chart.
4. **Research**: paste a URL or notes; returns snapshot, pain points, fit reasons, talking points, signals.
5. **Report editor**: cover page with prospect branding, editable blocks, AI rewrite per block, Export PDF and Share link.
6. **Templates**: visual builder for parameters, returns and formulas with live test values.
7. **Settings**: company name, product description, theme presets or custom gradient.

### Design system
Tokens: `--background: #fbfaf6`, `--card: #ffffff`, `--foreground: #110c09`, `--primary: #1e64ef`, `--primary-foreground: #fbfaf6`, `--muted: #f3f2ee`, `--border: #e6e4e1`, `--panel-dark: #050a14`. Fonts: Be Vietnam Pro 400-700 for UI and headings, B612 Mono uppercase with 0.2em tracking for labels and figures. Scale 12/13/16/20/30/56 (mono labels never below 12px). Radius: pills for inputs/buttons, 10px cards. Primary button gradient from `#0f66f4` to `#1e4fd6` with a soft blue shadow. Motion 200ms ease-out; numbers tween 500ms. Add `--muted-foreground: #6b6660`, `--panel-muted: #8a93a6` for secondary text on the dark panel, and `--input-border: #999084` for pill inputs.

### Components & interactions
Numeric inputs with unit suffixes, min/max and inline errors. Scenario cards animate on change. Formula editor highlights unknown variables and blocks save until valid. Research and brand extraction show skeletons, then editable output, with graceful fallbacks (domain favicon if no logo). Report blocks: hover toolbar, rewrite (loading, success, undo). Empty states for no deals and no templates.

### Data & state
Settings, Template(parameters JSON, returns JSON with formulas), Deal(template_snapshot, inputs, scenario, branding, research, report_blocks, share_token). Snapshot the chosen template into each deal so later edits don't change sent reports. Keep calculation logic in one pure module with unit tests. Seed four built-in templates and two demo deals for fictional companies.

### Accessibility
Mono uppercase labels must still be real `<label>`s. Scenario results need text equivalents; charts get a table view. The italic grey word and muted panel text use `--panel-muted`, verified on navy. Segmented control uses `role="tablist"`. Honour reduced motion for tweens and glows. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #110c09 on #fbfaf6 = 18.61:1; muted text #6b6660 on #fbfaf6 = 5.44:1; muted text #6b6660 on #f3f2ee = 5.07:1; button text #fbfaf6 on #1e64ef = 4.88:1.

### Security
RLS: every table scoped to `owner_id = auth.uid()`; shared reports served by an Edge Function using an unguessable token with optional expiry. Never `eval` formulas; parse with a whitelisted grammar. Research and brand extraction fetch only http(s) URLs, block private IP ranges (SSRF), time out, and cap response size. Sanitize fetched HTML and AI output with DOMPurify before rendering. AI keys only in function secrets; rate-limit per user. Validate uploads (PNG/JPEG/SVG sanitized, ≤2 MB).

### Performance & SEO
Lazy-load jsPDF and the report editor. Cache research results per deal. Auth and app are `noindex`; any public share pages too.

### Guardrails
- Original copy; fictional prospects; no real company logos in seeds.
- Present ROI figures as estimates with visible assumptions.
- Typed components, no `any`, visible errors.
- Done when: a deal computes three scenarios that match unit tests; a custom formula template saves and reuses; research and brand extraction populate a report; PDF export uses prospect colours; users only see their own deals.

Open the builderAll templatesThis palette on its own