Typography
Typography tokens help apply text color, size, and weights in a scalable and consistent way. Make sure to visit the Typography foundations for extended guidelines.
Text color
| Sample | Token | Value |
|---|---|---|
The color of the text looks like this | --uxa-typography-color__high-emphasis | #000000 |
The color of the text looks like this | --uxa-typography-color__body | #323435 |
The color of the text looks like this | --uxa-typography-color__secondary | #4c4e50 |
The color of the text looks like this | --uxa-typography-color__tertiary | #656668 |
The color of the text looks like this | --uxa-typography-color__lightest | #747577 |
The color of the text looks like this | --uxa-typography-color__placeholder | #000000 |
The color of the text looks like this | --uxa-typography-color__disabled | #000000 |
The color of the text looks like this | --uxa-typography-color__link | #0073e7 |
| Sample | Token | Value |
|---|---|---|
The color of the text looks like this | --uxa-typography-color__high-emphasis | #ffffff |
The color of the text looks like this | --uxa-typography-color__body | #eceff5 |
The color of the text looks like this | --uxa-typography-color__secondary | #dce0e8 |
The color of the text looks like this | --uxa-typography-color__tertiary | #b9bec9 |
The color of the text looks like this | --uxa-typography-color__lightest | #9ea1ad |
The color of the text looks like this | --uxa-typography-color__placeholder | #ffffff |
The color of the text looks like this | --uxa-typography-color__link | #61b0ff |
Text size
| Sample | Token | Value |
|---|---|---|
This is a title | --uxa-typography-heading-1 | 40px |
This is a title | --uxa-typography-heading-2 | 30px |
This is a title | --uxa-typography-heading-4 | 20px |
This is a title | --uxa-typography-heading-6 | 16px |
This is a title | --uxa-typography-heading-7 | 14px |
This is body text | --uxa-typography__font-size--large | 16px |
This is body text | --uxa-typography__font-size | 14px |
This is body text | --uxa-typography__font-size--small | 12px |
This is body text | --uxa-typography__font-size--xsmall | 10px |
| Sample | Token | Value |
|---|---|---|
This is a title | --uxa-typography-heading-1 | 40px |
This is a title | --uxa-typography-heading-2 | 30px |
This is a title | --uxa-typography-heading-4 | 20px |
This is a title | --uxa-typography-heading-6 | 16px |
This is a title | --uxa-typography-heading-7 | 14px |
This is body text | --uxa-typography__font-size--large | 16px |
This is body text | --uxa-typography__font-size | 14px |
This is body text | --uxa-typography__font-size--small | 12px |
This is body text | --uxa-typography__font-size--xsmall | 10px |