Business UI that adds up.

The Figma and React design system for admin, finance, insurance and SaaS products. Every number, state and token matches from design to code, and your AI agent follows the same rules.

Figma + React
Light and dark
Contrast checked
Claude-ready

One payment from $99 · all 1.x updates · 14-day refund

A woman and a man at a table quietly review a business screen on a laptop, with a view of Zurich behind them.

Supplier invoices

3 waiting for approval

To approve: CHF 16'265
Due this week: CHF 42'100
Paid in March: CHF 249k +12%

Select INV-3108
S
Seefeld StudioINV-3108 · Due FriTo approveCHF 4'250.00
Select INV-3107
N
Nordlicht GmbHINV-3107 · Overdue 3 daysOverdueCHF 9'900.00
Select INV-3105
A
Atelier RheinINV-3105 · Due 2 AprTo approveCHF 2'115.50
Select INV-3101
B
Brigit Bau AGINV-3101 · Paid 28 MarPaidCHF 12'480.00

Made for the screens people work in all day

Invoices
Ledgers
Payouts
Approvals
Date ranges
Receipts upload
Dashboards
Customers
Notifications
Settings
Inbox and chat
Reports
Invoices
Ledgers
Payouts
Approvals
Date ranges
Receipts upload
Dashboards
Customers
Notifications
Settings
Inbox and chat
Reports

What is inside

Small pieces. Real numbers.

Counted in the repository. Every one of them exists in Figma and in code.

1,640Component variants95 component sets in Figma, 62 documented React components

1,252Design tokensOne JSON source for CSS and Figma

282Icons ready to useHand-picked open-source Tabler icons, searchable in the docs

9Full screensBuilt only from the system

6Colour modesThree brand themes, each in light and dark

4.5:1Minimum text contrastComputed in both themes

Three roles, one set of pieces.

The business lead checks the numbers, the designer draws the screen, the developer ships it. Tessera gives all three the same names, the same states and the same tokens.

Business leads
Tables that line up, numbers that add up, approvals that say who and when.
Product designers
Every state already drawn, named the same as the code, in light and dark.
Front-end developers
Tokens instead of raw values, props that match Figma, and rules your AI agent follows.

Built for screens full of numbers

Every part of a business tool, already designed.

These are live Tessera components. Click them.

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Good morning, Lara

Current balanceCHF 86’120.40

TransferAddPay billsExport

Payment sentCHF 12’480.00 to Brigit Bau AG

Reference: INV-2041
Date: 28 Mar · 10:42
Status: Paid

Lea FischerAccounts payable · Alpwerk AGlea.fischer@alpwerk.ch

ApproverCHF 25k limit

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Good morning, Lara

Current balanceCHF 86’120.40

TransferAddPay billsExport

Payment sentCHF 12’480.00 to Brigit Bau AG

Reference: INV-2041
Date: 28 Mar · 10:42
Status: Paid

Lea FischerAccounts payable · Alpwerk AGlea.fischer@alpwerk.ch

ApproverCHF 25k limit

Recent transactions

S
Seefeld Studio15 Mar+ CHF 4’250.00
N
Nordlicht GmbH14 Mar− CHF 980.00
A
Atelier Rhein12 Mar− CHF 2’115.50

Receipts_March.zip48 files · 12.4 MB

Paid on time94%+6% compared to February

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Recent transactions

S
Seefeld Studio15 Mar+ CHF 4’250.00
N
Nordlicht GmbH14 Mar− CHF 980.00
A
Atelier Rhein12 Mar− CHF 2’115.50

Receipts_March.zip48 files · 12.4 MB

Paid on time94%+6% compared to February

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Ledger rows that stay calm

Tabular numbers, one status colour, a person at the start of the row.

B
Brigit Bau AGINV-2041 · 28 MarPaidCHF 12'480.00
S
Seefeld StudioINV-2040 · 27 MarDue soonCHF 4'250.00
N
Nordlicht GmbHINV-2038 · 21 MarOverdueCHF 9'900.00
A
Atelier RheinINV-2037 · 19 MarSentCHF 2'115.50

Charts that fit a panel

The axis measures its own labels.

Revenue
Expenses

Revenue and expenses, CHF k
	Revenue	Expenses
Oct	182	140
Nov	196	151
Dec	240	188
Jan	205	160
Feb	221	158
Mar	249	171

Forms that catch mistakes

Errors say what is wrong and how to fix it.

A Swiss IBAN has 21 characters. This one has 20.

Within the approval limit

Upload with honest progress

States for loading, success and failure.

