1. Colours
Use CSS variables (e.g. bg-primary, text-score-high). Values below reflect globals.css — toggle theme to see applied surfaces.
2. Typography
Typeface: Outfit (weights 300–700) via next/font/google — --font-outfit on <html>, Tailwind font-sans.
Display
78
Heading 1
Performance clarity
Heading 2
Cash health pillar
Body
Bench compares your business to sector peers using standard accounting data — no manual entry.
Small
Updated when you run a new snapshot.
Label
Benchmark context
Metric
82
Large key numbers shown under a small label — e.g. pillar row score.
3. Spacing
Prefer Tailwind spacing tokens (4px grid). Examples: p-4, gap-6, space-y-8.
4. Core components
ScoreRing
Circular score 0–100; ring uses score semantic colours.
Pillar accordion
Full-width rows; one open at a time (controlled). Replaces the deprecated card grid.
All rows collapsed
| Metric | Your business | Industry average |
|---|---|---|
| Monthly cashflow (first half average) | DKK -11,965 | — |
| Monthly cashflow (second half average) | DKK -25,027 | — |
| Cashflow direction | Declining ↓ | Stable or growing |
How we calculated this
Monthly net cashflow split into two halves. Score = 50 + (trend × 40), clamped 1–100.
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Gross margin | 61% | 62% |
| EBITDA margin | 18% | 16% |
How we calculated this
Weighted average of gross margin score (50%) and EBITDA margin score (50%), each benchmarked against sector medians.
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Cash runway | 4.2 months | 3.5 months |
| Debtor days | 38 days | 42 days |
How we calculated this
Weighted average of cash runway score (50%) and debtor days score (50%).
Based on: Latest snapshot (point in time) · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Revenue per cost DKK | 1.42× | 1.39× |
| EBITDA margin | 18% | 16% |
How we calculated this
Weighted average of revenue-per-opex score (50%) and EBITDA margin score (50%).
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Debt ratio | 0.2% | 0.3% |
| Total liabilities | DKK 330,000 | — |
How we calculated this
Debt-to-revenue ratio benchmarked against sector median.
Based on: Latest snapshot (point in time) · Industry: Danish service-sector SMEs
Growth expanded (mock)
| Metric | Your business | Industry average |
|---|---|---|
| Monthly cashflow (first half average) | DKK -11,965 | — |
| Monthly cashflow (second half average) | DKK -25,027 | — |
| Cashflow direction | Declining ↓ | Stable or growing |
How we calculated this
Monthly net cashflow split into two halves. Score = 50 + (trend × 40), clamped 1–100.
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Gross margin | 61% | 62% |
| EBITDA margin | 18% | 16% |
How we calculated this
Weighted average of gross margin score (50%) and EBITDA margin score (50%), each benchmarked against sector medians.
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Cash runway | 4.2 months | 3.5 months |
| Debtor days | 38 days | 42 days |
How we calculated this
Weighted average of cash runway score (50%) and debtor days score (50%).
Based on: Latest snapshot (point in time) · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Revenue per cost DKK | 1.42× | 1.39× |
| EBITDA margin | 18% | 16% |
How we calculated this
Weighted average of revenue-per-opex score (50%) and EBITDA margin score (50%).
Based on: Trailing 12 months · Industry: Danish service-sector SMEs
| Metric | Your business | Industry average |
|---|---|---|
| Debt ratio | 0.2% | 0.3% |
| Total liabilities | DKK 330,000 | — |
How we calculated this
Debt-to-revenue ratio benchmarked against sector median.
Based on: Latest snapshot (point in time) · Industry: Danish service-sector SMEs
Saved score — no drill-down (static descriptions, no chevron)
MetricsComparisonTable (isolated)
Score hero
Forest score block with industry + period under the percentile, and a sparkline on the right.
Animated (count-up)
Bench score
Currently your business
is scored at
0
~58th percentile
Service sector
Trailing 12 months
Last updated: 17 Apr 2026
Score over time
Static (no animation)
Bench score
Currently your business
is scored at
72
~58th percentile
Service sector
Trailing 12 months
Last updated: 17 Apr 2026
Score over time
StatusBadge
MetricRow
LoadingSkeleton
Score ring
Pillar card
Bench score
5. Accuracy flow
Onboarding to improve benchmark accuracy. Static previews below do not call the API.
State: question 1
State: question 2
State: question 3
State: complete
6. Layout primitives
Page container
page-container — max width, horizontal padding (this page uses it).
Section spacing
Stack major sections with space-y-20 or py-16 between blocks.
Card grid
Dividers
7. Common patterns
Forms
Compose with Field* from components/ui/field, Input, Select, Textarea, Checkbox, Switch, RadioGroup. End cards with FormActions from components/bench/.
Lists
ListRow for settings-style stacks; Table for dense data; ScrollArea for long columns inside a fixed height.
Empty & alert states
No snapshot yet
Connect your accounting system and run your first Bench snapshot to see scores.
Tabs
High-level Bench score and benchmark line.
Accordion
Overlays & menus
Dialog for focused tasks, Sheet for mobile-friendly panels, DropdownMenu for overflow actions, Popover for lightweight contextual content.
8. Design rules
- Always use CSS variables for colours — never hardcode hex in product components; swatches above use token classes (
bg-primary, etc.). - Score colours must only come from
score-high,score-mid,score-low(70–100 / 40–69 / 0–39). - All new components must be added to
/designbefore use in product pages. - Dark mode must work for every component — test both themes.
- No inline styles — Tailwind classes and SVG attributes only.
- Typography must use the defined scale — no arbitrary font sizes.
- Spacing must use the Tailwind scale — no arbitrary pixel values.
- Components live in
frontend/src/components/bench/— not colocated with routes. - Forms: compose
Field*+Input/Select/Textarea; useFormActionsfor submit rows. - Lists:
ListRowfor settings-style stacks;Tablefor dense tabular data; see section 7 for examples. - Generic primitives (dialog, sheet, tabs, etc.) live in
frontend/src/components/ui/— add new shadcn components withnpx shadcn add, then document usage on/design.