salveignis/bauhaus-geometry

Bauhaus Geometry

La géométrie est ici un système de construction, pas une décoration. Chaque forme sur la page doit avoir un travail à faire, et la page doit toujours fonctionner si les formes sont retirées. Elle ne doit jamais gêner le travail de la page. Suivez ce workflow dans l'ordre.

1. Router selon le type de page

Partez de ce que la page doit faire, pas de son apparence. Lisez le guide correspondant, qui définit la limite de géométrie et la checklist d'acceptation.

La page est	Lire	Limite d'intensité
Accueil, marque, lancement, landing, éditorial	page-storefront.md	3
Catégorie, résultats de recherche, catalogue	page-plp.md	1
Détail produit	page-pdp.md	1, ou 2 derrière la galerie
Panier, paiement	page-checkout.md	0
Tableau de bord, admin, compte, paramètres	page-app.md	0 à 1

Un brief de marque n'augmente jamais cette limite. La page d'accueil d'une boutique peut être une affiche, mais son paiement ne le doit pas. Pour un site entier, définissez les limites par page avant de concevoir l'une d'elles.

Demandez ensuite quelle taille elle doit atteindre : 9 produits et 900 nécessitent des structures différentes. Construisez pour le catalogue réel et testez avec la plus grande taille attendue.

2. Définir le brief

Décidez de ces trois choses avant d'écrire le balisage. Déduisez-les du projet ; ne demandez que si la marque les laisse vraiment ouverts.

Intensité géométrique. Par défaut, utilisez le niveau le plus bas qui exprime la marque, dans la limite de la page.

Niveau	Nom	La géométrie couvre	Convient à
0	Typographique	Rien. L'échelle et la valeur de gris font le travail	Manifestes, droit, longues lectures
1	Marqueur	De petites formes encodent la catégorie ou l'état	SaaS, tableaux de bord, sciences, finance
2	Structure	La grille est visible ; une composition par écran	Studios, culture, éditorial
3	Affiche	Une composition domine une section	Lancements, événements, pages de marque

Une page a au maximum une section de niveau 3.

Niveau de profondeur. D0 est la valeur par défaut. N'ajoutez de la profondeur que lorsque « assemblage de pièces » ou « couches » est le message réel.

Niveau	Technique	Coût	Utilisation
D0	Tuiles et lignes plates	CSS uniquement	Presque partout
D1	Décalage dur (.bh-offset)	CSS uniquement	Boutons, cartes, accentuation
D2	Extrusion oblique (.bh-extrude)	Filtre CSS	Ensembles d'icônes, pictogrammes
D3	Dalles isométriques (.bh-iso)	CSS 3D	Héros, processus, architecture d'un produit
D4	WebGL (bh-three.js)	three.js, GPU	Un seul élément interactif central

Palette. Définissez data-bh-palette sur <html> ou toute section : primary, mono, signal, ember, pop, lab, night. Pour une marque, remplacez les six jetons de rôle (--bh-bg, --bh-fg, --bh-a1 à --bh-a4) et exécutez la vérification de contraste à l'étape 5. Le rouge, le bleu et le jaune sont une convention historique, pas une obligation.

3. Placer avant de dessiner

Lisez placement.md avant de placer toute forme. Il associe chaque emplacement de la page à ce qui lui appartient et donne des budgets numériques : une composition par page, une famille de formes par bloc, une taille de tuile, des formes qui se rejoignent sur les bords, pas de trous, pas de figure imbriquée dans une figure, des données en dehors de l'art. La liste des tuiles dit ce qui existe ; ce fichier dit où cela va.

Pour un héros, choisissez un mode artistique dans ce fichier (bloc, pile, frise, lignes ou cellules). Par défaut, utilisez un bloc construit avec composeBlock :

node scripts/generate.mjs block --cols 3 --rows 4 --seed 7 --colors fg,a1,a3,a2

Pour d'autres sections, composition.md donne des règles et des modes d'échec pour chaque archétype. Beaucoup sont des méthodes d'affiche, alors vérifiez d'abord le plan d'emplacements.

