Text Color

Set text color with the text--{token} utilities, on the same scale as the Colors palette. On 1-bit displays a grayscale token renders as a dither pattern of black and white pixels, so text can read as any shade of gray.

Usage

Use the text--{shade} utility classes to apply text color patterns to any element. Grayscale: black, gray-10 through gray-75, and white. Chromatic: text--{hue} (pure color) or text--{hue}-{step} (e.g. text--red-50, text--blue-40). Semantic: text--primary, text--success, text--error, etc. (see Colors). See the Responsive Features section for responsive variants.

Grayscale

Sixteen grayscale values: black, gray-10 through gray-75, and white.

black

gray-10

gray-15

gray-20

gray-25

gray-30

gray-35

gray-40

gray-45

gray-50

gray-55

gray-60

gray-65

gray-70

gray-75

white

black

gray-10

gray-15

gray-20

gray-25

gray-30

gray-35

gray-40

gray-45

gray-50

gray-55

gray-60

gray-65

gray-70

gray-75

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>

Red

Use text--red and text--red-{step} (e.g. text--red-50) for red text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

red-10

red-15

red-20

red-25

red-30

red-35

red-40

red

red-45

red-50

red-55

red-60

red-65

red-70

red-75

red-10

red-15

red-20

red-25

red-30

red-35

red-40

red

red-45

red-50

red-55

red-60

red-65

red-70

red-75

Text Red

<div class="text--red-10">Red-10 text</div>
<div class="text--red-15">Red-15 text</div>
<div class="text--red-20">Red-20 text</div>
<div class="text--red-25">Red-25 text</div>
<div class="text--red-30">Red-30 text</div>
<div class="text--red-35">Red-35 text</div>
<div class="text--red-40">Red-40 text</div>
<div class="text--red">Red text</div>
<div class="text--red-45">Red-45 text</div>
<div class="text--red-50">Red-50 text</div>
<div class="text--red-55">Red-55 text</div>
<div class="text--red-60">Red-60 text</div>
<div class="text--red-65">Red-65 text</div>
<div class="text--red-70">Red-70 text</div>
<div class="text--red-75">Red-75 text</div>

Orange

Use text--orange and text--orange-{step} (e.g. text--orange-50) for orange text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

orange-10

orange-15

orange-20

orange-25

orange-30

orange-35

orange-40

orange

orange-45

orange-50

orange-55

orange-60

orange-65

orange-70

orange-75

orange-10

orange-15

orange-20

orange-25

orange-30

orange-35

orange-40

orange

orange-45

orange-50

orange-55

orange-60

orange-65

orange-70

orange-75

Text Orange

<div class="text--orange-10">Orange-10 text</div>
<div class="text--orange-15">Orange-15 text</div>
<div class="text--orange-20">Orange-20 text</div>
<div class="text--orange-25">Orange-25 text</div>
<div class="text--orange-30">Orange-30 text</div>
<div class="text--orange-35">Orange-35 text</div>
<div class="text--orange-40">Orange-40 text</div>
<div class="text--orange">Orange text</div>
<div class="text--orange-45">Orange-45 text</div>
<div class="text--orange-50">Orange-50 text</div>
<div class="text--orange-55">Orange-55 text</div>
<div class="text--orange-60">Orange-60 text</div>
<div class="text--orange-65">Orange-65 text</div>
<div class="text--orange-70">Orange-70 text</div>
<div class="text--orange-75">Orange-75 text</div>

Yellow

Use text--yellow and text--yellow-{step} (e.g. text--yellow-50) for yellow text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

yellow-10

yellow-15

yellow-20

yellow-25

yellow-30

yellow-35

yellow-40

yellow

yellow-45

yellow-50

yellow-55

yellow-60

yellow-65

yellow-70

yellow-75

yellow-10

yellow-15

yellow-20

yellow-25

yellow-30

yellow-35

yellow-40

yellow

yellow-45

yellow-50

yellow-55

yellow-60

yellow-65

yellow-70

yellow-75

Text Yellow

<div class="text--yellow-10">Yellow-10 text</div>
<div class="text--yellow-15">Yellow-15 text</div>
<div class="text--yellow-20">Yellow-20 text</div>
<div class="text--yellow-25">Yellow-25 text</div>
<div class="text--yellow-30">Yellow-30 text</div>
<div class="text--yellow-35">Yellow-35 text</div>
<div class="text--yellow-40">Yellow-40 text</div>
<div class="text--yellow">Yellow text</div>
<div class="text--yellow-45">Yellow-45 text</div>
<div class="text--yellow-50">Yellow-50 text</div>
<div class="text--yellow-55">Yellow-55 text</div>
<div class="text--yellow-60">Yellow-60 text</div>
<div class="text--yellow-65">Yellow-65 text</div>
<div class="text--yellow-70">Yellow-70 text</div>
<div class="text--yellow-75">Yellow-75 text</div>

Lime

Use text--lime and text--lime-{step} (e.g. text--lime-50) for lime text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

lime-10

lime-15

lime-20

lime-25

lime-30

lime-35

lime-40

