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

To use the design system in your project:

Download the CSS files from the Downloads page
Include the token and component stylesheets in your project
Follow the component documentation for usage examples

Design Tokens

The design system uses CSS custom properties (variables) for all design tokens. This ensures consistency and makes theming straightforward. See the Colours, Spacing, and Typography pages for complete token references.

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

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

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

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.