Si l'utilisateur fournit des références, mesurez-les avec la méthode dans reference-decoding.md avant de construire, puis comparez votre page avec les mêmes chiffres.

Lisez la théorie dans theory.md lorsque l'utilisateur veut une justification, lorsqu'une décision est contestée ou lorsque vous écrivez à propos du design.

4. Charger les pièces

Copiez depuis assets/ dans le projet. Ne les réécrivez pas de mémoire.

• bauhaus-geometry.css : jetons, tuiles, champs, profondeur, mouvement. Incluez-le toujours. Il est sûr à côté d'un système de design existant car tout se trouve dans des couches en cascade et préfixé par bh-.
• bauhaus-ui.css : widgets et sections. Ignorez-le si le projet a ses propres composants, et appliquez plutôt les tuiles et les jetons à ces composants.
• bauhaus-commerce.css avec bh-commerce.js : listes, filtres, pages produit, panier et paiement. Utilisez-le pour toute boutique.
• bh-shapes.js : formes personnalisées sous forme de données, y compris <bh-shape>.
• bh-geometry.js : générateurs et éléments personnalisés optionnels <bh-field>, <bh-bundle>, <bh-construct>.
• bh-three.js : D4 uniquement. Le fichier templates/construct-webgl.html montre le câblage.
• templates/landing.html : une page marketing complète pour commencer.
• bh-audit.js : une vérification dans le navigateur pour l'étape 6.

Privilégiez le balisage statique pour que la page n'ait pas besoin de JS au moment de l'exécution :

node scripts/generate.mjs field --preset bloom --cols 6 --rows 3 --seed 4
node scripts/generate.mjs bundle --preset u --n 9 --gap 5
node scripts/generate.mjs construct --preset pinwheel
node scripts/generate.mjs shape --name bean --size 64

Essayez plusieurs graines et conservez la meilleure ; un champ généré est un brouillon, alors échangez les tuiles individuelles à la main là où la composition est faible.

5. Construire

La tuile est l'atome. Un élément, une primitive, une rotation d'un quart de tour :

<i class="bh-t" data-s="quarter" data-f="a1" data-g="bg" data-r="90"></i>

• data-s forme : solid disc dot quarter half arch leaf tri peak diamond cross x stair octa ring notch bite bars slash arcs rings burst dots dotfan checker void
• data-f figure et data-g fond : bg fg a1 a2 a3 a4, ou définissez --f et --g directement
• data-r : 90 180 270
• Mise en page : .bh-field avec --cols, .bh-cells pour une grille dessinée, data-span="2" pour le contraste d'échelle

Besoin d'une forme que la liste ne contient pas ? Lisez d'abord shapes.md et décrivez-la à bh-shapes.js sous forme de données. Ne dessinez pas à la main des chemins SVG ou des détails de contour par-dessus une silhouette.

Trouvez du balisage prêt à l'emploi, puis adaptez sa copie et ses jetons :

• commerce.md : carte produit et ses états, variantes, ligne de panier, résumé de commande, champs de paiement
• sections.md : héros, bento, statistiques, processus, CTA, pied de page
• widgets.md : cartes, statistiques, grilles tarifaires, graphiques, accordéon, formulaire, onglets
• grids.md : le module, recettes de mise en page, règles responsives
• depth-3d.md : format de spécification pour les constructions, D3 et D4
• motion.md : recettes d'entrée, de défilement et cinétiques

Frameworks. Les classes et attributs se portent directement. En JSX, écrivez className et style={{ "--cols": 6 }}. Avec Tailwind, conservez la feuille de style principale et utilisez des valeurs arbitraires pour la mise en page autour d'elle. Rendez le balisage généré au moment de la construction si possible.

6. Vérifier

Exécutez ces commandes et corrigez ce qu'elles signalent avant de terminer :

node scripts/check-contrast.mjs            # palettes fournies
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # tout fichier contenant du SVG en ligne

Ensuite, dans un navigateur à 375 px et 1280 px, exécutez l'audit et parcourez la liste d'acceptation du guide de la page :

