Mọi text trong THÍCH CAY phải map về một trong các token này. 4 nhóm: Display · Heading · Body · Mono.
| Token | Demo | Size · LH · LS · Weight | Family | Use case |
|---|---|---|---|---|
| Display · DVN Luckiest Guy · ALL CAPS · hero only | ||||
| display-2xl | Vị Việt | 72 · 1.1 · -0.02em · 400 | Display | Hero homepage |
| display-xl | Vị Việt | 60 · 1.1 · -0.02em · 400 | Display | Section hero |
| display-lg | Vị Việt | 48 · 1.1 · -0.01em · 400 | Display | Display page title |
| display-md | Vị Việt | 36 · 1.1 · 0 · 400 | Display | Card hero, banner |
| Heading · Be Vietnam Pro · mixed case · H1-H6 content (default for <h1>–<h6>) | ||||
| h1 | Khám phá hương vị | 36 · 1.2 · -0.02em · 800 | Heading | H1 page |
| h2 | Khám phá hương vị | 30 · 1.25 · -0.01em · 700 | Heading | H2 section |
| h3 | Khám phá hương vị | 24 · 1.3 · -0.01em · 700 | Heading | H3, modal title |
| h4 | Khám phá hương vị | 20 · 1.35 · 0 · 600 | Heading | H4, card title |
| h5 | Khám phá hương vị | 18 · 1.4 · 0 · 600 | Heading | H5, list section |
| h6 | Khám phá hương vị | 16 · 1.4 · 0 · 600 | Heading | H6, inline heading |
| Body · Plus Jakarta Sans · paragraph & UI | ||||
| body-xl | Sốt gỏi cay đậm đà | 20 · 1.5 · 0 · 400 | Body | Intro section dài |
| body-lg | Sốt gỏi cay đậm đà | 18 · 1.5 · 0 · 400 | Body | Lead paragraph |
| body ★ | Sốt gỏi cay đậm đà | 16 · 1.5 · 0 · 400 | Body | Default body |
| body-sm | Sốt gỏi cay đậm đà | 14 · 1.5 · 0 · 400 | Body | Secondary text |
| caption | Sốt gỏi cay đậm đà | 12 · 1.4 · 0.02em · 400 | Body | Caption, helper |
| Label · Plus Jakarta · UPPERCASE | ||||
| label-lg | Section label lớn | 14 · 1.2 · 0.04em · 600 | Body | Form section label |
| label | Form label · chip | 12 · 1.2 · 0.06em · 600 | Body | Form label, tag |
| label-sm | Eyebrow micro | 11 · 1.2 · 0.08em · 700 | Body | Eyebrow text |
| overline | Mới ra mắt | 11 · 1.4 · 0.08em · 700 | Body | Category label |
| Button · Plus Jakarta · UPPERCASE Bold | ||||
| button-lg | Mua ngay | 16 · 1 · 0.04em · 700 | Body | Large CTA |
| button ★ | Mua ngay | 14 · 1 · 0.04em · 700 | Body | Default button |
| button-sm | Mua ngay | 13 · 1 · 0.04em · 700 | Body | Inline action |
| Price · Plus Jakarta Bold | ||||
| price-lg | 65.000đ | 24 · 1.2 · -0.01em · 700 | Body | Hero / featured price |
| price ★ | 65.000đ | 18 · 1.2 · 0 · 700 | Body | Card price |
| price-original | 102.000đ | 14 · 1.2 · 0 · 400 | Body | Old price strikethrough |
| Mono · Be Vietnam Pro · tabular-nums | ||||
| mono-lg | TC-MTL-120 | 16 · 1.5 · 0 · 500 | Mono | Code block, ID lớn |
| mono ★ | DH-2026-04823 | 14 · 1.5 · 0 · 400 | Mono | SKU, mã đơn |
| mono-sm | 2026-05-18 14:23 | 12 · 1.5 · 0 · 400 | Mono | Timestamp, caption mono |