Design system
Le design system zer0-mistakes, en direct — tokens, spécimens de fondation, jumeaux de composants et l'aller-retour Claude Design qui les maintient synchronisés avec le thème.
Table des matières
Un contrat visuel unique, énoncé une seule fois. Les tokens --zer0-* du thème se compilent dans chaque page de ce site, se reflètent dans un projet Claude Design pour le travail de conception, et sont publiés ici sous forme de CSS vivant et liable — maintenus synchronisés par une vérification de parité en CI.
Utilisez les tokens partout
Le design system est livré comme un unique point d’entrée en CSS pur. Liez-le depuis n’importe quel prototype, maquette ou page — sans Bootstrap, sans étape de build :
<link rel="stylesheet" href="https://zer0-mistakes.com/_design-system/styles.css">
<div style="color: var(--zer0-color-primary); border-radius: var(--zer0-radius-xl);">…</div>
Chaque fichier de tokens est également adressable individuellement — couleurs, typographie, espacement, rayons, points de rupture, ombres, mouvement, couches, thèmes.
Fondations, en direct
Chaque spécimen ci-dessous est la véritable carte du design system, rendue à partir des tokens publiés — pas une capture d’écran.
Composants
Les motifs emblématiques du thème existent deux fois à dessein : sous forme de Liquid + Sass qui rend ce site, et sous forme de jumeaux React pour le travail de conception dans Claude Design. Les jumeaux se rendent de façon interactive dans le projet Claude Design (le bundle de composants est compilé par l’application Design) ; leurs sources sont publiées ici.
| Composant | Source du thème | Spécification de design |
|---|---|---|
| Bouton | cta-button.html + Bootstrap .btn |
core/Button |
| Badge | post-type-badge.html + Bootstrap .badge |
core/Badge |
| Pile FAB | boutons retour en haut / chat / TOC / graphe | core/Fab |
| Carte | motif .card border-0 shadow-sm |
surfaces/Card |
| Carte de fonctionnalité | cartes de fonctionnalité de la page d’accueil | surfaces/FeatureCard |
| Carte d’article | post-card.html |
surfaces/PostCard |
| Encadré | callout.html |
feedback/Callout |
| Squelette | scintillement _skeleton.scss |
feedback/Skeleton |
| Champ de saisie | contrôles de formulaire Bootstrap + anneau de focus | forms/Input |
Chaque spécification est livrée avec une surface de types .d.ts et une invite d’utilisation .prompt.md aux côtés du .jsx — changez l’extension sur n’importe quel lien ci-dessus.
Designs de pages
Chaque écran de ce thème — la page d’accueil, les 24 layouts, le framework de navigation, les actualités, la recherche, le panneau latéral des paramètres — est également recréé comme un canevas de design navigable construit sur ces tokens :
- Thème zer0-mistakes — canevas de page (présentation Claude Design)
- Le canevas relie chaque écran à ses fichiers du dépôt, afin que la revue de design et l’implémentation pointent toujours vers la même source.
Comment cela reste fiable
_sass/tokens/dans le dépôt du thème est l’unique source de vérité ;/_design-system/en est le miroir publié.scripts/design-system-check.rbs’exécute en CI et échoue lorsque les deux divergent — noms de tokens et valeurs résolues.- Le contrat complet réside dans
_design-system/SYNC.md; guide de design dans_design-system/readme.md.
Vous voulez la galerie de composants interactive avec chaque thème appliqué ? Consultez l’aperçu du thème.