1thay dùng 4 font family cho 4 mục đích khác nhau. Tất cả đều được định nghĩa trong Figma collection 🗜️ 1type.
| Token | Font | Vai trò | Mẫu |
|---|
font-family/brand | Hanken Grotesk | Headings, brand text | 1thay Design |
font-family/ui | Inter | UI components, body | The quick brown fox |
font-family/mono | Space Grotesk | Numbers, code, data | $48,290.00 |
font-family/content | Merriweather | Long-form content | Design is how it works. |
| Token | Size | Rem | Mẫu |
|---|
fontsize/xxs | 10px | 0.625 | Extra extra small |
fontsize/xs | 12px | 0.75 | Extra small |
fontsize/sm | 14px | 0.875 | Small text |
fontsize/md | 16px | 1 | Base body text |
fontsize/lg | 18px | 1.125 | Large body |
fontsize/xl | 20px | 1.25 | H4 heading |
fontsize/2xl | 24px | 1.5 | H3 heading |
fontsize/3xl | 32px | 2 | H2 heading |
fontsize/4xl | 40px | 2.5 | H1 mobile |
fontsize/5xl | 48px | 3 | H1 desktop |
| Token | CSS Value | Mẫu |
|---|
fontweight/300 | 300 | Light |
fontweight/400 | 400 | Regular |
fontweight/500 | 500 | Medium |
fontweight/600 | 600 | Semi Bold |
fontweight/700 | 700 | Bold |
fontweight/800 | 800 | Extra Bold |
| Token | Value |
|---|
lineheight/xs | 1 |
lineheight/sm | 1.24 |
lineheight/md | 1.4 |
lineheight/lg | 1.8 |
lineheight/xl | 2 |
| Token | Value |
|---|
letterspacing/tighter | -0.05em |
letterspacing/tight | -0.025em |
letterspacing/normal | 0 |
letterspacing/wide | +0.025em |
letterspacing/widest | +0.1em |
