Typography
Text Styles Documentation
This document outlines the text style classes generated for the application using Tailwind CSS. The classes follow a naming convention based on the font family, size, and weight. The sizes and weights are defined in the Tailwind configuration.
Font Families
- Primary:
Satoshi, sans-serif - Secondary:
Space Grotesk, sans-serif
Text Style Classes
The following classes are generated for both primary and secondary font families with various sizes and weights:
Primary Font Styles
| Class Name | Font Size | Line Height | Font Weight |
|---|---|---|---|
.text-primary-tiny-regular |
8px | 10px | 400 |
.text-primary-tiny-medium |
8px | 10px | 500 |
.text-primary-tiny-bold |
8px | 10px | 700 |
.text-primary-xxs-regular |
10px | 12px | 400 |
.text-primary-xxs-medium |
10px | 12px | 500 |
.text-primary-xxs-bold |
10px | 12px | 700 |
.text-primary-xs-regular |
12px | 16px | 400 |
.text-primary-xs-medium |
12px | 16px | 500 |
.text-primary-xs-bold |
12px | 16px | 700 |
.text-primary-sm-regular |
14px | 20px | 400 |
.text-primary-sm-medium |
14px | 20px | 500 |
.text-primary-sm-bold |
14px | 20px | 700 |
.text-primary-base-regular |
16px | 24px | 400 |
.text-primary-base-medium |
16px | 24px | 500 |
.text-primary-base-bold |
16px | 24px | 700 |
.text-primary-lg-regular |
18px | 28px | 400 |
.text-primary-lg-medium |
18px | 28px | 500 |
.text-primary-lg-bold |
18px | 28px | 700 |
.text-primary-xl-regular |
20px | 28px | 400 |
.text-primary-xl-medium |
20px | 28px | 500 |
.text-primary-xl-bold |
20px | 28px | 700 |
.text-primary-xxl-regular |
32px | normal | 400 |
.text-primary-xxl-medium |
32px | normal | 500 |
.text-primary-xxl-bold |
32px | normal | 700 |
Secondary Font Styles
| Class Name | Font Size | Line Height | Font Weight |
|---|---|---|---|
.text-secondary-tiny-regular |
8px | 10px | 400 |
.text-secondary-tiny-medium |
8px | 10px | 500 |
.text-secondary-tiny-bold |
8px | 10px | 700 |
.text-secondary-xxs-regular |
10px | 12px | 400 |
.text-secondary-xxs-medium |
10px | 12px | 500 |
.text-secondary-xxs-bold |
10px | 12px | 700 |
.text-secondary-xs-regular |
12px | 16px | 400 |
.text-secondary-xs-medium |
12px | 16px | 500 |
.text-secondary-xs-bold |
12px | 16px | 700 |
.text-secondary-sm-regular |
14px | 20px | 400 |
.text-secondary-sm-medium |
14px | 20px | 500 |
.text-secondary-sm-bold |
14px | 20px | 700 |
.text-secondary-base-regular |
16px | 24px | 400 |
.text-secondary-base-medium |
16px | 24px | 500 |
.text-secondary-base-bold |
16px | 24px | 700 |
.text-secondary-lg-regular |
18px | 28px | 400 |
.text-secondary-lg-medium |
18px | 28px | 500 |
.text-secondary-lg-bold |
18px | 28px | 700 |
.text-secondary-xl-regular |
20px | 28px | 400 |
.text-secondary-xl-medium |
20px | 28px | 500 |
.text-secondary-xl-bold |
20px | 28px | 700 |
.text-secondary-xxl-regular |
32px | normal | 400 |
.text-secondary-xxl-medium |
32px | normal | 500 |
.text-secondary-xxl-bold |
32px | normal | 700 |
Usage
You can apply these classes to your text elements to achieve consistent typography throughout your application. Use the appropriate font family, size, and weight to match the design specifications.
Example:
<p class="text-primary-lg-bold">This is a primary bold text.</p><p class="text-secondary-sm-regular">This is a secondary normal text.</p>