Semantic Text System
Text components that automatically adapt to different backgrounds
Glass Background Examples
This is primary text on glass background
This is secondary text on glass background
This is tertiary text on glass background
This is muted text on glass background
This is brand text on glass background
Heading Level 3
This is body text using the Text component
This is small body text with secondary variant
High emphasis caption
Medium emphasis caption
Low emphasis caption
Light Background Examples
This is primary text on light background
This is secondary text on light background
This is tertiary text on light background
This is muted text on light background
This is brand text on light background
Heading Level 3
This is body text using the Text component
This is small body text with secondary variant
High emphasis caption
Medium emphasis caption
Low emphasis caption
Mixed Background Examples
Glass Card
This text automatically adapts to the glass background
Caption text on glass background
Light Card
This text automatically adapts to the light background
Caption text on light background
Brand Card
This text works on brand gradient backgrounds
Caption text on brand background
Usage Examples
The Text components automatically detect their background context and apply appropriate colors for optimal contrast and readability.
No need to manually specify text colors - the system handles it for you.
Use semantic variants like primary, secondary, tertiary, and muted instead of hardcoded colors for better maintainability.
This ensures consistent contrast ratios across all backgrounds.
Inline Text Examples
This is primary text
mixed with secondary text
and tertiary text
with brand accents
and muted text.
Bold primary text
with regular secondary text
and brand text.