Currency

Principles

• European format is the default.Period for thousands, comma for decimals — “1.234,56”. Seven of our eight markets read this convention natively. The US locale flips at render time.
• Three families, three roles. Inter Tight with tabular figures sets currency in product UI by default. Founders Grotesk X Condensed is reserved for the hero metric — the single largest number on a page. Martian Mono is for printed surfaces only — receipts, exported reports, PDF statements.
• Tabular numerals everywhere. Money columns must align; tabular figures + slashed zero are wired into every currency token, regardless of family. Numbers update without column shimmer.
• Negatives are orange, not red. Outgoing money is normal product motion — payouts, fees, payments. Red is reserved for errors and destructive states. Orange reads as outgoing without sounding alarms.
• Symbol position is contextual. Currency symbol leads on hero displays, follows in tables. Either way, always with a space.

Anatomy of a number

Every part of the formatted string is named so we can talk about it.

Type

Three families, three jobs. The font choice does as much hierarchical work as the size — pick the family that fits the surface, then size inside it.

Format

• Always two decimals.“10,00”, not “10”. Skipping the decimals on round numbers asks the reader to re-parse the line every time.
• No abbreviation.Don't write “1,2k” or “1M” for money. The exact number — “1.245”, “1.000.000” — is the truth the user came for.
• Use the slashed zero. The Inter Tight and Martian Mono variable fonts ship with slashed-zero available; every metric and tabular cell turns it on.
• Right-align in tables. The decimal stacks. The eye reads the magnitude first, then the cents.

Symbol position

Two contexts, two positions. The symbol is part of the visual, not part of the number — that's why it gets its own space.

Sign and color

Three states. The minus sign sits before the number; never after, never as parentheses.

The minus sign sits between the symbol and the number on prefixed values (“€ -200,00”), and before the number on suffixed values (“-200,00 €”). Never use parentheses. They're an accountancy convention that doesn't belong in product UI.

In the product

Four real surfaces. The first three sit in the live product (hero + inline + table — Founders, Inter Tight, Inter Tight). The fourth is a printed receipt — the one place Martian Mono carries the number.

Currencies and locales

Four currencies across eight markets. The rendering layer translates between them at request time.

Voided and pending

In code

Format through Intl.NumberFormat with an explicit locale and the currency option. Never hand-roll the separator logic.

// ✓ Locale + currency, two decimals always, sign locked
const fmt = new Intl.NumberFormat("da-DK", {
  style: "currency",
  currency: "DKK",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  signDisplay: "auto",
});
fmt.format(1234.56);   // "1.234,56 kr"
fmt.format(-200);      // "-200,00 kr"

// ✓ For hero metrics, format with the symbol, then trust CSS for the gap
const heroFmt = new Intl.NumberFormat("nl-NL", {
  style: "currency",
  currency: "EUR",
  currencyDisplay: "narrowSymbol",
});
heroFmt.format(10095);  // "€ 10.095,00"

// ✗ Don't hand-roll
return `€ ${value.toFixed(2).replace(".", ",")}`;

Related