Typography
Spec
Figtree in 17 named styles, matching the Figma text styles. Sizes / weight / line height in px.
hero40 / 800 / 1 · −0.02em, tabular$1,240Immediate (and later safe to spend), phones
hero-wide48 / 800 / 1 · −0.02em, tabular$1,240The same from 768px
hero-cents22 / 800 / 1.18Cents of the hero figure, phones
hero-cents-wide26 / 800 / 1.18Cents of the hero figure from 768px
figure32 / 800 / 1 · −0.02em, tabular$107Safe to spend on the runway
figure-cents18 / 800 / 1.48Cents of the runway figure
title24 / 700 / 1.2Sign in to AdjustmintTitles of the sign-in and info pages (the register's title is for screen readers only)
heading20 / 700 / 1.2Move moneyDialog titles, default h1 to h3
amount20 / 700 / 1.2 · tabular$2,906.40Present and Once cleared; Immediate in the pinned bar
body16 / 400 / 1.5Until this clears at your bank, your Present balance stays higher.Body text, toasts, help text, the one-time tip
row14 / 600 / 1.5 · tabularJewel-Osco −$64.12Payees and amounts in the register, chips, nav, the account switcher button (both widths), text buttons, field labels and errors, the below-zero lines
row-secondary14 / 400 / 1.5 · tabularToday · GroceriesRegister date and category cells, a phone row's second line, menu items, balance descriptions, the below-zero cause line, the category in payee suggestions
caption12 / 400 / 1.5Not cleared"Not cleared" in the wide table, field hints, menu details, the words of the entry hint, tab labels
keyboard-shortcut12 / 400 / 1EnterThe key inside a key chip (Kbd)
label12 / 700 / 1.2 · 0.08em, uppercaseImmediateIMMEDIATE, PRESENT, column headings, badges, calendar weekdays
button16 / 700 / 1.2Add paycheckButtons, date choices
input16 / 400 / 1.2PayeeText fields (16px keeps iOS from zooming in)
Rules
- Figtree is the only typeface, self-hosted. No serif.
- Components use these styles only, never raw sizes or weights. Nothing smaller than 12px (tests check both).
- Every amount uses tabular figures; real minus (−) and plus signs; deposits in text-accent with a plus.
- Inputs are 16px so iOS never zooms in.
Where it comes from
- Text styles live in Figma as styles, not variables. In code each is
--text-<name>intokens.css, built from the exported font primitives. - Sizes: xs 12, sm 14, md 16, lg 20, xl 24, 2xl 32, hero 40, hero-wide 48. Weights 400, 500, 600, 700, 800.
Changes
- 1.0.0, Oct 6 2026: Figtree only; 17 text styles including keyboard-shortcut; nothing under 12px. (#28)