Matched to 48 transactions

Settings people understand

Labels first, the control second.

Email me about new invoicesNotify the team on payoutsWeekly cash digest

People and conversations

Presence, groups and chat for approvals.

Luca Schneider

Approved INV-2040. Can you pay it before Friday?

09:41

One system, two tools

Same words in Figma and in code.

A designer picks variant=brand in Figma. A developer writes variant="brand". Nobody translates. Change the properties and watch both sides.

Figma · Button properties

App.tsx

import { Button } from 'tessera-ds'

<Button variant="brand" size="md">
  Pay invoice
</Button>

Parts to page

Four parts make a page.

These are real Tessera components. Type your company name and pick a colour, and every part follows.

Colour

Four parts

Alpwerk
Logo
Nav item
Button
Next step
Approve the March invoices before Friday.
Card

Good morning

108765432106543210321005432100Billed this month

3 invoices

4321021010000Open invoices

2 overdue

Next step

Approve the March invoices before Friday.

Snapshots

Start from a whole screen.

Nine product screens built only from Tessera. Start a new feature from one of them instead of a blank page.

Good morning, Lara

Here is how Alpwerk AG is doing. Figures to 31 March 2027.

210432109876543210Revenue in March

CHF 249'300, up 2.0%

4321010Outstanding

CHF 41'250 in 12 invoices

76543210Overdue invoices

CHF 26'840 in total

10876543210Days to get paid

3 days faster than 2026

Revenue and expenses

Revenue
Expenses

Revenue and expenses, April 2026 to March 2027, CHF thousands
	Revenue	Expenses
Apr	CHF 182k	CHF 141k
May	CHF 176k	CHF 138k
Jun	CHF 195k	CHF 149k
Jul	CHF 201k	CHF 152k
Aug	CHF 188k	CHF 147k
Sep	CHF 214k	CHF 158k
Oct	CHF 226k	CHF 163k
Nov	CHF 219k	CHF 160k
Dec	CHF 238k	CHF 171k
Jan	CHF 231k	CHF 169k
Feb	CHF 244k	CHF 174k
Mar	CHF 249k	CHF 176k

Spend in March

PayrollCHF 98k59%
SoftwareCHF 31k19%
OfficeCHF 22k13%
TravelCHF 14k8%

Spend by category in March 2027, CHF thousands
Payroll	CHF 98k	59%
Software	CHF 31k	19%
Office	CHF 22k	13%
Travel	CHF 14k	8%

Recent invoices

View all

Customer	Due	Amount	Status
B Bergwerk ArchitektenINV-2048	27 Apr 2027	CHF 12’400.00	Sent
S Studio LumenINV-2047	25 Apr 2027	CHF 3’850.00	Paid
Needs attention: K Krone HotelsINV-2046	23 Mar 2027	CHF 18’900.00	Overdue
F Feldmann & Co.INV-2045	2 Apr 2027	CHF 6’275.50	Due soon
N Nordhang Ski SchoolINV-2044	14 Apr 2027	CHF 2’140.00	Paid
L Lakeside DentalINV-2043	—	CHF 9’600.00	Draft

Team activity

Jonas Keller approved invoice INV-2048 for Bergwerk ArchitektenToday, 10:20
Mia Brunner uploaded 14 receipts from the Davos workshopToday, 09:05
Nico Weber sent a payment reminder to Krone HotelsYesterday, 16:40
Sara Graf closed the February booksMon, 11:15

The month at a glance for a finance lead: key figures, revenue against expenses, spend by category, the latest invoices and what the team did.

Built with 12 components: side-navigation, logo, nav-item, avatar, segmented-control, button …

The whole kit

One file. Every screen you will need.

Molecules, components and full screens in Figma, with the same names and tokens in React.

Good morning, Lara

Current balanceCHF 86’120.40

TransferAddPay billsExport

Recent transactions

S
Seefeld Studio15 Mar+ CHF 4’250.00
N
Nordlicht GmbH14 Mar− CHF 980.00
A
Atelier Rhein12 Mar− CHF 2’115.50

Paid on time94%+6% compared to February

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Payment sentCHF 12’480.00 to Brigit Bau AG

Reference: INV-2041
Date: 28 Mar · 10:42
Status: Paid

Receipts_March.zip48 files · 12.4 MB

Lea FischerAccounts payable · Alpwerk AGlea.fischer@alpwerk.ch

ApproverCHF 25k limit

Paid on time94%+6% compared to February

Good morning, Lara

Current balanceCHF 86’120.40

TransferAddPay billsExport

