Color System

Our color palette is designed to reflect our brand personality and values. Consistent application of these colors helps create a cohesive visual identity across all communications and touchpoints.

Color Palette

Click on any color below to see detailed usage guidelines, dos and don'ts, and examples.

Deep Green
#0D5630
--deep-green
▲

Do Use For

  • Text only, especially titles
  • Primary color for H1 headings
  • Primary text on white backgrounds
  • Important text elements

This is a Deep Green heading

This is Deep Green text on a white background.

Don't Use For

  • Fills or backgrounds
  • Text on dark backgrounds
  • Text on gold backgrounds
  • Container backgrounds

✗ Avoid using Deep Green as a background

Pairing Recommendations

  • Pair with White backgrounds
  • Combine with Royal Gold accents
  • Use with Black for secondary text
  • Avoid pairing with Sage Green
Deep Green + Royal Gold
Sage Green
#426653
--sage-green
▼

Do Use For

  • Background colors and fills
  • Primary container backgrounds
  • Navigation and section headers
  • Content containers

Sage Green as a background with White text

Don't Use For

  • Text elements
  • Small UI elements
  • Primary buttons
  • Icons

✗ Avoid using Sage Green for text

Pairing Recommendations

  • Always use with White text
  • Add Royal Gold accents
  • Use as background for Bronze Gold elements
  • Avoid pairing with Deep Green text
Sage Green + White text + Royal Gold accent
Royal Gold
#D4AF37
--royal-gold
▼

Do Use For

  • Primary gold for highlights
  • Lines and text accents
  • Background for primary buttons
  • Small fills and decorative elements
Royal Gold as an accent line
Primary Button

Don't Use For

  • Large background areas
  • Primary text
  • Overusing in a single design
  • Small text elements

✗ Avoid large Royal Gold backgrounds

Pairing Recommendations

  • Pair with Deep Green text
  • Use as accent with Sage Green backgrounds
  • Combine with White for high contrast
  • Works well with Black for subtle accents

Deep Green text with Royal Gold border
Bronze Gold
#B8860B
--bronze-gold
▼

Do Use For

  • Secondary gold for highlights
  • Borders and lines
  • Secondary elements and accents
  • Border color for secondary buttons
Secondary Button

Don't Use For

  • Primary elements
  • Large background areas
  • Text on light backgrounds
  • Main call-to-action elements

✗ Avoid Bronze Gold text on light backgrounds

Pairing Recommendations

  • Use with Deep Green text elements
  • Pair with White for contrast
  • Use with Royal Gold for hierarchical design
  • Works well as a subtle border element

Deep Green text with Bronze Gold border
Pure Gold
#F3CD29
--pure-gold
▼

Do Use For

  • Special emphasis elements
  • Decorative elements only
  • Highlight for interactive hover states
  • Special callouts and awards
Special Callout

Don't Use For

  • Primary interface elements
  • Text content
  • Large background areas
  • Regular UI components

✗ Avoid large Pure Gold backgrounds

Pairing Recommendations

  • Always pair with Deep Green text
  • Use sparingly alongside Royal Gold
  • Works as hover state for Royal Gold elements
  • Use for special attention elements only
Award Button
Black
#000000
--black
▼

Do Use For

  • Main text color for H2 headings
  • Primary paragraph text
  • High contrast elements
  • Default body text

H2 Heading in Black

This is standard paragraph text in Black.

Don't Use For

  • Large background areas
  • H1 headings (use Deep Green instead)
  • Buttons or interactive elements
  • Overshadowing brand colors

✗ Avoid large Black backgrounds

Pairing Recommendations

  • Use with White backgrounds
  • Pair with gold accents for emphasis
  • Works well with all brand colors
  • Use for body text with Deep Green headings

Deep Green Heading

Black paragraph text shows good hierarchy.
Medium Grey
#595959
--medium-grey
▼

Do Use For

  • H3 headings
  • Secondary paragraph text
  • Subheaders and support text
  • Subtle text elements

H3 Heading in Medium Grey

Secondary text in Medium Grey.

Don't Use For

  • Primary headings
  • Main content text
  • Button text
  • Interactive elements

✗ Avoid Medium Grey for primary headings

Pairing Recommendations

  • Use with Deep Green and Black for hierarchy
  • Pair with White backgrounds
  • Use for supporting text elements
  • Good for less important information

Main Heading

Subheading in Medium Grey

Main content text in Black.
Dark Grey
#181818
--dark-grey
▼

Do Use For

  • H4 headings
  • Paragraph text
  • Supporting content
  • Secondary information
H4 Heading in Dark Grey

Supporting text in Dark Grey.

Don't Use For

  • Primary headings
  • Button text
  • Links
  • Background elements

