Typography Tokens
The following tokens centralize all font-related details: family, size, weight, and height. By unifying text styles across headings, paragraphs, and other typographic elements, this set of tokens ensures a seamless and readable user experience.
Font Family
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.["font-family"]} | --tapsi-typography-font-family | "Vazirmatn", sans-serif |
Body Tokens
Extra Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.body.xs.font | --tapsi-typography-body-xs-font | var(--tapsi-typography-font-family) |
tokens.typography.body.xs.size | --tapsi-typography-body-xs-size | 0.75rem |
tokens.typography.body.xs.height | --tapsi-typography-body-xs-height | 1.6666666667 |
tokens.typography.body.xs.weight | --tapsi-typography-body-xs-weight | 400 |
Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.body.sm.font | --tapsi-typography-body-sm-font | var(--tapsi-typography-font-family) |
tokens.typography.body.sm.size | --tapsi-typography-body-sm-size | 0.875rem |
tokens.typography.body.sm.height | --tapsi-typography-body-sm-height | 1.7142857143 |
tokens.typography.body.sm.weight | --tapsi-typography-body-sm-weight | 400 |
Medium
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.body.md.font | --tapsi-typography-body-md-font | var(--tapsi-typography-font-family) |
tokens.typography.body.md.size | --tapsi-typography-body-md-size | 1rem |
tokens.typography.body.md.height | --tapsi-typography-body-md-height | 1.75 |
tokens.typography.body.md.weight | --tapsi-typography-body-md-weight | 400 |
Large
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.body.lg.font | --tapsi-typography-body-lg-font | var(--tapsi-typography-font-family) |
tokens.typography.body.lg.size | --tapsi-typography-body-lg-size | 1.125rem |
tokens.typography.body.lg.height | --tapsi-typography-body-lg-height | 1.7777777778 |
tokens.typography.body.lg.weight | --tapsi-typography-body-lg-weight | 400 |
Label Tokens
2x Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.label.xxs.font | --tapsi-typography-label-xxs-font | var(--tapsi-typography-font-family) |
tokens.typography.label.xxs.size | --tapsi-typography-label-xxs-size | 0.625rem |
tokens.typography.label.xxs.height | --tapsi-typography-label-xxs-height | 1.6 |
tokens.typography.label.xxs.weight | --tapsi-typography-label-xxs-weight | 500 |
Extra Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.label.xs.font | --tapsi-typography-label-xs-font | var(--tapsi-typography-font-family) |
tokens.typography.label.xs.size | --tapsi-typography-label-xs-size | 0.75rem |
tokens.typography.label.xs.height | --tapsi-typography-label-xs-height | 2 |
tokens.typography.label.xs.weight | --tapsi-typography-label-xs-weight | 500 |
Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.label.sm.font | --tapsi-typography-label-sm-font | var(--tapsi-typography-font-family) |
tokens.typography.label.sm.size | --tapsi-typography-label-sm-size | 0.875rem |
tokens.typography.label.sm.height | --tapsi-typography-label-sm-height | 1.7142857143 |
tokens.typography.label.sm.weight | --tapsi-typography-label-sm-weight | 500 |
Medium
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.label.md.font | --tapsi-typography-label-md-font | var(--tapsi-typography-font-family) |
tokens.typography.label.md.size | --tapsi-typography-label-md-size | 1rem |
tokens.typography.label.md.height | --tapsi-typography-label-md-height | 1.75 |
tokens.typography.label.md.weight | --tapsi-typography-label-md-weight | 500 |
Large
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.label.lg.font | --tapsi-typography-label-lg-font | var(--tapsi-typography-font-family) |
tokens.typography.label.lg.size | --tapsi-typography-label-lg-size | 1.125rem |
tokens.typography.label.lg.height | --tapsi-typography-label-lg-height | 1.7777777778 |
tokens.typography.label.lg.weight | --tapsi-typography-label-lg-weight | 500 |
Headline Tokens
Extra Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.headline.xs.font | --tapsi-typography-headline-xs-font | var(--tapsi-typography-font-family) |
tokens.typography.headline.xs.size | --tapsi-typography-headline-xs-size | 1rem |
tokens.typography.headline.xs.height | --tapsi-typography-headline-xs-height | 1.5 |
tokens.typography.headline.xs.weight | --tapsi-typography-headline-xs-weight | 600 |
Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.headline.sm.font | --tapsi-typography-headline-sm-font | var(--tapsi-typography-font-family) |
tokens.typography.headline.sm.size | --tapsi-typography-headline-sm-size | 1.25rem |
tokens.typography.headline.sm.height | --tapsi-typography-headline-sm-height | 1.5 |
tokens.typography.headline.sm.weight | --tapsi-typography-headline-sm-weight | 600 |
Medium
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.headline.md.font | --tapsi-typography-headline-md-font | var(--tapsi-typography-font-family) |
tokens.typography.headline.md.size | --tapsi-typography-headline-md-size | 1.5rem |
tokens.typography.headline.md.height | --tapsi-typography-headline-md-height | 1.5 |
tokens.typography.headline.md.weight | --tapsi-typography-headline-md-weight | 600 |
Large
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.headline.lg.font | --tapsi-typography-headline-lg-font | var(--tapsi-typography-font-family) |
tokens.typography.headline.lg.size | --tapsi-typography-headline-lg-size | 1.75rem |
tokens.typography.headline.lg.height | --tapsi-typography-headline-lg-height | 1.5 |
tokens.typography.headline.lg.weight | --tapsi-typography-headline-lg-weight | 600 |
Display Tokens
Small
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.display.sm.font | --tapsi-typography-display-sm-font | var(--tapsi-typography-font-family) |
tokens.typography.display.sm.size | --tapsi-typography-display-sm-size | 2rem |
tokens.typography.display.sm.height | --tapsi-typography-display-sm-height | 1.5 |
tokens.typography.display.sm.weight | --tapsi-typography-display-sm-weight | 600 |
Medium
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.display.md.font | --tapsi-typography-display-md-font | var(--tapsi-typography-font-family) |
tokens.typography.display.md.size | --tapsi-typography-display-md-size | 2.5rem |
tokens.typography.display.md.height | --tapsi-typography-display-md-height | 1.5 |
tokens.typography.display.md.weight | --tapsi-typography-display-md-weight | 600 |
Large
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.typography.display.lg.font | --tapsi-typography-display-lg-font | var(--tapsi-typography-font-family) |
tokens.typography.display.lg.size | --tapsi-typography-display-lg-size | 3rem |
tokens.typography.display.lg.height | --tapsi-typography-display-lg-height | 1.5 |
tokens.typography.display.lg.weight | --tapsi-typography-display-lg-weight | 600 |