Go Back

Finvisor

A finance product and agentic design system built for teams that move fast.

  • Product Design
  • Design System
  • FinTech
The Design Project × FinvisorCase study · 2026

A finance product agents can build on.

We redesigned Finvisor's platform and built the design system AI agents use to extend it.

ScopeProduct design · Design system · Agentic design
IndustryFintech · Fractional finance
TimelineJul — Aug 2026
Redesigned Finvisor compliance dashboard: nexus map, deadlines and state registrations.
01Context

A services firm becoming a product.

A fractional finance team for founders, turning every service line into product. Engineers were shipping screens with AI agents faster than anyone could review.

Three surfaces

One foundation

Client platform, internal OS, marketing site.

Nine service lines

Deep domain UI

Each with its own objects, states and conventions.

A new brand

No source of truth

The rebrand had shipped. The product hadn't caught up.

02The Brain

A design system an agent can query.

We turned the design system into structured instructions AI agents can use. Given a product request, the agent finds and ranks the right components, builds the interface, then checks it against Finvisor’s brand, accessibility and finance rules.

The workflow
  1. 01Brief the request
  2. 02Find the patterns
  3. 03Build the screen
  4. 04Check the rules
tomas@finvisor-ui — claude
❯
●Skill(finvisor-agentic-ds)
⎿ Loaded · Mode B — compose a page
●Read 2 files docs/agentic/composition.md · finance.md
●searchByKeywords("P&L revenue expense close")
PlStatement28.0
AccrualSchedule17.5
CloseChecklist17.0
MetricCard13.0
●getMetadata("PlStatement")
⎿ requiredProps: ["lines"] · maxPerScreen: 1 · composeWith: CurrencyText, MetricGrid
gold ≤ 1 per screenmoney → CurrencyTextinvert expense linestabular figures
●Write src/stories/sandbox/pl-view.stories.tsx
⎿ 84 lines · MetricGrid + PlStatement · 1 gold accent
●Validate Mode C · brand · a11y · composition · finance
  • One gold accent on screen
  • Negatives in accounting parentheses
  • Tabular figures
  • MetricCards wrapped in MetricGrid
⏵⏵ auto mode onesc to interrupt
Reporting · P&L Analysis
FinvisorPreparing workspace…
The P&L Analysis screen, assembled.
↓

Agent in a consuming app

Reads one entry point: AGENTS.md

L4

Rules, loaded by mode

Brand, composition, finance, schema.

5docs
L3

Metadata + query API

A sibling .metadata.ts per component, behind a query API.

147files
L2

Components

Primitives, finance, service lines, OS, landing.

792stories
L1

Tokens

Primitives → semantic → themes. Synced with Figma.

3layers
Mode A

Generate metadata

Write a component's rules file.

Mode B

Compose a page

Rank components, apply limits, output JSX.

Mode C

Validate a diff

Review changes against the rules.

Brand rules,
written as data.

A person reads “sparing accent”. An agent needs a number.

metric-card.metadata.tsexcerpt
export const metricCardMetadata = {
  component: { name: "MetricCard" },
  financeDomain: { signConvention: "accounting-parens", requiresTabularFigures: true },
  brandConstraints: {
    maxPerScreen: { gold: 1 },    antiPatterns: [{
      scenario: "A gold MetricCard next to a gold Button.",
      reason: "One gold element per screen, not one per component.",
      alternative: "Keep gold on the single highest-priority focus.",
    }],
  },
  aiHints: { keywords: ["kpi", "metric", "dashboard", "arr", "burn"], priority: "high" },
}
03Before and after

Same product. Now it sounds like Finvisor.

Before: original P&L analysis. After: redesigned P&L analysis.
AfterBefore
Identity

Orange out, navy and one gold in

Hierarchy

Four KPIs before the ledger

Numbers

Parentheses and tabular figures, no red noise

04The redesigned product

Every service line, one way of working.

04.1

Payables

Cash going out, in the order it matters.

04.2

Virtual mailbox

Physical mail, scanned and routed.

04.3

Receivables

One set of invoices: table, groups or board.

Payable · Cash flow
Payables cash flow screen.Virtual mailbox screen.Receivables overview screen.
05Foundations

Monochrome first. One gold.

Status scales · product UI only, never brand
Default UI · Satoshi
Aa

Drag the letters, or type your own.

Figures · JetBrains Mono
Inflows182,410.00
Outflows214,111.75
Net31,701.75
Radius
681216
Elevation
Motion · 120 / 180 ms
06Components

Built for finance, not adapted to it.

Components that already know how an accountant reads a number.

Live · rebuilt in HTML
Revenue$0 ↗ 4.8% period average
Gross profit$0 65.0% margin
Operating expenses$0 ↗ 2.4% above prior period
Operating income$0 21.2% margin
<MetricGrid /> · <MetricCard /> · <CurrencyText />

The number system

Every money value passes through one component.

Live · rebuilt in HTML
▤Match bill · #INV-5540211028 · Google Cloud · $194,320.5597%Applied
◇Categorize · 6200 Software & Cloud94%Applied
◎Set vendor · Google Cloud88%BUNDLEDApplied
≡Memo · May 2026 cloud infrastructure72%Applied
△Set vendor · Google CloudNo matching vendor — create “Google Cloud” first.88%BUNDLEDApplied
<ProposalCard />

AI that shows its work

Confidence score, one-tap accept or reject.

Live · rebuilt in HTML
MEVTNHWAIDMTNDMNWIMINYMAORNVWYSDIAILINOHPANJCTCAUTCONEMOKYWVVAMDDERIAZNMKSARTNNCSCDCOKLAMSALGAAKHITXFL
Action required 0Review needed 0Compliant 0
<UsStateMap />

