Typography
Typography defines the system of fonts, sizes, weights, and styles used across the interface to present text consistently and legibly. It establishes a visual hierarchy and conveys the brand’s voice.
Philosophy
Colors are more than decoration — they are a language of meaning.
They express brand personality consistently across touchpoints.
They provide functional cues (success, error, warning).
They ensure legibility and inclusivity when applied with contrast standards.
Anatomy
Variants
Billboard
Extra large titles used on special pages.
Large
80 pt
Medium
64 pt
Small
48 pt
Title
Standard titles.
Large
40 pt
Medium
32 pt
Small
24 pt
Headline
Used to describe groups and sections.
Standard
20 pt
Body
Used for main reading text.
Large
16 pt
Medium
14 pt
Caption
Used for descriptive texts and footnotes.
Caption standard
16 pt
Text link
Holding a link. Always underlined.
Large
16 pt
Medium
14 pt
Usage tips
Dos
Use typography tokens to maintain consistency.
Follow the predefined scale for hierarchy.
Don’ts
Don’t mix arbitrary fonts — stick to system-defined families.
Don’t rely on font weight or color alone for meaning.
Don’t overload designs with too many sizes or styles.