const { audit } = await import("./assets/bh-audit.js");
console.table(audit({ card: ".bh-product", name: ".bh-product__name", price: ".bh-price" }));

Vérifiez également :

• Comptez le héros : une famille de formes, une taille, pas de trous, et des formes qui se rejoignent. Placez-le à côté de vos références et comparez les chiffres.
• Supprimez toute la géométrie mentalement : la hiérarchie est-elle encore claire ?
• Chaque forme a un travail nommable : marquer, diviser, encadrer, encoder, naviguer ou ancrer.
• Les compositions décoratives ont aria-hidden="true" ; les formes de données ont une alternative textuelle.
• Pas de défilement horizontal, et les tuiles restent carrées.
• Le texte ne repose jamais sur une tuile de motif (bars, arcs, dots, burst).
• La couleur n'est jamais le seul porteur de sens. a3 et a4 sont décoratives sauf si elles sont étiquetées.
• Le mouvement s'arrête sous prefers-reduced-motion, et une seule chose boucle par vue.
• Les cibles interactives font au moins 44 px de haut, avec un focus visible.

Règles strictes

Droits. Utilisez le style, jamais les œuvres. Voir rights.md avant de nommer, d'ajouter des images ou d'adapter une référence.

• Ne reproduisez jamais une œuvre d'art, une affiche, un logo ou une composition spécifique, qu'elle soit historique ou contemporaine. Une image de référence informe uniquement sur les principes : changez la structure, pas seulement les couleurs.
• N'utilisez jamais le sigle du Bauhaus de 1922, les logos de musées, ni les photos de bâtiments, meubles ou personnes historiques, sauf si l'utilisateur fournit des fichiers sous licence.
• Ne nommez pas le produit d'un client « Bauhaus », et n'impliquez pas d'affiliation avec une institution ou entreprise Bauhaus.
• Polices : par défaut, utilisez les piles fournies, qui référencent Jost, Archivo et Space Grotesk (SIL OFL) sous licence ouverte. Ne livrez pas de polices commerciales sans licence.

Forme.

• Remplissages plats, traits fins et bords durs. Pas de dégradés sur les figures, d'ombres douces, de glassmorphisme ou de cartes arrondies. Les courbes viennent de la géométrie, pas de border-radius sur les conteneurs.
• Mise en page asymétrique : texte aligné à gauche et poids décentré. Évitez un héros centré avec des formes flottant autour.
• Un accent saturé doit dominer chaque vue. Trois couleurs primaires égales donnent l'impression d'un jouet.
• Le contraste d'échelle est requis : associez une très grande forme à de très petites.
• Variez le vocabulaire en le restreignant. Cinq formes bien utilisées battent les vingt-cinq d'un coup.

Échelle. Ne jugez jamais une liste à partir d'une démo de neuf articles. Essayez beaucoup d'articles, des noms longs, des images manquantes et un résultat vide avant de déclarer terminé.

Échecs courants.

Échec	Correctif
Des formes aléatoires dispersées autour du contenu	Construisez un bloc avec composeBlock et supprimez le reste
Figure imbriquée dans une figure	Faites de l'objet lui-même la forme, s'étendant sur 2×2
Traits fins sur chaque section	Encadrez une section et utilisez l'espace pour les autres
Tuiles égales couvrant tout, comme du papier peint	Ajoutez une grande portée, ajoutez des vides, réduisez la zone
Couleurs primaires sur chaque élément	Utilisez un seul accent ; le reste est encre et papier
La géométrie lutte contre le texte	Baissez l'intensité d'un niveau
Police « Bauhaus » partout	Utilisez un grotesque neutre pour le texte, un sans géométrique pour l'affichage uniquement
Scène isométrique qui ne dit rien	Utilisez D0 à moins que les parties ne correspondent à des concepts réels
Forme avec un bout ou un fragment parasite	Reconstruisez-la avec bh-shapes.js : une coupe, pas un trait
Mise en page éditoriale appliquée à une boutique	Routez par type de page : prix et action d'abord
Ajout en un clic qui choisit une variante que personne n'a choisie	Lien vers les options lorsqu'il y en a plus d'une