lime

lime-45

lime-50

lime-55

lime-60

lime-65

lime-70

lime-75

lime-10

lime-15

lime-20

lime-25

lime-30

lime-35

lime-40

lime

lime-45

lime-50

lime-55

lime-60

lime-65

lime-70

lime-75

Text Lime

<div class="text--lime-10">Lime-10 text</div>
<div class="text--lime-15">Lime-15 text</div>
<div class="text--lime-20">Lime-20 text</div>
<div class="text--lime-25">Lime-25 text</div>
<div class="text--lime-30">Lime-30 text</div>
<div class="text--lime-35">Lime-35 text</div>
<div class="text--lime-40">Lime-40 text</div>
<div class="text--lime">Lime text</div>
<div class="text--lime-45">Lime-45 text</div>
<div class="text--lime-50">Lime-50 text</div>
<div class="text--lime-55">Lime-55 text</div>
<div class="text--lime-60">Lime-60 text</div>
<div class="text--lime-65">Lime-65 text</div>
<div class="text--lime-70">Lime-70 text</div>
<div class="text--lime-75">Lime-75 text</div>

Green

Use text--green and text--green-{step} (e.g. text--green-50) for green text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

green-10

green-15

green-20

green-25

green-30

green-35

green-40

green

green-45

green-50

green-55

green-60

green-65

green-70

green-75

green-10

green-15

green-20

green-25

green-30

green-35

green-40

green

green-45

green-50

green-55

green-60

green-65

green-70

green-75

Text Green

<div class="text--green-10">Green-10 text</div>
<div class="text--green-15">Green-15 text</div>
<div class="text--green-20">Green-20 text</div>
<div class="text--green-25">Green-25 text</div>
<div class="text--green-30">Green-30 text</div>
<div class="text--green-35">Green-35 text</div>
<div class="text--green-40">Green-40 text</div>
<div class="text--green">Green text</div>
<div class="text--green-45">Green-45 text</div>
<div class="text--green-50">Green-50 text</div>
<div class="text--green-55">Green-55 text</div>
<div class="text--green-60">Green-60 text</div>
<div class="text--green-65">Green-65 text</div>
<div class="text--green-70">Green-70 text</div>
<div class="text--green-75">Green-75 text</div>

Cyan

Use text--cyan and text--cyan-{step} (e.g. text--cyan-50) for cyan text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

cyan-10

cyan-15

cyan-20

cyan-25

cyan-30

cyan-35

cyan-40

cyan

cyan-45

cyan-50

cyan-55

cyan-60

cyan-65

cyan-70

cyan-75

cyan-10

cyan-15

cyan-20

cyan-25

cyan-30

cyan-35

cyan-40

cyan

cyan-45

cyan-50

cyan-55

cyan-60

cyan-65

cyan-70

cyan-75

Text Cyan

<div class="text--cyan-10">Cyan-10 text</div>
<div class="text--cyan-15">Cyan-15 text</div>
<div class="text--cyan-20">Cyan-20 text</div>
<div class="text--cyan-25">Cyan-25 text</div>
<div class="text--cyan-30">Cyan-30 text</div>
<div class="text--cyan-35">Cyan-35 text</div>
<div class="text--cyan-40">Cyan-40 text</div>
<div class="text--cyan">Cyan text</div>
<div class="text--cyan-45">Cyan-45 text</div>
<div class="text--cyan-50">Cyan-50 text</div>
<div class="text--cyan-55">Cyan-55 text</div>
<div class="text--cyan-60">Cyan-60 text</div>
<div class="text--cyan-65">Cyan-65 text</div>
<div class="text--cyan-70">Cyan-70 text</div>
<div class="text--cyan-75">Cyan-75 text</div>

Blue

Use text--blue and text--blue-{step} (e.g. text--blue-50) for blue text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

blue-10

blue-15

blue-20

blue-25

blue-30

blue-35

blue-40

blue

blue-45

blue-50

blue-55

blue-60

blue-65

blue-70

blue-75

blue-10

blue-15

blue-20

blue-25

blue-30

blue-35

blue-40

blue

blue-45

blue-50

blue-55

blue-60

blue-65

blue-70

blue-75

Text Blue

<div class="text--blue-10">Blue-10 text</div>
<div class="text--blue-15">Blue-15 text</div>
<div class="text--blue-20">Blue-20 text</div>
<div class="text--blue-25">Blue-25 text</div>
<div class="text--blue-30">Blue-30 text</div>
<div class="text--blue-35">Blue-35 text</div>
<div class="text--blue-40">Blue-40 text</div>
<div class="text--blue">Blue text</div>
<div class="text--blue-45">Blue-45 text</div>
<div class="text--blue-50">Blue-50 text</div>
<div class="text--blue-55">Blue-55 text</div>
<div class="text--blue-60">Blue-60 text</div>
<div class="text--blue-65">Blue-65 text</div>
<div class="text--blue-70">Blue-70 text</div>
<div class="text--blue-75">Blue-75 text</div>

Violet

Use text--violet and text--violet-{step} (e.g. text--violet-50) for violet text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

