Colors

The design system uses a curated color palette derived from UGA’s brand guidelines. Colors are organized into primary, secondary (vibrant, rich, dark, neutral), and gray categories. To apply these colors in your markup, use the color utility classes (e.g. .util-color-red, .util-background-olympic) rather than referencing hex values directly.

Contrast ratios are calculated against white (#FFFFFF), gray (#DEDEDE), and black (#000000) backgrounds per WCAG 2.0. A ratio of 4.5:1 or higher passes AA for normal text; 3:1 passes AA for large text.

Primary Colors

Name	Hex	Sass Function	White Background	Gray Background	Black Background
Arch Black	`#000000`	`color(black)`	✓ 21	✓ 15.61	✗ 1
Bulldog Red	`#ba0c2f`	`color(red)`	✓ 6.6	✓ 4.91	⚠ 3.18
Chapel Bell White	`#ffffff`	`color(white)`	✗ 1	✗ 1.35	✓ 21

Secondary Colors — Vibrant

Color	Name	Hex	Sass Function	White Background	Gray Background	Black Background
	Glory Glory	`#e4002b`	`color(glory)`	✓ 4.85	⚠ 3.6	⚠ 4.33
	Lake Herrick	`#00a3ad`	`color(lake)`	⚠ 3.07	✗ 2.28	✓ 6.84

Secondary Colors — Rich

Color	Name	Hex	Sass Function	White Background	Gray Background	Black Background
	Hedges	`#b7bf10`	`color(hedges)`	✗ 2.01	✗ 1.49	✓ 10.47
	Olympic	`#004e60`	`color(olympic)`	✓ 9.3	✓ 6.91	✗ 2.26

Secondary Colors — Dark

Name	Hex	Sass Function	White Background	Gray Background	Black Background
Sanford	`#554f47`	`color(sanford)`	✓ 8.09	✓ 6.01	✗ 2.6
Herty Field	`#594a25`	`color(field)`	✓ 8.64	✓ 6.42	✗ 2.43
Athens	`#66435a`	`color(athens)`	✓ 8.35	✓ 6.21	✗ 2.52

Secondary Colors — Neutral

Name	Hex	Sass Function	White Background	Gray Background	Black Background
Stegeman	`#9ea2a2`	`color(stegeman)`	✗ 2.58	✗ 1.92	✓ 8.14
Creamery	`#d6d2c4`	`color(creamery)`	✗ 1.51	✗ 1.12	✓ 13.87
Odyssey	`#c8d8eb`	`color(odyssey)`	✗ 1.45	✗ 1.08	✓ 14.48

Grays

Name	Hex	Sass Function	White Background	Gray Background	Black Background
Light Gray	`#f2f2f2`	`color(light-gray)`	✗ 1.12	✗ 1.2	✓ 18.76
Gray	`#dedede`	`color(gray)`	✗ 1.35	✗ 1	✓ 15.61
Dark Gray	`#666666`	`color(dark-gray)`	✓ 5.74	⚠ 4.27	⚠ 3.66

Color Tints

The colors documented in the table below can be used at a variety of tint values. To use the tinted color, you should construct the color class as util-color-{colorName}__{tintValue} or util-background-{colorName}__{tintValue}. The following colors and tint values can be used in combination:

Sanford and Herty Field: 30% and 50%
Stegeman, Creamery, and Odyssey: 30%, 50%, and 75%

For example, to use Sanford as a background color at 50% the class would be util-background-sanford__50.

Name	Hex	Tint Level	White Background	Gray Background	Black Background
Sanford	`#88847e`	30%	⚠ 3.72	✗ 2.76	✓ 5.65
Sanford	`#aaa7a3`	50%	✗ 2.4	✗ 1.78	✓ 8.77
Herty Field	`#8b8066`	30%	⚠ 3.91	✗ 2.9	✓ 5.38
Herty Field	`#aca592`	50%	✗ 2.46	✗ 1.83	✓ 8.55
Stegeman	`#bbbebe`	30%	✗ 1.87	✗ 1.39	✓ 11.22
Stegeman	`#cfd1d1`	50%	✗ 1.53	✗ 1.14	✓ 13.69
Stegeman	`#e7e8e8`	75%	✗ 1.23	✗ 1.1	✓ 17.11
Creamery	`#e2e0d6`	30%	✗ 1.32	✗ 1.02	✓ 15.87
Creamery	`#ebe9e2`	50%	✗ 1.21	✗ 1.11	✓ 17.29
Creamery	`#f5f4f0`	75%	✗ 1.1	✗ 1.22	✓ 19.08
Odyssey	`#d9e4f1`	30%	✗ 1.29	✗ 1.05	✓ 16.32
Odyssey	`#e4ecf5`	50%	✗ 1.19	✗ 1.13	✓ 17.62
Odyssey	`#f1f5fa`	75%	✗ 1.09	✗ 1.23	✓ 19.18

Usage

Colors are accessed in SCSS via the color() function:

color: color(red);
background-color: color(olympic);

Tinted variants are available through the tint() function for neutral and dark secondary colors at 30%, 50%, and 75% levels.