Colors

Text color utilities map to semantic role tokens. Use them to apply role-based colour without writing custom CSS.

Text colors

Each class sets the color property to a role token. Use text-inverse on dark backgrounds for contrast.

<p class="text-primary border rounded-sm p-2 mb-3">text-primary</p>
<p class="text-secondary border rounded-sm p-2 mb-3">text-secondary</p>
<p class="text-success border rounded-sm p-2 mb-3">text-success</p>
<p class="text-warning border rounded-sm p-2 mb-3">text-warning</p>
<p class="text-danger border rounded-sm p-2 mb-3">text-danger</p>
<p class="text-info border rounded-sm p-2 mb-3">text-info</p>
<p class="text-muted border rounded-sm p-2 mb-3">text-muted</p>
<p class="text-subtle border rounded-sm p-2 mb-3">text-subtle</p>
<p class="text-inverse bg-surface-inverse border rounded-sm p-2">text-inverse</p>

text-primary

text-secondary

text-success

text-warning

text-danger

text-info

text-muted

text-subtle

text-inverse

Reference

Class	Property	Responsive
`.text-primary`	`color: var(--primary-text)`	No
`.text-secondary`	`color: var(--secondary-text)`	No
`.text-success`	`color: var(--success-text)`	No
`.text-warning`	`color: var(--warning-text)`	No
`.text-danger`	`color: var(--danger-text)`	No
`.text-info`	`color: var(--info-text)`	No
`.text-muted`	`color: var(--c-muted)`	No
`.text-subtle`	`color: var(--c-subtle)`	No
`.text-inverse`	`color: var(--c-inverse)`	No