Getting Started

Welcome to the KMG Design System. This guide will help you set up a new project using our design standards. Whether you're starting a new internal application or adopting the design system in an existing project, the sections below cover everything you need.

Installation

The KMG Design System is built on Argon Dashboard (Bootstrap 5). Setting up a new project requires a mix of self-hosted assets (Argon Dashboard, Nucleo Icons) and standard libraries loaded from CDNs (Popper.js, Bootstrap, Font Awesome).

The key assets you need:

Asset Source Purpose
argon-dashboard.min.css Self-hosted Core layout and component styles
nucleo-icons.css / nucleo-svg.css Self-hosted Icon fonts
font-awesome.min.css CDN (cdnjs) Font Awesome icons
kmg-custom.css Self-hosted KMG-specific overrides and extensions
popper.min.js CDN (jsDelivr) Positioning engine (dropdowns, tooltips)
bootstrap.min.js CDN (jsDelivr) Interactive components (modals, collapses, tabs)
argon-dashboard.min.js Self-hosted Argon UI layer (sidebar, scrollbar)

The JavaScript files must be loaded in that order — Popper first, then Bootstrap, then Argon.

A complete starter template is included so you can copy-paste a working base layout and start building immediately.

Full installation guide →

Project Structure

All KMG projects follow a consistent directory structure regardless of technology stack. We support three primary stacks:

  • Python / Flask — app.py entry point, templates/ for Jinja2, static/ for assets
  • PHP / Slim Framework — html/ web root with app/src/ for PSR-4 source code and Twig templates
  • Ruby on Rails — standard Rails conventions with app/assets/, app/views/layouts/

Every project is expected to include:

  • A Dockerfile and docker-compose.yml for containerized deployment
  • A .gitlab-ci.yml for CI/CD pipelines
  • A README.md and CLAUDE.md for documentation
  • Self-hosted static assets (no external CDNs)
  • Keycloak OIDC integration where authentication is required

Full project structure guide →

Next Steps

Once your project is set up, explore the rest of the design system:

  • Guidelines — Color palette, typography, spacing, and iconography standards
  • Components — Reusable UI components with live previews and code snippets
  • Accessibility — WCAG guidelines and accessible component patterns
  • Working With This Template — A designer's guide to maintaining and extending the design system itself
On this page