Boardroom Lens

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

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

1. Header: green status dot + mono uppercase company/eyebrow, large bold title, one-line context, blue Instructions button
2. Control bar: 'Scenario' segmented buttons (Actuals, Board plan, Efficiency case, Upside case, and a 'Model a scenario' button), 'Period' month segmented control, theme toggle
3. KPI strip of five cells: ARR, gross margin, net burn (orange), runway (green), cash balance, each with a delta
4. 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
5. Two-up: 13-week cash forecast fan chart with a hiring what-if slider; AR ageing list with HIGH/WATCH risk badges
6. Operating income variance waterfall from budget to actual with a 'Generate commentary' button and authored/AI legend
7. 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

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

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 ageing 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.

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 **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 ageing 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 grey (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.

Open the builderAll templatesThis palette on its own