DGA Design SystemSaudi DGA design system

CSS utilities, components, and optional JavaScript for government digital services.

🎨

Design tokens

Colors, typography, spacing, grid, radius, and width/height utilities aligned with DGA guidelines.

🧩

Buttons, alerts, forms, navbar, cards, tables, and more — CSS-first with optional JavaScript.

🌐

Built for Arabic government websites with IBM Plex Sans Arabic and RTL-friendly patterns.

⚡

Use interactive `` elements in any framework, or legacy JS classes when needed.

bash

npm install @waaelg/dga-design-system

import '@waaelg/dga-design-system/style.css';
import '@waaelg/dga-design-system'; // registers <dga-*> web components