Nous utilisons Google Analytics pour nos statistiques de fréquentation. Les cookies d'analyse ne sont déposés que si vous acceptez. Sans consentement, les statistiques sont estimées à partir de signaux sans cookie. Politique de cookies.
PDS · Design System
PDS est le langage de design propre à Protocore, extrait des produits que nous construisons et éprouvé en production. Dark-first, piloté par des tokens et documenté de bout en bout — les mêmes composants que ceux de nos produits et des dashboards de nos clients, packagés pour qu'une équipe les adopte en une après-midi.
Fonctionnalités
Des primitives aux compositions de pages complètes — 101 composants, chacun extrait d'un produit que nous livrons plutôt que conçu isolément. Si un composant figure dans PDS, il a déjà fait ses preuves : ce site, les démos produits et nos tableaux de bord clients reposent tous dessus.
Couleur, typographie, espacement et animation découlent d'une seule couche de tokens. Modifiez un token et tous les composants suivent — aucune surcharge par composant, aucune dérive entre les produits.
Un thème sombre et un thème clair, cinq couleurs d'accent, le tout piloté par les mêmes tokens. Décliner une marque, c'est échanger des tokens, pas forker — tous les produits de la famille reposent sur le même système.
Contraste, élévation et couleur sont d'abord travaillés sur le thème sombre ; le thème clair en dérive à partir des mêmes tokens. Résultat : un mode sombre qui paraît natif, pas simplement inversé.
Boutons, champs, listes de sélection, interrupteurs, curseurs et structure de champ — libellés, aides et erreurs inclus. Les états sont déjà conçus : focus, désactivé, invalide et chargement se comportent de la même façon dans tous les produits.
Stacks, grilles, séparateurs et coques de page composent les écrans sans CSS ad hoc. Les plus grands composants sont des compositions de pages complètes — patterns de hero, de section et de footer issus de pages que nous livrons.
En-têtes, onglets, fils d'Ariane et menus avec leur comportement responsive et clavier intégré. La navigation de ce site est le composant lui-même, pas une imitation.
Modales, sheets, tiroirs, popovers et infobulles sur un seul modèle de superposition — piégeage du focus, fermeture et empilement gérés une fois, de façon centralisée. Aucun produit n'embarque sa propre arithmétique de z-index.
Tableaux, listes, tuiles de statistiques, badges et timelines pour des produits qui vivent de chiffres. Les consoles opérateur de toute la famille tirent leur densité de ces composants.
Toasts, bannières, états vides, progression et skeletons — les états peu glamour, pensés dès le départ. Un produit bâti sur PDS apporte une réponse réfléchie au chargement, au vide et à l'échec.
Une échelle typographique éditoriale avec des libellés mono pour le registre technique — la voix que vous retrouvez sur toutes les surfaces Protocore. L'échelle repose sur des tokens : les produits l'ajustent sans sortir du système.
Durées et courbes d'accélération sont livrées sous forme de tokens, déjà utilisés par les composants. Les interfaces bougent de façon cohérente d'un produit à l'autre, car personne ne règle une animation à la main.
Contraste, états de focus et comportement au clavier sont intégrés aux composants, pas laissés en exercice. Livrez les valeurs par défaut, l'accessibilité suit.
Le style est du CSS statique résolu au build — pas de runtime CSS-in-JS, rien de calculé dans le navigateur. La couche de style n'ajoute aucun JavaScript à la page.
Le système est aussi livré sous forme de package CSS simple — tokens et classes utilitaires, sans React. Pages rendues côté serveur, e-mails et stacks hors React puisent à la même source de vérité.
Les tokens s'exportent pour le web en variables CSS, en preset Tailwind, et dans des formats natifs pour les plateformes mobiles. Une seule définition de la marque, utilisée partout où tourne le produit.
La couche React enveloppe les applications dans un provider et expose les tokens via des hooks — les composants lisent le thème et l'accent actifs au lieu de coder des valeurs en dur. Changer de thème relève de l'état, pas d'un rebuild.
Le mécanisme qui donne cinq accents à PDS donne son identité à un produit whitelabel : on remplace les valeurs des tokens, on garde les composants. Chaque application whitelabel de la famille en est la preuve.
Une carte lisible par machine de tout le système — composants, tokens, patterns — publiée sous forme de llms.txt. Pointez un LLM dessus et le code généré utilise de vrais composants PDS au lieu d'en inventer de plausibles.
Un serveur MCP expose directement le système aux agents de code : composants, props et tokens, interrogeables pendant que l'agent construit. Le design system répond aux questions au lieu d'être collé dans des prompts.
Chaque composant est documenté sur pds.protocore.io, avec exemples interactifs, props et code à copier-coller. La documentation repose sur PDS lui-même — ce que vous lisez est ce que vous livrez.
PDS est livré sous forme de packages versionnés, avec versions sémantiques et changelogs. Les mises à jour sont mûrement choisies : une équipe migre quand elle le décide, et le changelog dit précisément ce qui a changé.
Les packages s'installent depuis le registry npm privé de Protocore avec un token par équipe dans .npmrc — le workflow npm standard, limité aux équipes sous licence. Pas de fichiers zip embarqués, pas d'installation par copier-coller.
Une clé de licence signée se vérifie en local — aucun appel vers un serveur, aucune vérification réseau dans votre build. Les problèmes de licence apparaissent comme des avertissements en développement et ne cassent jamais une application en production.
PDS est propriétaire et sous licence par équipe. Demandez l'accès et nous vous configurons tout — packages, documentation et sources de tokens — pour qu'une équipe l'adopte en un après-midi.
FAQ
Par équipe, et non par utilisateur ou par projet. Une seule licence couvre toutes les personnes qui construisent avec PDS au sein d'une équipe : tokens, composants et documentation. Le coût dépend uniquement du nombre d'équipes qui l'adoptent, et les produits whitelabel que nous construisons pour vous s'appuient déjà dessus.
Depuis le registry privé npm.protocore.io. Les identifiants d'accès permettent à votre build de récupérer les packages @protocore ; ensuite, les tokens et les composants s'installent comme n'importe quelle dépendance.
Les tokens sont générés pour le web, .NET et le natif : une couleur ou un rayon signifie la même chose sur toutes les plateformes que vous livrez. Les composants sont fournis pour React, et une couche CSS indépendante du framework porte les mêmes tokens et classes pour les équipes qui n'utilisent pas React.
Dark-first et accessible par défaut — deux thèmes, cinq accents, le tout piloté par les tokens, avec du CSS zero-runtime : le style ne coûte rien au chargement. Les mêmes composants servent nos produits et les tableaux de bord de nos clients.
C'est prévu pour : une carte llms.txt et un serveur MCP permettent aux agents de lire le système et de construire correctement avec lui, et pds.protocore.io propose des exemples interactifs, des props et du code à copier-coller pour chaque composant et chaque token.
Tarification
PDS est licencié par équipe, et non par utilisateur ou par projet : une seule licence couvre toutes les personnes qui construisent avec, au sein de l'équipe — tokens, composants et documentation.
Commencez avec une équipe, puis étendez à d'autres à mesure que l'adoption progresse. Seul le nombre d'équipes qui construisent sur PDS détermine le coût.
Les produits whitelabel que nous construisons pour vous s'appuient déjà sur PDS — la licence autonome s'adresse aux équipes qui l'adoptent sur leurs propres produits.
La licence suit les équipes, pas les effectifs ni l'usage. Demandez l'accès et nous la dimensionnerons selon les équipes qui construiront avec PDS.
Évaluer
Parcourez le système complet sur pds.protocore.io — exemples interactifs, props et code à copier-coller pour chaque composant et chaque token.
Les design tokens sont générés pour le web, .NET et le natif : une couleur ou un rayon signifie la même chose sur toutes les plateformes que vous livrez.
PDS est licencié par équipe : une seule licence couvre toutes les personnes qui construisent avec, tokens, composants et documentation compris.
Les identifiants du registry privé npm.protocore.io pour installer les packages @protocore dont dépend votre build.
PDS est une solution propriétaire, sous licence par équipe. Demandez l'accès et nous vous accompagnons pour la mise en place.
Tout ce qui précède tourne dans des démos en production que nous pouvons vous présenter — en standalone, en whitelabel ou en plateforme unique. Dites-nous ce que vous construisez et nous vous montrerons le chemin le plus court.
