Skip to content
Specimen controls
Theme
Value colours
Row density
Family 8 · 9 components

System & states for every edge case.

Empty, loading, stale and broken are the states a finance product spends most of its life in. Each one says what it means for the money in one line, and keeps the particulars behind the ⓘ.

EmptyState

Three genuinely different components sharing one shell: first-run offers the setup path, filtered offers to clear the filter that hid everything, an empty period names the period. One line each — the particulars live behind the ⓘ.

No accounts connected

Connect a bank and 24 months of history import automatically.

No transactions match these filters

240 transactions exist in this period.

Nothing posted in September 2026

The period is open and nothing has posted to it yet.

ErrorState

One line stays on screen and it is the reassurance: an error in a financial product makes people worry something happened to their money. The technical account of the failure is real but secondary, so it sits behind the ⓘ.

Skeleton

A slow breathe over 1600ms, never a shimmer sweeping across the screen. The skeleton has the shape of what is loading, so nothing moves when the content arrives.

TableSkeleton

StatementSkeleton

Skeleton primitive

StaleIndicator

A stale figure that looks fresh is the most dangerous state in the product. The indicator states when the data was last true, in a named timezone, and offers the retry.

Hours old

Days old

Fresh

Button · Toaster

Press is 100ms and scales to 0.97, never to zero. A toast reports what happened to a thing that has already happened; it is never the only place a consequential outcome is recorded.

Variants and sizes

Toasts

IsometricSpot

The illustration library. Flat isometric objects built from tokens, so they re-theme with everything else and never carry a colour the system does not own.

ledger

vault

flow

MetricDefinition

No metric ships without one. The formula appears with the actual values substituted, alongside its cohort, period and source — and a value computed under an older definition version says so.

Net revenue retention

114.2%

(Opening MRR + expansion − contraction − churn) ÷ Opening MRR

($41,200.00 + $4,820.00 − $960.00 − $880.00) ÷ $41,200.00

Cohort
Customers active on 1 September 2025, excluding those acquired via the Fabrikam acquisition
Period
Twelve months ended 30 September 2026
Source
Billing system, recognised MRR — not booked ARR
Definition
v3, effective 1 Jan 2026

Gross margin

63.5%

(Revenue − cost of revenue) ÷ Revenue

($596,600.00 − $217,900.00) ÷ $596,600.00

Cohort
Consolidated, all entities
Period
Month ended 30 September 2026
Source
General ledger, accrual basis, posted entries only
Definition
v1, effective 1 Jul 2024

Computed under an earlier definition

The 9 components on this page

Each has a page with its four-layer spec, its dependencies, the whole source file and the one-line install. The family spec they were all built against is System & states.

Works in your QuickBooks Online or Xero file

Get your books closed every month

Lopifi is building AI bookkeeping that keeps your books closed on US GAAP as transactions happen, with a CPA review every quarter, for $200 a month. We’re not open yet.

$200/month when we open. No card now.