Conversia

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

A precise geometric title face, a technical body sans and a clean mono for every number give the machined, lab-instrument feel.

• Readex ProHeadings: section titles 18-20px semibold, wordmark
• GeologicaBody: body 16px, controls 14px
• Spline Sans MonoFigures and code: all numerals and percentages, tabular

Who it is for

• RevOps and sales operations analysts
• Heads of sales and marketing reviewing pipeline
• Founders diagnosing funnel leaks
• Growth teams comparing channel quality

Layout

1. Floating pill navigation centered at top: company name, tabs (Funnel, Trends, Closed-lost, Sources, Instructions) and theme toggle
2. Left main column: Lead/Deal funnel segmented toggle, 'Instructions' pill, and carousel arrows
3. Section title and one-line explanation
4. Butterfly funnel card: central teal funnel narrowing through stages with counts; red 'dropped' ribbons to the left with percentages and top loss reasons; tan 'pending' ribbons to the right
5. Carousel dots, then a filter card (segment, source, date range) with the cohort-in-view count
6. Right rail of posture cards: closed-won ARR with sparkline, deal outcomes donut (won/lost/open), open pipeline by stage bars, won ARR by segment, bridge between funnels
7. Footer disclosing the sample dataset
8. Other tabs: weekly cohort conversion curves, loss matrix heatmap, source quality table and scatter

Palette

analytical, precise, calm, transparent, engineered. A lab instrument for pipeline diagnosis.

• background#f9fbfd
• card#ffffff
• text#1b222c
• primary deep teal#2b6470
• dropped red#c0394b
• pending ochre#946a26
• muted surface#edf0f4

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

Readex Pro SemiBold 19px section titles; the brand wordmark in Readex Pro

Body

Geologica 16px body, 14px controls; Spline Sans Mono for all numerals and percentages

Precise geometric sans plus monospace numerals gives a machined, analytical feel.

Spacing and imagery

Two-column layout (about 900px main plus a 320px rail), 8px radius cards on a pale blue-grey canvas, a pill nav with a soft shadow, dense but airy chart padding.

Hand-built SVG data graphics: a butterfly funnel with gradient ribbons, sparklines, a donut and bar meters; info icons open explainers; no photos.

Components

• Floating pill tab nav
• Theme toggle
• Funnel type segmented control
• Butterfly funnel SVG
• Stage drill-down panel
• Dropped/pending ribbons with reason labels
• Filter card (segment, source, date range)
• Cohort-in-view counter
• Closed-won ARR sparkline card
• Win-rate donut
• Open pipeline by stage bars
• Bridge between funnels card
• 'How this is computed' popovers
• Loss matrix and source quality table

Interactions

• Toggle between lead and deal funnels (carousel)
• Click a stage to split its intake and list the records
• Switch the deal funnel between counts and ARR
• Filters recompute every derivation
• Info icon opens a computation explainer
• Hover ribbons for exact values
• Immature cohorts drawn dashed on trend curves
• Light/dark theme toggle

Data

• Lead{id, created_at, segment, source, qualified_at?, meeting_at?, sql_at?, dropped_at?, drop_reason_category, drop_reason_detail}
• Deal{id, lead_id?, opened_at, stage, stage_dates{discovery, evaluation, proposal, negotiation}, closed_at?, outcome won|lost|open, arr, segment, source, loss_category?, loss_detail?}
• Filters{segment, source, date_from, date_to}
• Derived{stage_intake, advanced, pending, dropped, conversion_by_week}

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 **Conversia**, a revenue funnel analytics dashboard for RevOps teams. For each stage of the lead funnel and the deal funnel it shows how many records advanced, are still pending or dropped (and why), with cohort trends, loss analysis and source quality.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Tabs, Popover, Select, Sheet, ToggleGroup) and lucide-react. Use d3-shape and d3-scale with hand-built SVG for the butterfly funnel, Recharts (or visx) for trend curves, heatmaps and scatter plots, Embla Carousel to switch funnels, date-fns, and zod to validate the dataset. It is front-end only, running on a seeded deterministic dataset; the data layer is an interface that can later be backed by a warehouse or CRM export.

