# Publier un back-office standard en open source : ce que couvre admin-design

Une base de back-office issue d’un frontend de plateforme : jetons sémantiques, coques de mise en page, composants partagés, pages standard et galerie. Licence MIT.

> Runlume propose un socle, des applications indépendantes et des services professionnels combinables. Fonctions, quotas et livrables suivent l’offre ou l’accord choisi. Les applications métier s’utilisent séparément ; leur collaboration respecte configuration et autorisations.

Page originale: https://runlume.app/fr/blog/admin-design-open-source

Guides développeurs · Back-office standard / Open source / Base front-end

Publication：2026-09-17 · Auteur：Équipe Runlume

Chaque projet de back-office reconstruit la même couche : connexion, mise en page, tableaux, arborescences, notifications, réglages, états vides et états d’erreur. Les couleurs, les espacements et les détails d’interaction divergent ensuite, et maintenir la cohérence coûte plus cher à chaque page ajoutée.

Nous avons rassemblé cette couche en une base réutilisable et l’avons publiée sous licence MIT : **admin-design**, la conception et l’implémentation d’un back-office standard extraites du frontend de la plateforme Runlume.

## Ce qu’elle couvre

- Thème et jetons sémantiques : la couleur passe uniquement par des classes utilitaires sémantiques, six palettes prédéfinies se combinent avec une couleur de base et une couleur de thème, et les modes clair et sombre suivent automatiquement.
- Trois coques de mise en page : barre latérale, en-tête plus barre latérale, et navigation supérieure. Largeur de la barre latérale, arrondi, transitions de page et ordre des actions d’en-tête sont réglables.
- Neuf pages de composants : contrôles de base, formulaires et sélecteurs, affichage de données, retours et superpositions, navigation et parcours, indicateurs et graphiques, icônes, thème et réglages, pages standard. La galerie sert à la fois de documentation et de surface de recette.
- Types de pages standard : tableau de bord, liste, détail, réglages, centre de notifications, connexion, inscription et récupération de mot de passe.
- Chinois et anglais d’origine, accès au clavier et réglages d’accessibilité, ainsi que la même recherche par palette de commandes que la documentation.

## Trois points d’entrée

- Page de présentation et vue d’ensemble du projet : [adesign.runlume.app](https://adesign.runlume.app)
- Documentation, avec les composants et les conventions d’ingénierie : [adoc.runlume.app](https://adoc.runlume.app)
- Démonstration en ligne avec deux comptes de test aux droits différents : [ago.runlume.app](https://ago.runlume.app)
- Code source et tickets : [github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## Pour qui, et où se situe la limite

Pour les équipes qui construisent leur propre back-office et ne veulent pas réécrire l’interface une seconde fois : copiez le dépôt, changez le nom dans `package.json`, remplacez le menu et les ressources de marque, puis branchez les données d’exemple sur votre API.

La base ne contient que la couche de design et d’interaction : ni API métier, ni implémentation d’authentification, ni modèle de permissions, ni règles métier. Les données d’exemple vivent en mémoire et sont réinitialisées au rechargement. Identité, envoi de fichiers, glisser-déposer dans les arborescences ou chargement différé sont injectés via des props : brancher un service réel revient à remplacer le rappel, sans modifier le composant.

## Pages associées

- [Plateforme](https://runlume.app/fr/platform)
- [Applications métier](https://runlume.app/fr/apps)
- [Développeurs](https://runlume.app/fr/developers)
- [À propos de Runlume](https://runlume.app/fr/about)