Text styles define the typography hierarchy and visual characteristics of text elements throughout the interface. This system uses a structured approach with six main levels (h1 to h6) and three weight variants (regular, medium, and semibold) for most levels.

Key components

1. Heading Styles (h1 to h6):

   • Decreasing size from h1 to h6

   • Used for titles, subtitles, and section headers

2. Paragraph Styles (p1 to p6):

   • Varying sizes for different content needs

   • Three weight options: regular, medium, and semibold

3. Weight Variations:

   • Regular: Base weight for body text

   • Medium: Slightly emphasized text

   • Semibold: Strong emphasis or subheadings

Style characteristics

1. h1 to h6: Large to small heading sizes

2. p1 to p6: Decreasing text sizes for various paragraph needs

3. Consistent spacing and line height across styles

Good practices

1. Hierarchy: Use styles consistently to maintain clear information hierarchy

2. Readability: Ensure appropriate font sizes and line heights for easy reading

3. Flexibility: Leverage different weights for emphasis without changing size

4. Responsiveness: Adjust text styles for different screen sizes

5. Accessibility: Maintain sufficient contrast and allow text resizing

6. Consistency: Use text styles systematically across the interface

7. Documentation: Clearly define usage guidelines for each text style

Implementation notes

• Use semantic HTML tags (h1, h2, p, etc.) in conjunction with these styles

• Implement styles using CSS classes or design tokens for easy updates