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. See the Responsive Features section for responsive variants.
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. See the Responsive Features section for breakpoint and orientation variants.
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>Responsive Features
Text utilities support responsive variants. Alignment classes (text--left, text--center, text--right, text--justify) support all three responsive systems: size-based, orientation-based, and bit-depth variants. Text color classes support size-based and orientation-based variants only.
Breakpoint Prefixes
Use breakpoint prefixes like sm:,
md:, lg:
to apply different alignment or colors at different screen widths.
Responsive alignment
Left by default, center on md+, right on lg+
Gray 50 by default, gray 30 on md+
Text
Responsive
<!-- Alignment: left by default, center on md+, right on lg+ -->
<p class="description text--left md:text--center lg:text--right">Responsive alignment</p>
<!-- Text color: different shades at different breakpoints -->
<span class="value text--gray-50 md:text--gray-30">Responsive color</span>
<!-- Progressive alignment scaling -->
<p class="description text--left sm:text--center md:text--right lg:text--justify">Progressive alignment</p>Orientation and Size+Orientation
Text alignment and colors can adapt to orientation with portrait: and landscape:, and can be combined
with size breakpoints (e.g., md:portrait:).
Orientation variant
Left by default, center in portrait
Text
Orientation
<!-- Left by default, center in portrait -->
<p class="description text--left portrait:text--center">Orientation variant</p>
<!-- Combined size and orientation -->
<p class="description text--left md:portrait:text--right">Left by default, right on md+ portrait</p>Bit-Depth Responsive (Alignment Only)
Alignment classes support bit-depth prefixes like 1bit:,
2bit:, and 4bit: to apply different alignment on different display color capabilities.
Bit-depth alignment
Center by default, right on 2-bit screens
Text
Bit-Depth Responsive
<!-- Center by default, right on 2-bit screens -->
<p class="description text--center 2bit:text--right">Bit-depth alignment</p>
<!-- Combined: size + bit-depth -->
<p class="description text--left lg:4bit:text--center">Left by default, center on lg+ 4-bit screens</p>Combined Responsive Features
Combine size, orientation, and bit-depth modifiers for alignment. Use the pattern
size:orientation:bit-depth:utility for highly targeted styling.
<!-- Size + orientation + bit-depth (alignment only) -->
<p class="description md:portrait:2bit:text--right">Right on md+ portrait 2-bit screens</p>
<!-- Multiple responsive conditions -->
<p class="description text--left sm:text--center lg:4bit:text--right">Progressive with bit-depth override</p>Text color classes support size-based and orientation-based variants only. Bit-depth affects color rendering automatically based on the device (1-bit patterns, 2-bit patterns, 4-bit solid colors)—no bit-depth class prefixes are needed for colors.