✗ Avoid Dark Grey backgrounds

Pairing Recommendations

  • Use with White backgrounds
  • Combine with Deep Green for primary elements
  • Use with Black for text hierarchy
  • Good for tertiary information

Main Heading

Primary text in Black.

Supporting details in Dark Grey.
White
#FFFFFF
--white
▼

Do Use For

  • Text on dark backgrounds
  • Contrast elements
  • Background for secondary containers
  • Primary text on sage-green backgrounds

White text on Sage Green background

Don't Use For

  • Text on light backgrounds
  • Text on gold colors
  • Subtle design elements
  • Where contrast is needed

✗ Avoid White text on light gold

Pairing Recommendations

  • Use with Sage Green backgrounds
  • Pair with Deep Green text
  • Use as background with gold accents
  • Main page background color

Deep Green text on White card
Warm Beige
#C5B9AB
--warm-beige
▼

Do Use For

  • Secondary container backgrounds
  • Neutral section dividers
  • Soft background areas
  • Content cards and panels

Warm Beige background with Deep Brown text

Don't Use For

  • Primary content areas
  • Text elements
  • High-contrast requirements
  • Call-to-action elements

Pairing Recommendations

  • Use with Deep Brown text
  • Pair with Royal Gold accents
  • Combine with Light Cream for depth
  • Works well with primary green colors
Deep Brown
#57473A
--deep-brown
▼

Do Use For

  • Secondary text elements
  • Strong accent backgrounds
  • Border and divider elements
  • Alternative to black for softer contrast

Deep Brown background with Light Cream text

Don't Use For

  • Primary headings
  • Large background areas
  • Low-contrast combinations
  • Primary interface elements

Pairing Recommendations

  • Pair with Light Cream or Warm Beige
  • Use as text on warm neutral backgrounds
  • Combine with Royal Gold for elegance
  • Works as secondary accent color
Medium Taupe
#A59788
--medium-taupe
▼

Do Use For

  • Secondary section backgrounds
  • Border and frame elements
  • Subtle container backgrounds
  • Alternative to grey tones

Medium Taupe background with Deep Brown text

Don't Use For

  • Primary content areas
  • Text elements
  • High-visibility elements
  • Call-to-action backgrounds

Pairing Recommendations

  • Use with Deep Brown or Sage Brown text
  • Pair with Light Cream for contrast
  • Combine with Royal Gold accents
  • Works well as neutral backdrop
Light Cream
#E6DFD4
--light-cream
▼

Do Use For

  • Subtle background areas
  • Alternative to white backgrounds
  • Content container backgrounds
  • Text on dark secondary colors

Light Cream background with Deep Brown text

Don't Use For

  • Text elements
  • High-contrast requirements
  • Primary interface elements
  • Buttons or interactive elements

Pairing Recommendations

  • Use with Deep Brown or Sage Brown text
  • Pair with darker secondary colors
  • Combine with Royal Gold accents
  • Works as gentle alternative to white
Sage Brown
#83735F
--sage-brown
▼

Do Use For

  • Secondary text elements
  • Accent backgrounds
  • Border and divider colors
  • Alternative to medium grey

Sage Brown background with Light Cream text

Don't Use For

  • Primary headings
  • Main content backgrounds
  • High-visibility elements
  • Primary interface components

Pairing Recommendations

  • Use with Light Cream text
  • Pair with Warm Beige backgrounds
  • Combine with Royal Gold for warmth
  • Works as text on light secondary colors

Key Color Combinations

These color combinations have been carefully selected for optimal readability, brand consistency, and visual impact. Always follow these patterns in your designs.

Text Hierarchy

  • H1: Deep Green
  • H2: Black
  • H3: Medium Grey
  • H4: Dark Grey
  • Body: Black

Containers

  • Primary: Sage Green with White text
  • Secondary: White with Deep Green text
  • Accents: Royal Gold or Bronze Gold
  • Never: Deep Green backgrounds

Buttons

  • Primary: Royal Gold background with White text
  • Secondary: White background with Bronze Gold border and Deep Green text
  • Hover: Pure Gold highlights

Secondary Colors

  • Warm Beige: Secondary container backgrounds with Deep Brown text
  • Deep Brown: Alternative to black for softer contrast
  • Medium Taupe: Neutral backgrounds and borders
  • Light Cream: Gentle alternative to white backgrounds
  • Sage Brown: Secondary text and accent elements

Critical Don'ts

  • Never use Sage Green for text
  • Never use Deep Green for backgrounds
  • Never use Pure Gold extensively
  • Never place Deep Green text on Sage Green backgrounds
  • Never use secondary colors for primary interface elements