Getting Started

Welcome to the Kaharagia Design System. This guide will help you start building consistent, accessible government websites and digital services.

Downloads

Download CSS files and assets for your project.

Accessibility

Guidelines for building accessible services.

Installation

Add the design system to your project via CDN or by downloading the CSS files.

Option 1: CDN (Recommended)

Add the following to the <head> of your HTML:

<link rel="stylesheet" href="https://design.kaharagia.org/tokens.css">
<link rel="stylesheet" href="https://design.kaharagia.org/kaharagia.css">

Option 2: Download

Download the CSS files from the Downloads page
Place them in your project's CSS or assets directory
Link them in your HTML <head> — tokens.css first, then kaharagia.css

Design Tokens

The design system uses CSS custom properties (variables) for all design decisions. This ensures consistency and makes theming straightforward. Here are some key tokens:

:root {
  /* Primary Brand - Kaharagian Red */
  --color-primary: #AD0908;

  /* Secondary - Kaharagian Gold */
  --color-gold: #FEBC0A;

  /* Typography */
  --font-body: 'Noto Sans', sans-serif;
  --text-base: 1.125rem;

  /* Spacing (4px base) */
  --space-4: 1rem;
  --space-8: 2rem;

  /* Focus state */
  --focus-color: var(--color-gold);
  --focus-text-color: #0B0C0C;
}

See the Colours, Spacing, and Typography pages for complete token references, or use the Cheat Sheet for a quick overview.

Browser Support

The design system supports modern browsers. Minimum supported versions:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Internet Explorer is not supported. The design system uses modern CSS features including CSS custom properties, Flexbox, and Grid.

What's Next?

Now that you're set up, explore the design system:

Foundations — Understand the core design tokens: colours, typography, spacing, and layout
Components — Browse the full library of UI components with code examples
Patterns — See best practices for common page layouts and interactions
Accessibility — Ensure your implementation meets WCAG 2.1 AA standards