Nexus as a tile grid

Live · rebuilt in HTML
⚇ Clients▤ Invoices⚙ Configure
New4$722.50 · 7 invoices
0969 Ocean View Road$477.503 invoices⚠ 203 days overdue
Bill's Windsurf Shop$85.002 invoices⚠ 203 days overdue
55 Twin Lane$85.001 invoice⚠ 110 days overdue
Harbor Café$75.001 invoice⚠ 45 days overdue
Drop a client here
Assigned$0.00 · 0 invoices
Drop a client here
In Communication$0.00 · 0 invoices
Drop a client here
Awaiting Response$0.00 · 0 invoices
Drop a client here
Payment Promised$0.00 · 0 invoices
Drop a client here
<ARKanbanBoard />

Collections as a board

Drag a client forward and the column totals follow.

07Results

Eight weeks. A product, a system, and the rules to extend both.

0

Storybook entries in eight weeks: foundations, components and full product screens, every one with light and dark themes.

0

components with agent-readable rules

0

full-page screens

0

releases, 1.0.0 to 2.7.1

Building a product with AI in the loop?

We design the product, the system and the rules your agents work from.

Start a project ↗
Finvisor × The Design ProjectProduct & agentic design system · 2026

See more

TDP Rebrand
TDP Rebrand
Design ServicesEnd-To-End
TDP Rebrand
xCures
xCures
AI / B2B / HealthTechProduct Design / Early Stage
xCures
Scalestack
Scalestack
AI / B2B / Enterprise SolutionsProduct Design / Enterprise
Scalestack
Itair Website
Itair Website
AI / B2C / LifestyleBranding Design / Marketing / Early Stage
Itair Website
Itair Product
Itair Product
AI / B2C / LifestyleProduct Design / Early Stage
Itair Product
Fairing Solutions
Fairing Solutions
B2B / Public SectorProduct Design / Early Stage
Fairing Solutions
Banyan Infra.
Banyan Infra.
B2B / SustainabilityProduct Design / Late Stage
Banyan Infra.
Monte Carlo
Monte Carlo
B2B / Enterprise SolutionsProduct Design / Late Stage
Monte Carlo
David Energy
David Energy
B2C / Public Sector / SustainabilityProduct Design / Early Stage
David Energy
David Energy
David Energy
B2C / Public Sector / SustainabilityProduct Design / Early Stage
David Energy
Metera
Metera
Web 3.0Product Design / Early Stage
Metera
Volt Design System
Volt Design System
B2C / Public Sector / SustainabilityDesign System / Early Stage
Volt Design System
Cheez
Cheez
AI / B2C / LifestyleProduct Design / Early Stage
Cheez
WellBe
WellBe
AI / B2C / HealthTechProduct Design / Early Stage
WellBe
Eleanor Health
Eleanor Health
AI / B2C / HealthTechProduct Design / Early Stage
Eleanor Health
Mesh Marketing
B2B / Enterprise Solutions / Public SectorMarketing / Early Stage
Mesh Marketing
Mesh ID
Mesh ID
B2B / Enterprise Solutions / Public SectorProduct Design / Early Stage
Mesh ID
Atropos
Atropos
AI / B2B / HealthTechProduct Design / Early Stage
Atropos
Full Harvest DS
Full Harvest DS
AgriTech / B2B / SustainabilityDesign System / Late Stage
Full Harvest DS
Full Harvest MKT
Full Harvest MKT
AgriTech / B2B / SustainabilityMarketing / Late Stage
Full Harvest MKT
Vouch
Vouch
B2C / LifestyleProduct Design / Early Stage
Vouch
SpotLyfe
SpotLyfe
B2C / HealthTechProduct Design / Early Stage
SpotLyfe
Navengage
Navengage
B2C / EdTechDesign System / Early Stage
Navengage
Volley Automation
B2C / MobilityProduct Design / Early Stage
Volley Automation
GolfForever
GolfForever
B2C / Lifestyle / RetailProduct Design / Early Stage
GolfForever
The Well
The Well
B2C / Lifestyle / RetailProduct Design / Early Stage
The Well
Avataar
B2C / RetailProduct Design / Late Stage
Avataar
OXIO
OXIO
B2CProduct Design / Early Stage
OXIO
Big Health
B2C / HealthTech / LifestyleProduct Design / Late Stage
Big Health
OSlash
OSlash
AI / B2CProduct Design / Late Stage
OSlash
Woven
Woven
AI / B2B / LifestyleProduct Design / Early Stage
Woven
NextGem
NextGem
B2C / LifestyleProduct Design / Early Stage
NextGem
Altoida
Altoida
AI / B2C / HealthTechProduct Design / Early Stage
Altoida
JupiterOne
B2B / Enterprise SolutionsProduct Design / Early Stage
JupiterOne
Sojourn
Sojourn
AI / B2CProduct Design / Early Stage
Sojourn
SOUQ
SOUQ
AI / B2CProduct Design / Late Stage
SOUQ
Socure
Socure
AI / B2B / Public SectorProduct Design / Late Stage
Socure
Streamzy
Streamzy
B2C / LifestyleProduct Design / Early Stage
Streamzy
Anno.ai
Anno.ai
B2B / Public SectorProduct Design / Early Stage
Anno.ai
Purespectrum
B2B / Enterprise SolutionsProduct Design / Enterprise
Purespectrum
Conserv
Conserv
B2B / Public SectorProduct Design / Early Stage
Conserv
Brev
Brev
AI / B2BProduct Design / Early Stage
Brev