Colours

The Kaharagia colour palette consists of the official national colours: Kaharagian Red and Gold, supplemented with a neutral grey scale and semantic colours.

Primary Colours (Kaharagian Red)

Kaharagian Red (#AD0908) is the primary brand colour. It represents authority and the official nature of government services. Use it for headers, primary buttons, links, and key interactive elements.

#5C0504

900

#7A0706

800

#AD0908

Primary

#C41615

500

#D93534

400

#E66362

300

#F2A5A4

200

#FCEAEA

100

Secondary Colours (Kaharagian Gold)

Kaharagian Gold (#FEBC0A) is used sparingly as an accent colour. Its primary use is for focus states, using yellow backgrounds with black outlines for keyboard navigation visibility.

#7A5A05

900

#9A7206

800

#FEBC0A

Gold

#FFD04A

400

#FFE07A

300

#FFEDAB

200

#FFF8E0

100

Semantic Colours

Use semantic colours to communicate status and feedback to users. Note that Warning uses the same hex value as Gold - use --color-warning for alerts and status messages, and --color-gold for decorative or brand purposes.

#00703C

Success

#FEBC0A

Warning

#D4351C

Error

#1D70B8

Info

Neutral Colours

The neutral palette provides greys for text, borders, and backgrounds. The darkest grey (#0B0C0C) is used for body text for maximum readability.

#0B0C0C

950

#1D1D1B

900

#2E2E2C

800

#505A5F

700

#626A6E

600

#8B9196

500

#B1B4B6

400

#D1D3D4

300

#E6E7E8

200

#F3F4F5

100

#F8F9FA

Usage Guidelines

Do

Use Kaharagian Red for primary interactive elements
Use Gold only for focus states and sparingly for accents
Use the darkest grey (#0B0C0C) for body text
Ensure sufficient colour contrast for accessibility (4.5:1 for normal text)

Don't

Don't use Gold as a background colour for large areas
Don't use light colours on light backgrounds
Don't rely on colour alone to convey meaning

CSS Variables

:root {
  /* Primary Brand - Kaharagian Red */
  --color-primary-900: #5C0504;
  --color-primary-800: #7A0706;
  --color-primary: #AD0908;
  --color-primary-500: #C41615;
  --color-primary-400: #D93534;
  --color-primary-300: #E66362;
  --color-primary-200: #F2A5A4;
  --color-primary-100: #FCEAEA;

  /* Secondary - Kaharagian Gold */
  --color-gold-900: #7A5A05;
  --color-gold-800: #9A7206;
  --color-gold: #FEBC0A;
  --color-gold-400: #FFD04A;
  --color-gold-300: #FFE07A;
  --color-gold-200: #FFEDAB;
  --color-gold-100: #FFF8E0;

  /* Neutral - Grays */
  --color-gray-950: #0B0C0C;
  --color-gray-900: #1D1D1B;
  --color-gray-800: #2E2E2C;
  --color-gray-700: #505A5F;
  --color-gray-600: #626A6E;
  --color-gray-500: #8B9196;
  --color-gray-400: #B1B4B6;
  --color-gray-300: #D1D3D4;
  --color-gray-200: #E6E7E8;
  --color-gray-100: #F3F4F5;
  --color-gray-50: #F8F9FA;

  /* Semantic */
  --color-success: #00703C;
  --color-warning: #FEBC0A;  /* Same as gold */
  --color-error: #D4351C;
  --color-info: #1D70B8;
}