Principality of KaharagiaDesign System

Downloads

Get the Kaharagia Design System for your project. Choose the distribution method that works best for you.

CDN (Recommended for quick start)

Add this link to your HTML to get started immediately with the full design system:

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

For tokens only (CSS custom properties):

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

Direct Downloads

kaharagia.css

Complete design system with tokens, base styles, and components

Download

tokens.css

CSS custom properties only (colours, spacing, typography)

Download

NPM Package

Install via npm for use in modern JavaScript/TypeScript projects:

npm install @kaharagia/design-system

Then import in your project:

// Import full CSS
import '@kaharagia/design-system/kaharagia.css';

// Or import tokens only
import '@kaharagia/design-system/tokens.css';

Git Repository

Clone or fork the design system source code:

git clone https://github.com/kaharagia/design-system.git

View on GitHub

What's Included

kaharagia.css

  • All design tokens (colours, typography, spacing)
  • Base HTML element styles
  • Button components (.btn, .btn-primary, .btn-secondary, etc.)
  • Tag components (.tag, .tag-success, .tag-error, etc.)
  • Card components (.card, .card-featured)
  • Layout utilities (.container, .content-container)
  • Accessibility utilities (.skip-link, .visually-hidden)

tokens.css

  • CSS custom properties only
  • No component styles
  • Ideal for custom implementations
  • Includes responsive typography adjustments

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.

Versioning

The design system follows semantic versioning. Check the releases page for the latest version and changelog.

Current version: 1.0.0

Document Icons

Use these icons to indicate file types in download links and document lists. All icons are available at /icons/documents/[type].svg.

Audio iconAudioaudio.svg
CSV iconCSVcsv.svg
Excel iconExcelexcel.svg
File iconFilefile.svg
Generic iconGenericgeneric.svg
Geodata iconGeodatageodata.svg
iCal iconiCalical.svg
ICO iconICOico.svg
Image iconImageimage.svg
ODF iconODFodf.svg
ODG iconODGodg.svg
ODP iconODPodp.svg
ODS iconODSods.svg
ODT iconODTodt.svg
PDF iconPDFpdf.svg
PPT iconPPTppt.svg
RTF iconRTFrtf.svg
Text iconTexttext.svg
Video iconVideovideo.svg
Word iconWordword.svg
XML iconXMLxml.svg
ZIP iconZIPzip.svg

Usage

<!-- In your HTML -->
<img src="https://design.kaharagia.org/icons/documents/pdf.svg" alt="" width="48" height="48">

<!-- Download link with icon -->
<a href="/document.pdf" class="download-link">
  <img src="/icons/documents/pdf.svg" alt="">
  <span>Annual Report 2024 (PDF, 2.4MB)</span>
</a>