Text Utilities

Utility classes for text color, alignment, decoration, and transform. All utilities support responsive breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

---

Text Color

Semantic text color utilities. Values reference theme color tokens so they adapt to light/dark mode automatically.

Classes

Class	CSS variable
text-default	var(--color-text)
text-secondary	var(--color-text-secondary)
text-tertiary	var(--color-text-tertiary)
text-inverse	var(--color-text-inverse)
text-placeholder	var(--color-text-placeholder)
text-disabled	var(--color-text-disabled)
text-primary	var(--color-primary)
text-on-primary	var(--color-on-primary)
text-success	var(--color-success)
text-warning	var(--color-warning)
text-error	var(--color-error)
text-info	var(--color-info)
text-inherit	inherit

<div class="flex flex-col gap-2 p-3 bg-surface rounded-md">
  <p class="text-default">.text-default — primary text</p>
  <p class="text-secondary">.text-secondary — secondary text</p>
  <p class="text-tertiary">.text-tertiary — tertiary text</p>
  <p class="text-placeholder">.text-placeholder — placeholder text</p>
  <p class="text-disabled">.text-disabled — disabled text</p>
</div>

.text-default — primary text

.text-secondary — secondary text

.text-tertiary — tertiary text

.text-placeholder — placeholder text

.text-disabled — disabled text

<div class="flex flex-col gap-2 p-3 bg-surface rounded-md">
  <p class="text-primary">.text-primary — brand primary</p>
  <p class="text-success">.text-success — success</p>
  <p class="text-warning">.text-warning — warning</p>
  <p class="text-error">.text-error — error</p>
  <p class="text-info">.text-info — info</p>
</div>

.text-primary — brand primary

.text-success — success

.text-warning — warning

.text-error — error

.text-info — info

Responsive

<p class="text-secondary md:text-default">
  Secondary on mobile, default from md up
</p>

SCSS

@use '@grundtone/design-tokens/scss/lib' as gt;

.caption {
  color: gt.color('text-secondary');
}

---

Text Alignment

Classes

<div class="bg-surface-alt rounded-md overflow-hidden">
  <div class="text-left p-3 border-b">.text-left</div>
  <div class="text-center p-3 border-b">.text-center</div>
  <div class="text-right p-3">.text-right</div>
</div>

.text-left

.text-center

.text-right

Class	CSS
.text-left	text-align: left
.text-center	text-align: center
.text-right	text-align: right
.text-justify	text-align: justify

Responsive

Change alignment at different breakpoints using the {breakpoint}: prefix:

<div class="text-left md:text-center p-3 bg-surface-alt rounded-md">
  Left on mobile, centered from <code>md</code> up &mdash; resize your browser to see
</div>

Left on mobile, centered from md up — resize your browser to see

<!-- Left on mobile, centered from md up -->
<h1 class="text-left md:text-center">Responsive heading</h1>

<!-- Centered on mobile, right-aligned from lg up -->
<p class="text-center lg:text-right">Responsive paragraph</p>

Class	Applies from
.text-center	All sizes
.sm:text-center	≥ 640px
.md:text-center	≥ 768px
.lg:text-center	≥ 1024px
.xl:text-center	≥ 1280px
.2xl:text-center	≥ 1536px

The same breakpoint prefixes work for -left, -right, and -justify.

See Breakpoints for the full breakpoint scale and customisation.

---

Text Decoration

Underline, line-through, and no-underline utility classes.

Classes

Class	CSS
underline	text-decoration: underline
line-through	text-decoration: line-through
no-underline	text-decoration: none

<div class="flex flex-col gap-1 text-lg">
  <p class="underline">.underline</p>
  <p class="line-through">.line-through</p>
  <p class="no-underline">.no-underline</p>
</div>

.underline

.line-through

.no-underline

Usage

<a href="#" class="no-underline">Link without underline</a>
<span class="line-through">Discounted price</span>

Responsive

<span class="no-underline md:underline">
  Underlined from md and up
</span>

---

Text Transform

Uppercase, lowercase, capitalize, and normal-case utility classes.

Classes

Class	CSS
uppercase	text-transform: uppercase
lowercase	text-transform: lowercase
capitalize	text-transform: capitalize
normal-case	text-transform: none

<div class="flex flex-col gap-1 text-lg">
  <p class="uppercase">.uppercase</p>
  <p class="lowercase">.lowercase</p>
  <p class="capitalize">.capitalize — example text</p>
  <p class="normal-case">.normal-case</p>
</div>

.uppercase

.lowercase

.capitalize — example text

.normal-case

Responsive

<span class="uppercase md:normal-case">
  Uppercase on mobile only
</span>