violet-10

violet-15

violet-20

violet-25

violet-30

violet-35

violet-40

violet

violet-45

violet-50

violet-55

violet-60

violet-65

violet-70

violet-75

violet-10

violet-15

violet-20

violet-25

violet-30

violet-35

violet-40

violet

violet-45

violet-50

violet-55

violet-60

violet-65

violet-70

violet-75

Text Violet

<div class="text--violet-10">Violet-10 text</div>
<div class="text--violet-15">Violet-15 text</div>
<div class="text--violet-20">Violet-20 text</div>
<div class="text--violet-25">Violet-25 text</div>
<div class="text--violet-30">Violet-30 text</div>
<div class="text--violet-35">Violet-35 text</div>
<div class="text--violet-40">Violet-40 text</div>
<div class="text--violet">Violet text</div>
<div class="text--violet-45">Violet-45 text</div>
<div class="text--violet-50">Violet-50 text</div>
<div class="text--violet-55">Violet-55 text</div>
<div class="text--violet-60">Violet-60 text</div>
<div class="text--violet-65">Violet-65 text</div>
<div class="text--violet-70">Violet-70 text</div>
<div class="text--violet-75">Violet-75 text</div>

Purple

Use text--purple and text--purple-{step} (e.g. text--purple-50) for purple text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

purple-10

purple-15

purple-20

purple-25

purple-30

purple-35

purple-40

purple

purple-45

purple-50

purple-55

purple-60

purple-65

purple-70

purple-75

purple-10

purple-15

purple-20

purple-25

purple-30

purple-35

purple-40

purple

purple-45

purple-50

purple-55

purple-60

purple-65

purple-70

purple-75

Text Purple

<div class="text--purple-10">Purple-10 text</div>
<div class="text--purple-15">Purple-15 text</div>
<div class="text--purple-20">Purple-20 text</div>
<div class="text--purple-25">Purple-25 text</div>
<div class="text--purple-30">Purple-30 text</div>
<div class="text--purple-35">Purple-35 text</div>
<div class="text--purple-40">Purple-40 text</div>
<div class="text--purple">Purple text</div>
<div class="text--purple-45">Purple-45 text</div>
<div class="text--purple-50">Purple-50 text</div>
<div class="text--purple-55">Purple-55 text</div>
<div class="text--purple-60">Purple-60 text</div>
<div class="text--purple-65">Purple-65 text</div>
<div class="text--purple-70">Purple-70 text</div>
<div class="text--purple-75">Purple-75 text</div>

Pink

Use text--pink and text--pink-{step} (e.g. text--pink-50) for pink text. Same steps as grayscale (10–75). Use the Device Preview (top right) to switch to a color device (e.g. Inky Impression 7.3, Tidbyt) to see these colors.

pink-10

pink-15

pink-20

pink-25

pink-30

pink-35

pink-40

pink

pink-45

pink-50

pink-55

pink-60

pink-65

pink-70

pink-75

pink-10

pink-15

pink-20

pink-25

pink-30

pink-35

pink-40

pink

pink-45

pink-50

pink-55

pink-60

pink-65

pink-70

pink-75

Text Pink

<div class="text--pink-10">Pink-10 text</div>
<div class="text--pink-15">Pink-15 text</div>
<div class="text--pink-20">Pink-20 text</div>
<div class="text--pink-25">Pink-25 text</div>
<div class="text--pink-30">Pink-30 text</div>
<div class="text--pink-35">Pink-35 text</div>
<div class="text--pink-40">Pink-40 text</div>
<div class="text--pink">Pink text</div>
<div class="text--pink-45">Pink-45 text</div>
<div class="text--pink-50">Pink-50 text</div>
<div class="text--pink-55">Pink-55 text</div>
<div class="text--pink-60">Pink-60 text</div>
<div class="text--pink-65">Pink-65 text</div>
<div class="text--pink-70">Pink-70 text</div>
<div class="text--pink-75">Pink-75 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>

Responsive Features

Text color classes support size-based and orientation-based responsive variants. 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.

Breakpoint Prefixes

Use breakpoint prefixes like sm:, md:, lg: to apply different colors at different screen widths.

Responsive color

Gray 50 by default, gray 30 on md+

Text Color Responsive

<!-- Text color: different shades at different breakpoints -->
<span class="value text--gray-50 md:text--gray-30">Responsive color</span>

<!-- Progressive color scaling -->
<span class="value text--gray-70 sm:text--gray-50 md:text--gray-30 lg:text--black">Progressive color</span>

<!-- Chromatic color at breakpoints -->
<span class="value text--red sm:text--blue lg:text--green">Responsive chromatic color</span>

Orientation and Size+Orientation

Text colors can adapt to orientation with portrait: and landscape:, and can be combined with size breakpoints (e.g., md:portrait:).

<!-- Different color in portrait -->
<span class="value text--gray-50 portrait:text--black">Orientation color variant</span>

<!-- Combined size and orientation -->
<span class="value text--gray-50 md:portrait:text--gray-30">Color on md+ portrait</span>

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.