Receipts_March.zip48 files · 12.4 MB

NotificationsMark all as read

Luca Schneider approved INV-204009:41
Jana Vogt uploaded 12 receipts09:12
Marco Steiner paid CHF 4’250.0008:30

Recent transactions

S
Seefeld Studio15 Mar+ CHF 4’250.00
N
Nordlicht GmbH14 Mar− CHF 980.00
A
Atelier Rhein12 Mar− CHF 2’115.50

Claude pack

Your AI agent builds with your components.

The pack gives Claude the rules, the component skill and a spec of every prop. It picks the right component, uses tokens instead of raw values, and a lint proves it.

CLAUDE.md with the token rules
A skill for adding and reviewing components
code-spec.json: every component and prop
tokens:lint fails on raw colours and sizes

Build an approval screen for supplier invoices over CHF 5,000. Use Tessera.

10:02

Claude

Done. Table with a person cell, Badge for status, DateRangePicker filter, a Dialog to approve or reject. No raw values: everything uses tokens.

10:02

Terminal

npm run tokens:lint
✓ 66 CSS files follow the token rules.

Make it yours

A starting point you can make your own.

Rename it, swap the primitive colours and fonts, and every semantic token, component and screen follows. Ship it as your company’s own design system.

Rename everything

Rename components, tokens and the package to match your product

Rebrand in one place

Change the brand colours once: the semantic layer carries it everywhere

Ship it as your own

Build unlimited products and client work. Only reselling Tessera itself as a kit is off limits.

Why pay

Free parts plus an AI agent, or one checked system?

Free kits and agents are great for parts. A product needs the parts to agree.

Figma and code match: Free kit + AI agent:Drifts after the first sprint; Tessera:Checked on every change: names, props, tokens
Business screens: Free kit + AI agent:Generic cards and landing blocks; Tessera:Tables, forms, amounts, statuses, date ranges, upload
Accessibility: Free kit + AI agent:Hope; Tessera:Contrast computed in both themes, keyboard on every control
Your AI agent: Free kit + AI agent:Invents colours and spacing; Tessera:Follows the Claude pack; a lint catches raw values
Dark mode: Free kit + AI agent:A second project; Tessera:Built in, one token switch

Pricing

Pay once. Use it on every project.

No subscription. Founding prices until version 1.1.

Free

For anyone

The Figma file with the foundations and 14 base components. Use it in real projects.

Pro

Most chosen

1 person

$99~~$149~~

The full system for one designer or developer.

Team

Up to 10 people

$299~~$449~~

One shared system for a product team or a studio.

The story

Why I built Tessera

Every screen you use is built from small parts, snapped together like LEGO.

I have said this for years, long before AI could draw a screen. A navigation bar is a logo, a few items and a button. A card is text and an icon button. Stack the parts and you have a page.

AI works the same way. Type a prompt and a whole board appears in seconds, because the parts already exist. Tessera is those parts, ready for your product. Buy it, rename it, set your colours, and every new screen starts half built.

Mustafa Al Awad, Zurich

Questions

Before you ask

Licence, updates, stack and refunds in plain words.

Can I rename it and make it our own design system?

Yes. Pro and Team are a starting point: rename the package, components and tokens, replace the primitive colours and fonts, and the semantic layer, the components and the Snapshots follow. Use it for any product and any client project. You may not resell Tessera itself, or anything mainly made of it, as a UI kit, template or theme.

What is Tessera, in one line?

A design system for admin, finance, insurance and SaaS products: a Figma file and a React package that use the same tokens, names and props.

Why pay when shadcn/ui and AI agents are free?

They give you parts. Tessera gives you a checked system: Figma, code, tokens and docs are compared on every change, and the Claude pack makes your agent follow the same rules instead of inventing values.

Which stack does it need?

React 19 and plain CSS custom properties. No Tailwind required. Figma for the design file.

Can I use it for client projects?

Yes. Pro and Team cover unlimited projects, including client work. You may not resell Tessera itself as a kit or template.

Do I get updates?

Every 1.x update is included. Version 2.0 will be a discounted upgrade for existing buyers.

What if it is not right for me?

Write to us within 14 days and you get your money back. No questions.

Three colleagues review a shared workflow around a laptop and papers.

Your next screen, already connected.

Start with the free kit. Upgrade when it earns it.

Business UI that adds up.

Business leads

Product designers

Front-end developers

Next step

Good morning

Next step

One file. Every screen you will need.

Your AI agent builds with your components.

Rename everything

Rebrand in one place

Ship it as your own

Why I built Tessera

Your next screen, already connected.