Typography
Inter for the interface, JetBrains Mono for codes and IDs, and a small, tight scale where hierarchy comes from weight and colour.
Typefaces
font-sans Aa
Invoice INV-2026-0142 · RM 12,720.00
The UI face. Variable with optical sizes; weight 500 by default, letter-spacing −0.033px.
font-mono Aa
1200-001 INV-2026-0142 C25718364020
IDs, account codes, document numbers, keys and code.
font-[Geist] Aa
Statement of account · 31 Oct 2026
An alternative typeface for printed documents, chosen in the document brand.
font-[Newsreader] Aa
Tax invoice · Arus Teknik Sdn Bhd
The serif of the Classic document layout, also selectable for any document.
Type classes
Named classes set size, weight and colour together. Use them for product text; use the Tailwind sizes below when a class doesn't fit.
text-giga 23px · 600 · foreground
RM 84,215.40
The rare giant heading.
text-main 17px · 600 · foreground
Invoices
Page and sheet titles.
text-main-sec 17px · 500 · foreground
October 2026
A quieter title.
text-sub 15px · 600 · muted-foreground
Line items
Section labels and sub-headings.
text-body 13px · 500 · muted-foreground
Payment received from Nusantara Logistik Bhd.
Copy. The base size of the system.
text-body-highlight 13px · 600 · muted-foreground
Balance due on 27 Nov 2026
Emphasis inside body copy.
text-body-secondary 13px · 450 · subtle
Last synced 4 minutes ago
Secondary copy and metadata.
text-form-label 13px · 500 · muted-foreground
Customer name
Form labels.
text-tiny 11px · 450 · inherits
Updated 29 Oct 2026
Meta and captions.
text-tiny-id 11px · 500 · inherits
INV-2026-0142
IDs and codes, in the mono face.
Sizes
Tailwind sizes are remapped to the product scale. Pair them with a colour utility.
text-2xs 11px
Trial balance as at 31 October 2026
text-xs 12px
Trial balance as at 31 October 2026
text-sm 13px
Trial balance as at 31 October 2026
text-md 15px
Trial balance as at 31 October 2026
text-lg 17px
Trial balance as at 31 October 2026
text-xl 20px
Trial balance as at 31 October 2026
Weights
RM 12,720.00
font-normal · 450
Quiet copy. Note: 450, not 400.
RM 12,720.00
font-medium · 500
The default UI weight.
RM 12,720.00
font-semibold · 600
Headings, labels, totals.
Rules
- Sizes are small and tight: 13px is the base. Hierarchy comes from weight and the four text colours, not from big size jumps.
- Titles and buttons are sentence case. Buttons start with a verb: “Create invoice”, “Record payment”, “Save changes”.
- Type classes (
text-body,text-sub…) set their own colour, so pair a colour utility with a Tailwind size (text-sm text-tertiary-foreground), not with a type class. - Use the named sizes (
text-2xs…text-xl) instead of arbitrary values such astext-[13px]. - Money is always
tabular-numsand right-aligned, formatted with the currency's own locale: “RM 1,234.56”. Negatives in statements are bracketed and red; an exact zero is a muted em dash. - Account codes, document numbers and IDs are mono (
1000-001,INV-2026-0142). Dates read “29 Oct 2026”. - No emoji in product UI. Address the user as “you”.