atom

Typography

Typography component for rendering text with consistent styling across the design system.

Overview

The Typography component provides consistent typography across the application.

Props

Prop Type Default Description
children ReactNode - Text content to render
variant 'display' | 'title' | 'body' 'body' Typography variant
size '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' 'md' Text size
weight 'light' | 'regular' | 'medium' | 'semibold' | 'bold' 'regular' Font weight
textColor 'base' | 'muted' | 'subtle' | 'primary' | 'primaryAlt' | 'success' | 'warning' | 'danger' 'base' Text color
align 'left' | 'center' | 'right' 'left' Text alignment
truncate boolean false Truncate text with ellipsis
testID string - ID for testing purposes

Variants

Typography Variants

Three semantic variants for different content types.

For hero headlines and large promotional text

For section headings and emphasis

For paragraphs and general content

Sizes

Seven size options from 2xs to 2xl.

Weights

Five weight options for emphasis control.

Colors

Semantic color options for different contexts.

Examples

Truncation

Truncate long text with ellipsis.

<Typography truncate>Long text content...</Typography>

Text Alignment

Control text alignment within containers.

Accessibility

  • Contrast: All color variants meet WCAG AA contrast requirements.
  • Responsive: lineHeight scales according to the device's fontScale.
  • Screen Readers: accessibilityRole prop set as text for screen readers.

Best Practices

  • Use 'muted' and 'subtle' for less important information
  • Ensure sufficient contrast for all text colors