Getting Started

Typography

Polymath

--font-sans

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger. Formance Ledger is a programmable financial database. Model any financial flow with Numscript and never worry about consistency again.

Berkeley Mono

--font-mono

Used in interactive elements — always uppercase, always mono.

Active
Valid
Failed
Pending
Info
Draft
Getting startedNew feature

Figtree

--font-sans fallback

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger

Stop Fighting Your Ledger. Formance Ledger is a programmable financial database. Model any financial flow with Numscript and never worry about consistency again.

Space Mono

--font-mono fallback

Fallback monospace font when Berkeley Mono is unavailable. Same uppercase treatment applies.

Optical Sizing#

Polymath is a variable font with an opsz (optical size) axis. The design system applies optical sizing automatically — headings use opsz 72 for sharper display rendering, while body text uses opsz 6 for better readability at smaller sizes.

These are applied globally via CSS and also available as Tailwind utilities:

  • font-display — font-variation-settings: 'opsz' 72 for headings and large text
  • font-text — font-variation-settings: 'opsz' 6 for body text and labels
body {
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-variation-settings: 'opsz' 72;
}

Usage#

font-mono (Berkeley Mono, falling back to Space Mono) is for two things: short uppercase micro-labels on buttons, badges, tabs and eyebrows, and machine data read rather than composed — amounts, counts, IDs, hashes, account addresses, versions, dates and code. Everything a person reads or types as language uses font-sans (Polymath, falling back to Figtree): body text, headings, form and navigation labels, menu and select items, and text inputs. When in doubt, ask whether the text is data or language.

See the Typography component for ready-made heading, paragraph, and text components.