Colors

The GT Design System color palette is built around Georgia Tech's official brand colors, ensuring consistency and brand compliance across all digital properties.

Primary Colors

The foundation of the GT color system, used for primary actions and brand recognition.

GT Gold (Primary)

#B3A369 • gt-color-primary-gold

GT Navy (Primary)

#003057 • gt-color-primary-navy

Secondary Colors

Extended palette for supporting elements and accent colors.

GT Blue

#0F446C • gt-color-secondary-blue

Light Gold

#EAAA00 • gt-color-secondary-gold-light

Dark Gold

#857437 • gt-color-secondary-gold-dark

Semantic Colors

Colors that convey meaning and state in the interface.

Success

#28A745 • gt-color-semantic-success

Warning

#FFC107 • gt-color-semantic-warning

Error

#DC3545 • gt-color-semantic-error

Info

#17A2B8 • gt-color-semantic-info

Neutral Colors

Grayscale palette for text, backgrounds, and borders.

White

#FFFFFF • gt-color-neutral-white

Gray 100

#F8F9FA • gt-color-neutral-gray-100

Gray 200

#E9ECEF • gt-color-neutral-gray-200

Gray 300

#DEE2E6 • gt-color-neutral-gray-300

Gray 400

#CED4DA • gt-color-neutral-gray-400

Gray 500

#ADB5BD • gt-color-neutral-gray-500

Gray 600

#6C757D • gt-color-neutral-gray-600

Gray 700

#495057 • gt-color-neutral-gray-700

Gray 800

#343A40 • gt-color-neutral-gray-800

Gray 900

#212529 • gt-color-neutral-gray-900

Black

#000000 • gt-color-neutral-black

Usage Guidelines

Color Contrast

All color combinations meet WCAG 2.1 AA accessibility standards:

• Text on Gold: Use navy or black text
• Text on Navy: Use white or light gray text
• Text on Light Backgrounds: Use dark grays or navy
• Text on Dark Backgrounds: Use white or light grays

Brand Compliance

Colors follow the official Georgia Tech Brand Guidelines:

• GT Gold (#B3A369) is the primary brand color
• GT Navy (#003057) provides strong contrast and authority
• Secondary colors should be used sparingly for accents only

Implementation

CSS Custom Properties

.primary-button {
  background-color: var(--gt-color-primary-gold);
  color: var(--gt-color-neutral-white);
}

.text-primary {
  color: var(--gt-color-primary-navy);
}

JavaScript/TypeScript

import { GtColorPrimaryGold, GtColorPrimaryNavy } from '@gtalumni-la/tokens';

const buttonStyles = {
  backgroundColor: GtColorPrimaryGold,
  color: GtColorPrimaryNavy,
};

SCSS Variables

.navigation {
  background-color: $gt-color-primary-navy;
  border-bottom: 2px solid $gt-color-primary-gold;
}

Accessibility

Contrast Ratios

All color combinations have been tested for accessibility:

Foreground	Background	Ratio	Grade
Navy	Gold	4.8:1	AA
White	Navy	15.6:1	AAA
Gray 700	White	9.7:1	AAA
Gold	Navy	4.8:1	AA

Color Blindness

The GT color palette has been tested with various forms of color blindness:

• Protanopia: ✅ Distinguishable
• Deuteranopia: ✅ Distinguishable
• Tritanopia: ✅ Distinguishable

Related

• Design Tokens Overview - All design tokens
• Typography - Text styling tokens
• Spacing - Layout spacing tokens
• Button Component - See colors in action