Pelote
La couleur porte le sens, la forme porte la personnalité.
Pelote est le design language de beedywool.com, construit sur Material 3 Expressive : des rôles de couleur Material You, des formes organiques, une élévation par la teinte et un mouvement à ressort. Trois matières, un seul système.
Trois matières
Expressive est la référence. Plaza et Chrome changent la matière, jamais les composants ni les rôles de couleur.
Expressive
La référence. Teinte, formes expressives, pilules, mouvement à ressort.
Plaza
Wii U et 3DS : plastique doux et brillant, rayures fines, gel sur l'action principale, police arrondie.
Chrome
Y2K : métal poli, verre dépoli, halos, LEDs, angles vifs et Michroma en capitales.
Cinq principes
Ils tiennent en une phrase et décident de chaque écran.
La couleur porte le sens, la forme porte la personnalité.
Un geste principal par écran.
De la teinte, pas des ombres.
Toujours en état complet, jamais une coquille vide.
Écrit pour la personne, pas pour le système.
Les règles
Cinq sections qui couvrent le comportement, les variantes, la mise en page, le README GitHub et le travail avec un agent IA.
Règles UX
Hiérarchie, retours, états vides, formulaires, navigation, accessibilité, PWA, langues et personnalisation.
Lire la section 02Variantes M3E
Plaza et Chrome comme variantes de M3E : les recettes de matière, sans aucune teinte en dur.
Lire la section 03Layout
Classes de largeur, bento, largeur limitée avec volet, écrans pliables et espace vide.
Lire la section 04README GitHub
Le gabarit des README GitHub : banner, badges, sommaire, sections numérotées et footer.
Lire la section 05Règles IA
Ce qu'un agent doit respecter : icônes, code, PWA, layout, mouvement, couleurs, texte et README.
Lire la section ArchivéÉcarts entre les repos
Les divergences relevées entre portfolio, vps-admin et Stabilité, et la valeur retenue.
Lire la sectionLes composants
Chaque fiche montre l'aperçu Expressive, les exemples à faire et à éviter, puis les variantes Plaza et Chrome.
Les apps qui utilisent Pelote
Le portfolio, VPS Admin, PoGo Search et Stabilité partagent le même mark et les mêmes règles.
Portfoliocode
VPS Admindns
PoGo Searchmy_location
StabiliténutritionConstruire avec Pelote
Charger tokens.css, bundle.css et bundle.js, puis composer avec les classes du système. Rien à dessiner, rien à réinventer.
<link rel="stylesheet" href="ds/tokens.css">
<link rel="stylesheet" href="ds/bundle.css">
<script src="ds/bundle.js"><\/script>
<button class="btn btn-filled st">Redéployer</button>
<span class="chip ok"><i class="led"></i>Running</span>