Typography

Hierarchy through weight and size. Never use multiple font colors — use text-primary at full contrast and text-secondary (contrast-validated, ≥ 4.5:1) for secondary/caption text. Never use opacity to drop text below the AA contrast floor — the old text-muted 40–50% tier is retired; captions are distinguished by size/weight, not lowered contrast.

Rules:

• iOS: AppTheme.Typography.* for EVERY text role — all tokens are Dynamic-Type-scaling (UIFontMetrics-anchored: design-system pt at the default setting, growing with accessibility sizes). Inline .font(.system(size:)) and bare system aliases in feature code are banned.
• Android: always use MaterialTheme.typography.* — never hardcoded sp values.
• Web: use utility classes (page-title, section-heading, label-primary, label-secondary) — never inline text-[X].

Text color hierarchy (AA-validated — tiers by typography, never by opacity)

Text tone uses at most two readable tiers per surface, always at full opacity. On a light surface there is no readable tier below text-secondary — #71717A already sits at the 4.5:1 floor (the lightest AA-passing gray on white is #767676). Lower visual tiers come from size / weight / case, never a lighter or more-transparent color.

That floor is measured on bg-surface (white) and holds nowhere else — not on the ground, and not on a section-surface panel either. section-surface is zinc-100 (#F4F4F5), where the same gray is 4.40:1, also a text fail; the fix there is the same zinc-600 (7.03:1) via text-secondary-ground. The page ground bg-background is #E4E4E7 in light mode, and the same #71717A on it is 3.81:1 — a FAIL for text. Secondary text lives inside a surface (card, panel, section-surface); a line that must sit on the bare ground uses zinc-600 (#52525B, 6.09:1 on the ground, 7.73:1 on white).

Banned: dimming text with opacity below the floor — text-muted-foreground/40, text-prime/40, text-blue-200/50, opacity-50 on text, etc. (the retired "40–50% caption" tier).

Tier-by-typography utilities (all full-opacity text-secondary; differentiate by size/weight/case):

On brand / dark surfaces (sign-in brand panel, gradient heroes): use text-on-brand / text-on-brand-muted — never a magic color (text-blue-200) or opacity. Contrast is measured against the dark surface, where a light token passes AA.

Numeric display — thousands separators are mandatory

Every user-facing number (prices, market cap, trading value, counts) renders with digit grouping — 1,666조, 8,861억, $1,234, 315,500 — never bare digit runs (1666조). Grouping uses comma separators in every locale. Views NEVER hand-assemble money strings (${x}억, toFixed(0) + '조'); they call the platform's canonical formatter:

Compact notation (23K, 91.5K, 2.3만) is permitted for exactly one purpose: a value whose job is a magnitude at a glance, in a space too small for the exact figure — dashboard stat tiles, chart axis labels, sparkline captions. It comes from the canonical formatter (Intl notation: 'compact', locale-aware), never hand-assembled, and it does not exempt the value from grouping: a compact value that still carries thousands renders them grouped (1,234K).

Compact notation is banned wherever the exact number IS the meaning — money owed or paid, credit balances, quantities in a receipt or a confirmation dialog, anything a person may need to reconcile against another system. Those render grouped in full. A compact value must never be a number's only rendition when the reader is accountable for it; pair it with the exact figure in a title or accessibility label.

locale is a required argument to the general formatter, never defaulted. new Intl.NumberFormat(undefined) resolves to the runtime's locale, which differs between the build-time prerender and the browser — that is a hydration mismatch on every number on the page. Thread the app's language down and default at the call site, never inside the formatter.