Skip to main content
Design System

Foreground Colors

Foreground Colors

Black Foreground Color

White Foreground Color

AX Gray Foreground Color

On Dark Foreground Color

On Light Foreground Color

Disabled Foreground Color

<!-- fg color black -->
<p class="u-fg-color-black">Black Foreground Color</p>
	
<!-- fg color white -->
<p class="u-fg-color-white">White Foreground Color</p>
		
<!-- fg color accessible gray -->
<p class="u-fg-color-ax-gray">AX Gray Foreground Color</p>
	
<!-- fg color on dark -->
<p class="u-fg-color-on-dark">On Dark Foreground Color</p>
	
<!-- fg color on light -->
<p class="u-fg-color-on-light">On Light Foreground Color</p>
	
<!-- fg color disabled -->
<p class="u-fg-color-disabled">Disabled Foreground Color</p>

Back to top

Alert Foreground Colors

Danger Alert Foreground Color

Info Alert Foreground Color

Success Alert Foreground Color

Warning Alert Foreground Color

<!-- fg color danger -->
<p class="u-fg-color-danger">Danger Alert Foreground Color</p>
	
<!-- fg color info -->
<p class="u-fg-color-info">Info Alert Foreground Color</p>
		
<!-- fg color success -->
<p class="u-fg-color-success">Success Alert Foreground Color</p>
	
<!-- fg color warning -->
<p class="u-fg-color-warning">Warning Alert Foreground Color</p>

Back to top