Color System

Color System

Complete color system including primary, secondary, and accent colors with usage guidelines.

Color Ratio

60%
25%
10%
5%

We follow the 60-30-10 rule to ensure a comfortable visual balance.

Primary Colors

60%

Primary Blue

Trust, stability, intelligence

HEX

#007DC7

RGB

0, 125, 199

HSL

203, 100%, 39%

CMYK

100, 37, 0, 22

Pantone

299 C

25%

Teal

Innovation, growth, freshness

HEX

#5DCAAD

RGB

93, 202, 173

HSL

164, 50%, 58%

CMYK

54, 0, 14, 21

Pantone

338 C

10%

Warm Yellow

Energy, optimism, creativity

HEX

#F6C465

RGB

246, 196, 101

HSL

39, 89%, 68%

CMYK

0, 20, 59, 4

Pantone

142 C

5%

Deep Navy

Depth, sophistication, authority

HEX

#242139

RGB

36, 33, 57

HSL

248, 27%, 18%

CMYK

37, 42, 0, 78

Pantone

276 C

Extended Palette

A wide range of shades for use in complex interfaces.

#E6F3FA
#B3DCEF
#80C6E5
#4DAFDA
#1A99D0
#007DC7
#0066A3
#004F7F
#00385C
#002138
Primary Blue 50
Primary Blue 100
Primary Blue 200
Primary Blue 300
Primary Blue 400
Primary Blue 500
Primary Blue 600
Primary Blue 700
Primary Blue 800
Primary Blue 900

Semantic Colors

Success

Confirmations, positive actions

#22C55E

Warning

Cautions, pending states

#F59E0B

Error

Errors, destructive actions

#EF4444

Info

Information, help text

#3B82F6

Neutral Colors

#FFFFFF
#F9FAFB
#F3F4F6
#E5E7EB
#D1D5DB
#9CA3AF
#6B7280
#4B5563
#374151
#1F2937
#111827
#000000

Color Combinations

Sample pairings that are compatible with international accessibility standards.

Primary on White

High contrast, excellent readability for primary CTAs and headers.

Contrast Ratio
AAA 7.5:1

Teal on Navy

Strong visibility, great for dark mode accents and highlights.

Contrast Ratio
AAA 8.2:1

Navy on Teal

Vibrant pairing for secondary buttons and cards.

Contrast Ratio
AAA 8.2:1

Light & Dark Mode

Light Mode

Background: #FFFFFF
Text: #111827
Primary: #007DC7
Surface: #F3F4F6

Dark Mode

Background: #242139
Text: #FFFFFF
Primary: #5DCAAD
Surface: #1F2937

Accessibility

WCAG Standards

  • Achieve a 4.5:1 contrast ratio for normal text.
  • Achieve a 3:1 contrast ratio for large text.
  • Ensure full clarity for functional colors.

Design Tips

  • Do not use color as the only means of conveying information.
  • Test design with color blindness filters.
  • Maintain high contrast for interactive elements.