Typography
Fifteen named roles for dense financial screens, set through Text.
Money, counts and dates use <Text numeric>: tabular numerals so columns line up, and the fg.numeric colour, which meets 7:1 on every surface layer in both themes (DECISIONS.md #8).
| Invoice | Customer | Status | Amount (USD) |
|---|---|---|---|
| INV-0041 | Acme Holdings | Overdue | $12,480.00 |
| INV-0040 | Northwind Traders | Paid | $1,112.40 |
| INV-0039 | Globex | Paid | $98,000.00 |
| INV-0038 | Initech | Refunded | −$240.00 |
Rules
- Every amount, count, percentage and date in a column is
numeric. Use thenumeric-*variants for figures that stand alone (a KPI), andnumericon a body or label variant inside sentences. - End-align amounts in tables (
align="end") so the decimal points line up. - Show the currency once, in the column header or as a symbol on every row; never mix the two in one table.
- Negative amounts use a minus sign and the critical tone together; colour alone does not carry the sign.
- Format with
Intl.NumberFormatfor the user's locale; the font handles alignment, not padding.