Text
The Text Color system creates the illusion of grayscale text through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels.
Usage
Use the text--{shade} utility
classes to apply these text color patterns to any element. Choose from sixteen values: black, gray-10 through gray-75,
and white.
Text color shades
<div class="text--black">Black text</div>
<div class="text--gray-10">Gray 10 text</div>
<div class="text--gray-15">Gray 15 text</div>
<div class="text--gray-20">Gray 20 text</div>
<div class="text--gray-25">Gray 25 text</div>
<div class="text--gray-30">Gray 30 text</div>
<div class="text--gray-35">Gray 35 text</div>
<div class="text--gray-40">Gray 40 text</div>
<div class="text--gray-45">Gray 45 text</div>
<div class="text--gray-50">Gray 50 text</div>
<div class="text--gray-55">Gray 55 text</div>
<div class="text--gray-60">Gray 60 text</div>
<div class="text--gray-65">Gray 65 text</div>
<div class="text--gray-70">Gray 70 text</div>
<div class="text--gray-75">Gray 75 text</div>
<div class="text--white">White text</div>Backward Compatibility
For backward compatibility, the original shade names (gray-1 through gray-7) are still supported but deprecated. These map to equivalent extended shades:
<!-- Deprecated (but still works) -->
<div class="text--gray-1">Gray 1 text (deprecated)</div>
<div class="text--gray-2">Gray 2 text (deprecated)</div>
<!-- Preferred (new naming) -->
<div class="text--gray-10">Gray 10 text (preferred)</div>
<div class="text--gray-20">Gray 20 text (preferred)</div>Text Alignment
Control text alignment using the alignment utility classes. Options include left, center, right, and justify alignment.
This text is left-aligned. This is the default alignment for most text content.
This text is center-aligned. Useful for headings and important content.
This text is right-aligned. Often used for numerical data or RTL languages.
This text is justified. Creates even text edges on both sides but affects readability. Useful for multi-column text layouts.
Text
Alignment
<p class="text--left">Left-aligned text</p>
<p class="text--center">Center-aligned text</p>
<p class="text--right">Right-aligned text</p>
<p class="text--justify">Justified text</p>