### Pages & layout
1. **Floating pill nav**: company label; tabs for Funnel, Trends, Closed-lost and Sources; an instructions link and a theme toggle.
2. **Funnel tab**:
   - A lead/deal segmented control and carousel arrows.
   - Title and a one-line stage path ("Created → Qualified → Meeting → SQL").
   - A large card holding the butterfly funnel: a central trunk narrowing per stage with counts, "dropped" ribbons out to the left (count, percentage, top reason, "+N more") and "pending" ribbons to the right.
   - A counts/ARR toggle on the deal funnel.
   - Below: a filter card (segment, source, date range, cohort count).
   - Right rail: closed-won ARR with weekly sparkline, outcomes donut, open pipeline by stage, won ARR by segment, and a lineage bridge.
3. **Trends**: weekly cohort conversion per milestone, with immature cohorts dashed.
4. **Closed-lost**: an ARR-weighted matrix of loss category × segment, source or size band, plus ranked detail reasons.
5. **Sources**: per-source funnel shapes, a sortable summary table and a volume-vs-quality scatter.
6. **Footer**: a disclosure that the sample data is fictional.

### Design system
- Light: `--background: #f9fbfd`, `--card: #ffffff`, `--foreground: #1b222c`, `--muted-fg: #5a6471`, `--primary: #2b6470`, `--dropped: #c0394b`, `--pending: #946a26`, `--won: #2b6470`, `--border: #e1e5ea` (decorative), `--input-border: #7d8ea4`.
- Dark: `#0e1318` background and `#e6eaef` text, with the primary lifted to `#4f98a6`.
- Fonts: Readex Pro (titles 18-20px semibold), Geologica (body 16px at line-height 1.5, controls 14px, nothing below 12px) and Spline Sans Mono (all numerals, tabular).
- Spacing on a 4px base; radius 8px on cards and full on pills.
- Motion: 300ms ribbon transitions when filters change.

### Components & interactions
PillNav, FunnelToggle, ButterflyFunnel (stage nodes are buttons; hover and focus highlight a ribbon with a tooltip; click opens a drill-down Sheet listing records), ModeToggle (counts/ARR), FilterCard (reset; "no records match" empty state), PostureCard (with an info popover explaining the formula and inputs), CohortCurves, LossMatrix (cell tooltip, color scale legend), SourceTable, VolumeQualityScatter, ExplainerPopover (generated from the same config as the calculation, so they never drift apart).

### Data & state
Types: `Lead`, `Deal` and `Filters` as in the data model. Keep derivations in pure functions: `stageDisposition(records, stage, asOf)` classifies a record as advanced, pending (still within the expected milestone gap) or dropped. Write unit tests with a fixed seed. Filters and the active tab live in URL params. Generate 700 leads and about 110 deals over 26 weeks with a seeded PRNG, using invented company names only.

### Accessibility
The funnel SVG uses `role="img"` with a summary, plus a keyboard-navigable list of stage buttons and a data table toggle. Red and ochre ribbons carry text labels, not color alone. Ochre is deepened to `#946a26` so pending labels pass 4.5:1 on white. Popovers open on focus and Enter. Honor reduced motion by switching off ribbon morphs.
Verified contrast: body: #1b222c on #f9fbfd = 15.4:1; muted: #5a6471 on #ffffff = 6.0:1; white on primary: #ffffff on #2b6470 = 6.6:1.

### Security
Front-end only, so ship no secrets and no network calls in demo mode. When you connect real data, fetch it through an authenticated API with RLS or warehouse row-level policies, and never embed CRM tokens in the client. Validate imported datasets with zod. Render record names as text.

### Performance & SEO
Memoize derivations per filter set and compute them in a web worker for large datasets. Build ribbons from precomputed paths. Lazy-load the non-default tabs. Internal tool: noindex, with a descriptive title.

### Guardrails
- Write fresh copy and invented companies and people; no real CRM brand names in the UI.
- Label the dataset as fictional.
- Keep components small and typed; no `any`. Show data-validation errors visibly.
- Done when: (1) the advanced + pending + dropped counts equal the intake at every stage; (2) filters change every figure consistently; (3) every tile has a working explainer; (4) the funnel and matrix have table alternatives; (5) both themes pass contrast checks.

Open the builderAll templatesThis palette on its own