Typography
Typeface
We use Inter typeface to establish visual hierarchy through style, weight to support deliberate communications for all platforms.
Font size
| Token | Font size | Usages |
|---|---|---|
| font-size-5x-large | 48px | Header |
| font-size-4x-large | 32px | Header |
| font-size-3x-large | 28px | Header |
| font-size-2x-large | 24px | Header |
| font-size-x-large | 20px | Header, body text |
| font-size-large | 18px | Header, body text |
| font-size-medium | 16px | Body text |
| font-size-base | 14px | Body text |
| font-size-small | 12px | Description, caption |
| font-size-x-small | 10px | Description, caption |
Line height
| Token | Line height |
|---|---|
| font-height-default | 1.5 |
Font weight
In most cases, just Regular 400 and Medium 500 should be enough. In the case of important information, bold 700 could be used.
| Token | Font weight |
|---|---|
| font-weight-black | Black 900 |
| font-weight-bold | Bold 700 |
| font-weight-medium | Medium 500 |
| font-weight-regular | Regular 400 |
| font-weight-light | Light 300 |
| font-weight-thin | Thin 100 |
Font style
| Token | Style |
|---|---|
| font-style-normal | Normal |
| font-style-underline | Underline |
| font-style-strikethrough |
Usage guidelines
Use sentence case
We use sentence case for all titles, labels, etc... And use title case for proper nouns, product names. Avoid the use of all uppercase or all caps
Use currency symbol (₫)
for Vietnamese products
Decimal & thousands separators
for Vietnamese products
In Vietnam, We use the period to separate thousands and the comma to separate decimal.
Date & time format
- Date: DD/MM/YYYY
- Time: hh:mm, 24-hr
