Colors

NPS-inspired color palette with background and text color utilities.

Palette

Name	Variable	Hex
Black	`$ug-black`	#1a1a1a
White	`$ug-white`	#ffffff
Warm Gray	`$ug-warm-gray`	#f5f2ed
Dark Gray	`$ug-dark-gray`	#333333
Medium Gray	`$ug-medium-gray`	#666666
Light Gray	`$ug-light-gray`	#e8e5e0
Red	`$ug-red`	#c1272d
Brown	`$ug-brown`	#4a3728
Green	`$ug-green`	#2d5a27
Blue	`$ug-blue`	#274a5a

Background Colors

Dark backgrounds automatically set white text.

Black

Brown

Red

Green

Blue

Warm Gray

<div class="ug-grid ug-grid--no-gap">
  <div class="ug-col--2 ug-bg--black ug-p--3"><span class="ug-label">Black</span></div>
  <div class="ug-col--2 ug-bg--brown ug-p--3"><span class="ug-label">Brown</span></div>
  <div class="ug-col--2 ug-bg--red ug-p--3"><span class="ug-label">Red</span></div>
  <div class="ug-col--2 ug-bg--green ug-p--3"><span class="ug-label">Green</span></div>
  <div class="ug-col--2 ug-bg--blue ug-p--3"><span class="ug-label">Blue</span></div>
  <div class="ug-col--2 ug-bg--warm-gray ug-p--3"><span class="ug-label" style="color:#333">Warm Gray</span></div>
</div>

Text Colors

Black text

Medium gray text

Red text

Green text

Blue text

<p class="ug-text--black">Black text</p>
<p class="ug-text--medium-gray">Medium gray text</p>
<p class="ug-text--red">Red text</p>
<p class="ug-text--green">Green text</p>
<p class="ug-text--blue">Blue text</p>

SCSS Customization

Override any color variable before importing:

$ug-black: #222;
$ug-red: #e74c3c;
$ug-font-family: "Custom Font", sans-serif;
@use "unigrid.css/src/scss/unigrid" as *;

Class Reference

Class	Description
`.ug-bg--black`	Black background, white text
`.ug-bg--brown`	Brown background, white text
`.ug-bg--red`	Red background, white text
`.ug-bg--green`	Green background, white text
`.ug-bg--blue`	Blue background, white text
`.ug-bg--warm-gray`	Warm gray background
`.ug-bg--white`	White background
`.ug-text--black`	Black text
`.ug-text--dark-gray`	Dark gray text
`.ug-text--medium-gray`	Medium gray text
`.ug-text--red`	Red text
`.ug-text--brown`	Brown text
`.ug-text--green`	Green text
`.ug-text--blue`	Blue text
`.ug-text--white`	White text