The following colors are exported as CSS variables, with each color named in the format --color-tt-COLOR-WEIGHT. For example, --color-tt-gray-500 represents the color gray with a weight of 500.
| Base | |
|---|---|
| tt-white | #FEFEFF |
| tt-black | #1F1F24 |
| Gradients | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| tt-gray | #F7F3F7 | #E6E6EB | #D2D2D9 | #BEBDC5 | #A3A2AB | #898891 | #717078 | #5D5C63 | #44434A | #2D2D33 |
| tt-blue | #F0F3FE | #DCE2FF | #BFC9FD | #A3B3FF | #798EFC | #5862FF | #3232FF | #1D00F5 | #1006C3 | #0B0489 |
| tt-purple | #6C43FF | |||||||||
| tt-fuchsia | #DC00B4 | |||||||||
| tt-red | #FF2846 | |||||||||
| tt-orange | #FFC8B9 | #FF5A00 | ||||||||
| tt-green | #00D796 | |||||||||
| tt-brown | #E8DFD6 | |||||||||
| tt-yellow | #FFD100 |
The following text classes are exported as CSS classes, with each font style named in the format text-STYLE. For example, text-body-base represents the base body font style.
| Class | Font Size | Line Height | Letter Spacing | Font Weight |
|---|---|---|---|---|
| text-body-xs | 0.69rem | 1.5rem | normal | 400 |
| text-body-sm | 0.833rem | 1.5rem | normal | 400 |
| text-body-base | 1rem | 1.5rem | normal | 400 |
| text-body-lg | 1.2rem | 1.5rem | normal | 400 |
| text-body-xl | 1.44rem | 1.5rem | normal | 400 |
| text-body-2xl | 1.73rem | 1.5rem | normal | 400 |
These text classes can be used in your HTML markup to apply the corresponding font styles. For example, to apply the text-body-base style, you can use the class like this:
<p class="text-body-base">This is a paragraph with the base body font style applied.</p>