Home
Utilities
Color

Color

Color utilities can be used to apply specific colors to text, icons and backgrounds.

Text

Use text utilities to change the color of text and icons.

Example
Text and icons in different colors.

.pv-text-default
Use default text as a last resort when the text color can't be inherited from the body.

.pv-text-subdued
Use subdued text to reduce emphasis independent of font size/weight.

.pv-text-brand
Use brand text sparingly to highlight text or icons.

.pv-text-critical
Use red text to denote errors or potentially destructive actions.

.pv-text-warning
Use yellow text to denote warnings.

.pv-text-inverse
Use inverse text to provide adequate contrast on dark backgrounds.

.pv-text-subdued-inverse
Use subdued inverse text to reduce emphasis on dark backgrounds.

.pv-text-brand-inverse
Use inverse brand text to apply the brand color on dark backgrounds.

HTML

<div class="pv-text-default pv-surface pv-inset-square pv-bordered"><strong>.pv-text-default</strong><br>
Use default text as a last resort when the text color can't be inherited from the body.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-text-subdued pv-surface pv-inset-square pv-bordered"><strong>.pv-text-subdued</strong><br>
Use subdued text to reduce emphasis independent of font size/weight.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-text-brand pv-surface pv-inset-square pv-bordered"><strong>.pv-text-brand</strong><br>
Use brand text sparingly to highlight text or icons.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-text-critical pv-surface pv-inset-square pv-bordered"><strong>.pv-text-critical</strong><br>
Use red text to denote errors or potentially destructive actions.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-text-warning pv-surface pv-inset-square pv-bordered"><strong>.pv-text-warning</strong><br>
Use yellow text to denote warnings.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-text-inverse pv-surface-brand pv-inset-square"><strong>.pv-text-inverse</strong><br>
Use inverse text to provide adequate contrast on dark backgrounds.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>
<div class="pv-surface-brand pv-inset-square"><p class="pv-text-subdued-inverse"><strong>.pv-text-subdued-inverse</strong><br>
Use subdued inverse text to reduce emphasis on dark backgrounds.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></p></div>
<div class="pv-text-brand-inverse pv-surface-brand pv-inset-square"><strong>.pv-text-brand-inverse</strong><br>
Use inverse brand text to apply the brand color on dark backgrounds.<br>
<svg aria-hidden="true" class="pv-icon-24">
  <title>medical-shield</title>
  <use xlink:href="#medical-shield"></use>
</svg></div>

Inherit

Use the inherit utility to make an element’s content inherit the text color of its parent. Useful for overriding the default color of links and icons.

Inherit documentation

HTML

<div class="pv-text-subdued pv-text-inherit pv-flow">
  <p><a href="#inherit">Inherit documentation</a></p>
  <svg aria-hidden="true" class="pv-icon-24">
      <title>user-circle</title>
      <use xlink:href="#user-circle"></use>
    </svg>
</div>

Surface

Use surface utilities to change the background color of an element.

Example
Containers with different background colors.

.pv-surface

.pv-surface-accent

.pv-surface-brand-accent

.pv-surface-brand

.pv-surface-brand-inverse

.pv-surface-warning

.pv-surface-critical

.pv-surface-brand-gradient

HTML

<div class="pv-surface pv-bordered pv-inset-square">
  <strong>.pv-surface</strong>
</div>
<div class="pv-surface-accent pv-bordered pv-inset-square">
  <strong>.pv-surface-accent</strong>
</div>
<div class="pv-surface-brand pv-text-inverse pv-inset-square">
  <strong>.pv-surface-brand</strong>
</div>
<div class="pv-surface-brand-inverse pv-text-inverse pv-inset-square">
  <strong>.pv-surface-brand-inverse</strong>
</div>
<div class="pv-surface-warning pv-inset-square">
  <strong>.pv-surface-warning</strong>
</div>
<div class="pv-surface-brand-gradient pv-inset-square pv-text-inverse">
  <strong>.pv-surface-brand-gradient</strong>
</div>