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.

Aa
black
Aa
gray-10
Aa
gray-15
Aa
gray-20
Aa
gray-25
Aa
gray-30
Aa
gray-35
Aa
gray-40
Aa
gray-45
Aa
gray-50
Aa
gray-55
Aa
gray-60
Aa
gray-65
Aa
gray-70
Aa
gray-75
Aa
white
Aa
black
Aa
gray-10
Aa
gray-15
Aa
gray-20
Aa
gray-25
Aa
gray-30
Aa
gray-35
Aa
gray-40
Aa
gray-45
Aa
gray-50
Aa
gray-55
Aa
gray-60
Aa
gray-65
Aa
gray-70
Aa
gray-75
Aa
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>