Aller au contenu
TDS

Introduction

Système de Design de l’État

TDS est un système de design open source destiné aux services numériques publics du Tchad. Il fournit les fondations visuelles et techniques nécessaires à la création d’interfaces cohérentes, accessibles et adaptées aux usages gouvernementaux.

Tokens de design

Couleurs, typographie, espacement, ombres — définis une fois, utilisés partout.

Composants certifiés

Boutons, champs de formulaire, avec documentation complète et accessibilité garantie.

Multi-formats

Chaque token est disponible en TypeScript, JSON et CSS custom properties.

Multilingue

Prise en charge native du français et de l’arabe (RTL), avec polices institutionnelles dédiées.

Pourquoi un Design System d’État ?

Les services numériques gouvernementaux servent des millions de citoyens aux niveaux de littératie numérique très variés. Un Design System impose :

  • La cohérence — un citoyen reconnaît immédiatement qu’il est sur un service officiel.
  • L’accessibilité — les interfaces respectent WCAG 2.1 AA par défaut, pas par exception.
  • La fiabilité — les équipes développent plus vite car les choix de base sont déjà faits.
  • La confiance — un design sobre et institutionnel inspire la confiance dans les actes administratifs.

Principes fondateurs

1. HTML-first

TDS fonctionne sans JavaScript. Tous les composants de base sont utilisables en HTML pur avec des classes CSS. React et Vue sont des adaptations, pas des prérequis.

2. Sobre par défaut

Les interfaces d’État ne sont pas des landing pages startup. TDS évite les effets visuels superflus, les animations décoratives et les couleurs criardes. La sobriété est une marque de respect envers les citoyens.

3. Accessible ou inutilisable

Chaque token de couleur respecte les ratios de contraste WCAG AA. Chaque composant est testable au clavier et compatible avec les lecteurs d’écran courants.

4. Stable et versionné

TDS suit le versionnement sémantique strict. Aucune rupture d’API sans version majeure. Les institutions peuvent adopter TDS sans risquer de régressions silencieuses.

Ce que TDS n’est pas

  • ❌ Un framework UI — il ne remplace pas React, Vue ou Angular
  • ❌ Un générateur de pages — il ne définit pas la mise en page finale de vos applications
  • ❌ Une contrainte sur l’architecture backend
  • ❌ Une alternative aux frameworks CSS complets comme Tailwind

TDS est une fondation, pas un plafond. Il définit les règles communes et laisse aux équipes la liberté d’implémenter leurs interfaces propres.

Structure du Design System

@tds-tchad/core
├── tokens/          — Variables de design (couleurs, typo, spacing…)
│   ├── *.ts         — TypeScript (avec types inférés)
│   ├── *.json       — JSON (intégrations Style Dictionary)
│   └── *.css        — CSS custom properties
└── components/      — Tokens de composants
    ├── button/
    └── input/

Prochaine étape