Docs
The specification is the product.
Every component here was specified before it was written, and the accounting was written down before either. These 58 documents are that record — the design foundations, the domain model, and the component specs, in the order they were settled.
- Documents
- 58
- Sections
- 10
- Glossary terms
- 287
- Components specified
- 179
Start here
Philosophy, research, what already exists, and the standards behind the rules.
- ManifestoFinancial software is where design quality has the highest stakes and the lowest average. The reason is structural: fintech UI is usually built by teams optimizing for correctness, and correctness is satisfied by a table. So you get a table. Then a chart library gets bolted on, then a card, then a m
- MoodboardNot a Pinterest board. A set of read-closely references, each with a specific extraction — what we take, and just as importantly what we refuse. A moodboard that only says "I like this" produces pastiche. A moodboard that says "I take this one decision and reject that one" produces a system.
- Prior artYou asked whether something like this already exists. Short answer: finance templates exist; a finance primitive system does not.
- Product teardownsThe moodboard establishes the visual register. This document is the operating layer: how the products in this category actually behave, product by product, with a specific extraction from each.
- Standards and sourcesWhat this system implements is mostly not its own invention. These are the standards the rules come from, what is taken from each, and where a claim here is an opinion rather than a citation.
- RoadmapBuild order is deliberate. Each milestone proves something the next depends on.
Guides
How to do the specific things — formatting money, aligning a column, building a ledger table.
- How to format money in ReactCurrency formatting looks like a solved problem until the first JPY amount, the first negative, and the first value you do not have. This is the whole method, in the order the bugs arrive.
- Negative numbers in a financial tableParentheses instead of a minus sign, the real minus where a sign is right, and the column that stays aligned when the sign changes. Three rules, one of which almost nobody implements.
- How to align numbers in a tableRight-aligned is not aligned. Tabular figures, case-shifted parentheses, decimal alignment, a reserved sign column and rules that carry the arithmetic.
- How to build a general ledger table in ReactThe data grid is the easy part. What makes a ledger table a ledger table is two amount columns, a visible balance check, and an entry you can reverse but never edit.
- Choosing a React component library for finance softwareThere are good dashboard kits, good data grids and good fintech templates. There is very little that knows what a currency is. This is the honest comparison, including where you should not use this one.
Foundations
Grid, shape, colour, elevation, type, numerics.
- Grid & layoutEvery component in Lopifi is designed in four layers, in order. You do not skip ahead. Layer 4 (the actual type) is the last decision, not the first — which is why the system stays coherent when a new component is added by someone who wasn't in the original room.
- Shape & radius24px radius. 24px inset. That pairing is the signature of the system, and everything else derives from it.
- ColorGrayscale first. Color is added only where it carries meaning, and in a financial interface almost nothing does.
- Elevation, borders & shadowsThe single most opinionated decision in Lopifi: At rest, a surface is defined by a hairline. A shadow means the thing is actually floating.
- TypographyTwo families. Three sizes and three weights per component. That constraint is not minimalism for its own sake — it is what forces hierarchy to come from contrast rather than from variety.
- NumericsThe document that makes this a finance system rather than a dashboard kit. Everything here is a rule the rest of the library enforces on the consumer's behalf.
- Icons & microcopyLucide, 1.5px stroke, at 16 / 20 / 24. It's shadcn's default, it's MIT, it's comprehensive, and its optical grid matches Inter's rhythm.
- Imagery, isometric & visual hierarchyLopifi has almost no imagery inside its data surfaces. Where it does — empty states, onboarding, concepts, brand marks — isometric explains a mechanism.
Domain
How accounting actually works. The layer that makes this accounting software.
- The accounting modelEvery component in Lopifi sits on top of one data model. If the model is wrong, no amount of design saves the product. This document is the model.
- Periods & the closeThe month-end close in accounting software: fiscal calendars, period states, cutoff, reconciliation vs tie-out, adjusting entries and restatement.
- Statement semanticsWhat each statement means, how it's structured, and what the components must therefore enforce.
- Schedules, accruals & roll-forwardsThe supporting evidence layer. Every balance sheet account needs a schedule behind it, and the schedule must tie.
- Order to cash (AR)The complete receivables stack: quote → order → fulfilment → invoice → collection → cash application → revenue.
- Procure to pay (AP)The complete payables stack: requisition → PO → receipt → bill → approval → payment → reconciliation. AP is where fraud happens and where controls matter most. The design consequence: Every AP screen is a control surface. Approval, segregation of duties, and duplicate detection are not features bolt
- Cash & treasuryCash is the only balance sheet account with an independent third party asserting what it should be. That makes it both the most verifiable account and the one where a break matters most.
- Controls & auditAccounting software is not a database with forms on top. It is a system of controls, and the UI is where most of those controls are actually enforced.
- Multi-entity & FXConsolidation and currency are where finance UIs quietly produce wrong numbers, because both involve summing things that look summable and aren't.
- Metric definitionsEvery metric in this system ships with its formula, its period, its inputs, and its source. A KPI without a definition is a number people argue about in meetings.
- LexiconOne word per concept, used identically in code, UI copy, and documentation. Terminology drift is the fastest way to make a financial product feel amateur to the people who use it professionally.
- Lopifi APIs: Xero, QuickBooks Online, NetSuiteThree general ledgers, three different opinions about what an invoice is. This document compares them object by object, so a component built on one does not quietly break on another.
- US GAAP, and where these rules come fromThis system states a lot of accounting rules. Revenue is earned on delivery. Depreciation allocates cost rather than measuring value. A statement of cash flows has three sections and reconciles to the change in cash. A posted entry is reversed, never edited.
Catalog
All 179 components, specified before they are written.
- Component catalog179 components across 13 families. The complete accounting and finance stack. Families 1–8 are the design layer — primitives, surfaces, tables, charts. Families 9–13 are the domain layer — the general ledger, receivables, payables, the close, controls, consolidation, and metrics. The domain layer is
- PrimitivesBuild these first. Everything above them inherits their mistakes. Specs for 15 React components: Money, Delta, Figure, Percent and 11 more.
- CardsAll cards: 24px radius, 24px inset, --surface on --canvas, 1px --border, no resting shadow. Specs for 10 React components: BalanceCard, KpiCard, AccountCard, PaymentMethodCard and 6 more.
- PaymentsPayments — specs for 14 React components: AmountInput, CurrencySelect, PayeeSelect, PaymentForm and 10 more.
- Swaps & FXThe governing rule for this entire family: A rate is a perishable fact. It never appears without a timestamp, and it is never transacted on without a lock. Specs for 9 React components: SwapWidget, RateLine, RateLock, ConversionBreakdown and 5 more.
- Ledger & tablesThe table is the product. It gets the same design investment as the hero card. Specs for 15 React components: TransactionTable, TransactionRow, TransactionCard, TransactionDetail and 11 more.
- StatementsThe largest gap in the market. No component library ships a <BalanceSheet />. This family is the reason Lopifi exists. Specs for 12 React components: StatementTable, StatementRow, ProfitAndLoss, BalanceSheet and 8 more.
- Dashboard & chartsWe wrap a charting engine (Recharts, or visx where more control is needed). We do not rebuild one. What we add is everything a chart library doesn't know about money. Specs for 11 React components: DashboardShell, KpiRow, MoneyChart, MoneyBarChart and 7 more.
- System & statesThe states that decide whether a product feels finished. Specs for 9 React components: EmptyState, ErrorState, Skeleton, StaleIndicator and 5 more.
- Accounting core (GL)The general ledger layer. Specs for 18 React components: JournalEntry, JournalEntryForm, JournalEntryTable, AccountPicker and 14 more.
- Receivables (AR)Receivables (AR) — specs for 13 React components: InvoiceForm, InvoiceDetail, InvoiceRegister, CashApplication and 9 more.
- Payables (AP)Payables (AP) — specs for 16 React components: BillForm, BillDetail, BillRegister, DuplicateBillAlert and 12 more.
- Close, controls & consolidationClose, controls & consolidation — specs for 24 React components: PeriodStatus, CutoffWarning, CloseStatus, AuditTrail and 20 more.
- Metrics & analysisMetrics & analysis — specs for 12 React components: MetricDefinition, NonGaapReconciliation, MrrBridge, BudgetVsActual and 8 more.
Motion
The decision framework, the tokens, the per-component specs.
- Motion principlesLopifi's motion doctrine is Emil Kowalski's animation framework, plus the performance rules from ui-skills, plus two laws specific to money.
- Motion tokensEvery animation in Lopifi uses a token. Ad-hoc durations and inline cubic-béziers are a review failure — see quality bar.
- Motion catalogEvery animation in Lopifi, specified. Each entry states its frequency tier (which is what licenses it), its purpose (one of the five), and its exact values.
Craft
Anatomy, accessibility, responsive behaviour, the ship gate.
- Component anatomyEvery Lopifi component ships with this spec, filled in, in the order below. The order is the point: you cannot choose a font size on line 1, because layer 4 doesn't exist yet.
- AccessibilityPriority ladder from ui-skills/fixing-accessibility, with the finance-specific rules that generic guidance doesn't cover.
- Quality barThe ship gate for a Lopifi component: baseline UI, motion, accessibility, accounting correctness, edge cases and field performance, every box checked.
- Responsive & inputThe details matter most here. A financial interface has more content than any other product category — twelve columns, four periods, nested hierarchy — and it has to be fully usable on a phone held one-handed on a train and on a 13" laptop with a trackpad.
Architecture
Registry, distribution, repo conventions.
- Registry & distributionLopifi distributes through the shadcn registry protocol. Components are copied into the consumer's repo; they own the code from that moment.
- Repo & conventionsTokens are named by role, never by value. --text-secondary, not --gray-600; --positive, not --green. A value-named token can't be re-themed and can't be renamed without a breaking change.
- Cross-references & the shape of the siteThe documentation is not a set of pages. It is one hypertext with six views over it — the docs, the glossary, the component catalog, the toolbelt, the API object model and the live showcase — and every one of those views is generated from the same files in docs/ and src/.
Brand
The mark, the wordmark, colour, voice and motion.
Tools
The toolbelt spec — 22 calculators, one definition, two surfaces.
Common questions
What is in the Lopifi documentation?
58 documents in reading order: the philosophy and the research behind the system, the design foundations, the domain model of how accounting actually works, and the four-layer specification for every one of the 179 components.
Are the components specified before they are written?
Yes, and that is the point of this section. Each component has a spec covering its data contract, its states, its behaviour and its accessibility, written in the family document — the implementation follows it, and the page for the component quotes it verbatim.
Can an agent read these docs without parsing the HTML?
Every documentation page has a Markdown twin at /md/docs/{slug}, and llms.txt indexes the whole corpus. Both are served with an open CORS header, so an in-page agent can fetch them directly.
Where do the accounting rules come from?
The domain section traces each rule to its source — the FASB Codification where one governs, and an explicit note where the rule is convention rather than requirement. US GAAP sources are listed with the standard behind every claim.