# Typography

Inter for the interface, JetBrains Mono for codes and IDs, and a small, tight type scale where hierarchy comes from weight and colour.

## Typefaces

- **Inter** (`font-sans`): The UI face. Variable with optical sizes; weight 500 by default, letter-spacing −0.033px.
- **JetBrains Mono** (`font-mono`): IDs, account codes, document numbers, keys and code.
- **Geist** (`font-[Geist]`): An alternative typeface for printed documents, chosen in the document brand.
- **Newsreader** (`font-[Newsreader]`): The serif of the Classic document layout, also selectable for any document.

All four are bundled in `@cynco-labs/ui/fonts.css` (latin subsets, SIL Open Font License).

## Type classes

| Class | Size | Weight | Colour | Use |
| --- | --- | --- | --- | --- |
| `text-giga` | 23px | 600 | `foreground` | The rare giant heading. |
| `text-main` | 17px | 600 | `foreground` | Page and sheet titles. |
| `text-main-sec` | 17px | 500 | `foreground` | A quieter title. |
| `text-sub` | 15px | 600 | `muted-foreground` | Section labels and sub-headings. |
| `text-body` | 13px | 500 | `muted-foreground` | Copy. The base size of the system. |
| `text-body-highlight` | 13px | 600 | `muted-foreground` | Emphasis inside body copy. |
| `text-body-secondary` | 13px | 450 | `subtle` | Secondary copy and metadata. |
| `text-form-label` | 13px | 500 | `muted-foreground` | Form labels. |
| `text-tiny` | 11px | 450 | `inherits` | Meta and captions. |
| `text-tiny-id` | 11px | 500 | `inherits` | IDs and codes, in the mono face. |

## Sizes

| Class | Size |
| --- | --- |
| `text-2xs` | 11px |
| `text-xs` | 12px |
| `text-sm` | 13px |
| `text-md` | 15px |
| `text-lg` | 17px |
| `text-xl` | 20px |

## Weights

| Class | Weight | Use |
| --- | --- | --- |
| `font-normal` | 450 | Quiet copy. Note: 450, not 400. |
| `font-medium` | 500 | The default UI weight. |
| `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 as `text-[13px]`.
- Money is always `tabular-nums` and 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”.