← Back to Dashboard

📝 Typography

Font hierarchy, sizes, weights, and readability

Font Family & System

Pending Review

Consistent font stack with proper fallbacks for cross-platform compatibility.

Sample text: The quick brown fox jumps over the lazy dog
Requirements
System font stack for performance
Proper fallback fonts defined
Consistent across all components
Web font loading optimization

Heading Hierarchy

Pending Review

Clear heading structure from H1 to H6 with appropriate sizing and weight.

H1: Main Title

H2: Section Header

H3: Subsection

H4: Card Title

Requirements
Clear size differentiation
Appropriate font weights
Proper line heights
Responsive scaling

Body Text & Readability

Pending Review

Optimal font size and line height for comfortable reading across devices.

This is body text with proper line height for optimal readability. The spacing between lines should be comfortable for extended reading sessions. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Requirements
16px minimum body font size
1.5-1.6 line height ratio
60-75 character line length
Proper paragraph spacing

Font Weights & Styles

Pending Review

Consistent use of font weights for emphasis and hierarchy.

Light (300): Subtle text

Regular (400): Body text

Medium (500): Subheadings

Semibold (600): Important text

Bold (700): Headlines

Requirements
Limited to 3-4 weights maximum
Consistent weight usage
Proper emphasis hierarchy
Avoid italic for emphasis

Text Colors & Contrast

Pending Review

Appropriate text colors with sufficient contrast for accessibility.

Primary text (white)

Secondary text (light gray)

Muted text (gray)

Accent text (purple)

Requirements
WCAG AA contrast ratios met
Consistent color hierarchy
Link colors clearly visible
Error/success text colors defined

Responsive Typography

Pending Review

Typography that scales appropriately across different screen sizes.

Requirements
Fluid typography with clamp()
Mobile-optimized font sizes
Proper breakpoints defined
No horizontal scroll on mobile