DESIGN SYSTEM
Un seul système, tous les écrans.
Chaque bouton, badge et couleur de Pier vient de la même source : cette page. Aucun composant dupliqué, aucun style ponctuel, ce que vous voyez ici est exactement ce qui tourne en production.
MARQUE
Logomark
Un seul symbole, hérite de la couleur du texte environnant. Se lit pareil sur n'importe quelle surface, claire ou sombre.
COULEUR
Notre palette.
Un fond sombre et concentré, une seule couleur signal qui ne se dispute jamais l'attention, pensée pour les sessions longues, pas pour une page vitrine.
Fond
Texte
Carte
Popover
Primaire
Secondaire
Estompé
Accent
Destructif
Signal
Beacon
Bordure
TYPOGRAPHIE
Sans pour lire, mono pour les données.
Les titres et le corps de texte utilisent la police système sans-serif ; tout ce qui est numérique, technique ou généré par machine (slugs, horodatages, logs) bascule en monospace.
Amarrez les conteneurs, larguez les amarres, livrez
Amarrez les conteneurs, larguez les amarres, livrez
Amarrez les conteneurs, larguez les amarres, livrez
Amarrez les conteneurs, larguez les amarres, livrez
Amarrez les conteneurs, larguez les amarres, livrez
PRINCIPES
Les règles derrière les pixels.
Ce ne sont pas des préférences esthétiques, mais des contraintes que chaque écran doit respecter avant d'être livré.
Réutiliser, jamais recréer
Chaque écran s'appuie sur ce package. S'il manque une variante à un composant, on l'étend une fois pour toutes, on ne fork jamais une copie locale.
Coins carrés
Zéro border-radius sur tout le produit. Boutons, cartes, dialogs, avatars : des angles droits, sans exception.
Des tokens, pas des valeurs codées en dur
Couleurs, espacements et rayons sont des variables partagées, jamais des valeurs isolées. On en change une, toute l'app se re-thème, clair et sombre.
Accessible par défaut
Dialogs, menus déroulants, onglets et switches embarquent la navigation clavier et la gestion du focus dès le départ, pas ajoutées après coup.
COMPOSANTS
En direct, pas des captures.
Chaque élément ci-dessous est le composant réel, rendu sur cette page, pas une maquette.
Boutons
Badges
Champs de formulaire
Retours visuels
Surfaces
6 containers · Online
No project yet
Connect a repo to deploy your first app.
ICÔNES
Un seul registre curé.
Chaque icône du produit vient de Phosphor Icons, sélectionnée à la main pour former un ensemble cohérent.