Template
Boardroom Lens
A board-ready finance reporting dashboard on one dark screen. It includes a KPI strip (ARR, margin, burn, runway, cash), an animated Sankey of where revenue went, a 13-week cash forecast with a hiring what-if slider, receivables aging with risk flags, and a budget-vs-actual variance waterfall with commentary, all driven by a single data file and switchable scenarios.
Board finance reporting dashboard · App · Small tools and apps · front-end app (local state)
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
Start from this templateRead the build prompt
Typefaces
Bricolage Grotesque keeps its characterful title voice; Golos Text is a compact, highly legible body, and Chivo Mono gives the figures an editorial, trading-desk look.
- Bricolage GrotesqueHeadings: title 36-40px bold, sections 20px
- Golos TextBody: body 16px, controls 14px, dense tables 15px
- Chivo MonoFigures and code: figures, eyebrows, month pills, ledger IDs
Who it is for
- CFOs and finance leaders preparing board packs
- Startup founders tracking runway
- FP&A analysts running variance reviews
- Consultants presenting a company's financial picture
Layout
- Header: green status dot + mono uppercase company/eyebrow, large bold title, one-line context, blue Instructions button
- Control bar: 'Scenario' segmented buttons (Actuals, Board plan, Efficiency case, Upside case, and a 'Model a scenario' button), 'Period' month segmented control, theme toggle
- KPI strip of five cells: ARR, gross margin, net burn (orange), runway (green), cash balance, each with a delta
- Hero money-flow card: Sankey from revenue lines to total revenue, then cost of revenue, gross profit and opex categories, with a legend and an operating margin figure
- Two-up: 13-week cash forecast fan chart with a hiring what-if slider; AR aging list with HIGH/WATCH risk badges
- Operating income variance waterfall from budget to actual with a 'Generate commentary' button and authored/AI legend
- Footer noting the demo dataset and period range
Palette
authoritative, cinematic, precise, data-dense, premium. A mission-control room for the finance function.
- background
#080a0f - card
#101319 - text
#eef0f3 - primary blue (revenue)
#547afc - cost orange
#f07a2e - positive teal-green
#1fd6a0 - loss red
#db534a
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on background | 17.34:1 | 4.5:1 |
| Aa | text on card | 16.29:1 | 4.5:1 |
| Aa | muted text on card | 5.82:1 | 4.5:1 |
| Aa | muted text on secondary | 5.09:1 | 4.5:1 |
| Aa | blue revenue text on card | 4.93:1 | 4.5:1 |
| Aa | dark label on blue button | 5.25:1 | 4.5:1 |
| Aa | cost orange text on card | 6.67:1 | 4.5:1 |
| Aa | positive green text on card | 9.90:1 | 4.5:1 |
| Aa | loss red text on card | 4.74:1 | 4.5:1 |
| input / slider border on card | 3.24:1 | 3:1 | |
| Aa | light mode text | 17.64:1 | 4.5:1 |
As vibld’s tokens
The palette on the 15+ color tokens vibld styles a project with, each text color 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
- Bricolage Grotesque Bold 38px title, 21px section headings, slight negative tracking
- Body
- Golos Text 16px body, 14px controls; Chivo Mono for eyebrows, figures, month pills and ledger IDs
A characterful grotesk, a compact Golos Text body and mono figures make it read like a trading terminal crossed with an editorial report.
Spacing and imagery
Full-width 1216px layout, cards with 8px radius and hairline borders, dense segmented controls, generous chart canvases, 24px gutters.
Pure data visualization: a gradient-ribbon Sankey, a fan chart, a waterfall, a range slider and status badges; no photos.
Components
- Eyebrow status line
- Scenario segmented control
- Period month selector
- Theme toggle
- KPI strip with count-up tickers
- Animated Sankey money-flow chart
- Hover-to-trace ribbon highlighting
- 13-week forecast fan chart
- Hiring what-if draggable slider
- AR aging table with risk badges
- Variance waterfall chart
- Slide-out commentary panel
- 'Generate commentary' AI action
- Scenario-from-prose modal and instructions drawer
Interactions
- Switch scenarios and see every chart recompute
- Pick a month to change the reporting period
- Hover or focus a ribbon to trace it end to end with values
- KPI numbers count up on load
- Drag the hiring slider to update the runway date live
- Waterfall bars reveal in sequence
- Click a bar to open the commentary slide-out
- Generate streamed AI commentary; describe a scenario in prose to get editable drivers
Data
Company{name, locale, currency, headcount, close_month}MonthlyRecord{month, revenue_lines{platform, usage, services, marketplace}, cogs_lines{}, opex_lines{rnd, sm, ga}, cash_balance, arr}Budget{month, line, amount}Scenario{id, name, drivers{growth_pct, hiring_monthly, cogs_pct, opex_delta}}Receivable{invoice_no, customer, segment, bucket, days_overdue, amount, risk high|watch|ok}Commentary{line, month, text, source authored|ai}
Build prompt
The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.
The baseline
### 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 color 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, labeled 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 **Boardroom Lens**, a one-screen finance reporting dashboard that a CFO could put in front of a board. It should show the headline metrics, where the revenue went, a short-term cash outlook with a hiring what-if, receivables at risk, and why operating income missed or beat the budget.
### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: ToggleGroup, Slider, Sheet, Dialog, Tooltip) and lucide-react. Use d3-sankey with custom SVG for the flow chart, Recharts (or visx) for the fan and waterfall charts, Framer Motion for count-ups and staggered reveals, zod to validate the data file, and date-fns. The core is front-end only. An optional Supabase Edge Function streams AI commentary and turns a prose description into scenario drivers, with the model key server-side.
### Pages & layout
1. **Header**: a status dot with a mono uppercase company eyebrow, a large title, one line of context (close month, headcount, books locked) and an Instructions button.
2. **Control bar**: scenario segmented control (Actuals, Board plan, Efficiency, Upside, plus "Model a scenario"), a 12-month period selector and a theme toggle.
3. **KPI strip**: ARR, gross margin, net burn, runway in months and cash, each with a change against the prior month.
4. **Money flow**: a Sankey from revenue lines to total revenue, then COGS and gross profit, then opex categories and operating loss or profit; legend and operating margin.
5. **Two-up**: a 13-week cash forecast with a widening band and a hiring-spend slider that recomputes runway; AR aging with bucket, days, amount and a risk badge.
6. **Variance**: a waterfall from budgeted to actual operating income by line; clicking a bar opens commentary; a "Generate commentary" action.
7. **Footer**: a dataset disclaimer and the period range.
### Design system
- Dark: `--background: #080a0f`, `--card: #101319`, `--secondary: #1d2028`, `--border: #282b33` (decorative), `--input-border: #5f6679`, `--foreground: #eef0f3`, `--muted-fg: #8b909c`, `--primary: #547afc` (buttons use `#080a0f` labels), `--cost: #f07a2e`, `--positive: #1fd6a0`, `--loss: #db534a`.
- Light mode: `#f7f8fa` background, `#0f1218` text.
- Fonts: Bricolage Grotesque (title 36-40px bold, sections 20px), Golos Text (body 16px, controls 14px, dense tables 15px; nothing below 12px) and Chivo Mono (figures, eyebrows, pills).
- Spacing on a 4px base; radius 8px; hairline borders, no shadows.
- Motion: count-up 900ms, bars staggered 60ms, ribbon highlight 150ms.
### Components & interactions
ScenarioControl, PeriodPills (arrow-key navigation), KpiTicker, SankeyFlow (hover and focus highlight the path, dim the others, and show a tooltip with value and share of revenue; loss ribbons in red), ForecastFan (median line plus band; the slider updates runway text), AgingTable (risk badges with text), VarianceWaterfall (click or Enter opens the Sheet), CommentaryPanel (authored text; AI stream with loading, error and retry states), ScenarioComposer (prose in, validated drivers out, editable before applying), InstructionsDrawer, ThemeToggle.
### Data & state
A single `data/company.ts` holds `company`, `monthly[]`, `budget[]`, `scenarios[]`, `receivables[]` and `commentary[]`, all validated with zod at startup (fail loudly with a readable error). Put derived metrics (burn, runway, margin, forecast) in pure, unit-tested functions. Keep the scenario, period and theme in URL and localStorage. Ship a fictional cloud-software company with 12 months of data, invented AR customers and a "figures are fictional" note.
### Accessibility
The Sankey needs a keyboard path (tab through the nodes and flows) and an equivalent table. The muted gray (5.8:1), orange (6.7:1) and loss red `#db534a` (4.7:1) all pass on `#101319`. KPI deltas use ▲/▼ with text. The waterfall and fan chart get data tables. The slider has `aria-valuetext` ("$180K per month"). Honor reduced motion by showing final values without count-up or reveal. Streamed commentary goes into a polite live region.
Verified contrast: body: #eef0f3 on #080a0f = 17.3:1; muted: #8b909c on #101319 = 5.8:1; button label: #080a0f on #547afc = 5.2:1; loss red: #db534a on #101319 = 4.7:1.
### Security
With no backend by default, keep no secrets in the client build. The optional AI function validates payloads with zod, caps tokens and rate-limits, and sends only aggregated figures, never customer PII. Render commentary as sanitized text. Put real data behind auth with RLS. Use a CSP that allows only your function origin.
### Performance & SEO
Compute the Sankey layout once per scenario and period (memoized). Lazy-load the composer and the AI stream. Internal tool: noindex, plus a descriptive title.
### Guardrails
- Write fresh copy; use a fictional company and customers, and no real logos.
- Label AI commentary as generated, and never present it as audited.
- Keep components small and typed; no `any`. Show data-validation errors visibly.
- Done when: (1) switching scenario or period updates every section consistently; (2) Sankey totals reconcile with the KPI strip; (3) the hiring slider moves the runway correctly; (4) every chart has a keyboard and table alternative; (5) the app runs fully with the AI disabled.