salveignis/bauhaus-geometry

Bauhaus-Geometrie

Geometrie ist hier ein Bausystem, keine Dekoration. Jede Form auf der Seite muss eine Aufgabe erfüllen, und die Seite muss auch dann noch funktionieren, wenn die Formen entfernt werden. Sie darf außerdem niemals die Aufgabe der Seite behindern. Befolgen Sie diesen Workflow in der angegebenen Reihenfolge.

1. Nach Seitentyp navigieren

Beginnen Sie mit der Aufgabe der Seite, nicht mit dem Aussehen. Lesen Sie die passende Anleitung, die das Geometrie-Limit und die Akzeptanz-Checkliste festlegt.

Die Seite ist	Lesen	Intensitätslimit
Home, Brand, Launch, Landing, Editorial	page-storefront.md	3
Kategorie, Suchergebnisse, Katalog	page-plp.md	1
Produktdetail	page-pdp.md	1, oder 2 hinter der Galerie
Warenkorb, Checkout	page-checkout.md	0
Dashboard, Admin, Konto, Einstellungen	page-app.md	0 bis 1

Ein Brand Brief erhöht dieses Limit nie. Die Startseite eines Shops darf ein Poster sein, der Checkout nicht. Legen Sie für eine gesamte Website die Limits pro Seite fest, bevor Sie mit dem Design beginnen.

Fragen Sie dann, welche Größe erreicht werden muss: 9 Produkte und 900 benötigen unterschiedliche Strukturen. Bauen Sie für den echten Katalog und testen Sie mit der größten erwarteten Größe.

2. Brief festlegen

Legen Sie diese drei Dinge fest, bevor Sie Markup schreiben. Leiten Sie sie aus dem Projekt ab; fragen Sie nur nach, wenn die Marke sie wirklich offen lässt.

Geometrie-Intensität. Standardmäßig die niedrigste Stufe, die die Marke ausdrückt, innerhalb des Seitenlimits.

Stufe	Name	Geometrie bedeckt	Geeignet für
0	Typ	Nichts. Maßstab und Grauwert arbeiten	Manifeste, Recht, lange Texte
1	Marker	Kleine Formen kodieren Kategorie oder Zustand	SaaS, Dashboards, Wissenschaft, Finanzen
2	Struktur	Raster ist sichtbar; eine Komposition pro Bildschirm	Studios, Kultur, Editorial
3	Poster	Eine Komposition dominiert einen Abschnitt	Launches, Events, Brand-Seiten

Eine Seite hat höchstens einen Abschnitt der Stufe 3.

Tiefenstufe. D0 ist der Standard. Fügen Sie Tiefe nur hinzu, wenn „sich zusammensetzende Teile“ oder „Schichten“ die tatsächliche Botschaft sind.

Stufe	Technik	Kosten	Verwendung
D0	Flache Kacheln und Linien	Nur CSS	Fast überall
D1	Harter Versatz (.bh-offset)	Nur CSS	Buttons, Karten, Betonung
D2	Schräge Extrusion (.bh-extrude)	CSS-Filter	Symbolsätze, Piktogramme
D3	Isometrische Platten (.bh-iso)	CSS 3D	Helden, Prozesse, Architektur eines Produkts
D4	WebGL (bh-three.js)	three.js, GPU	Nur ein interaktives Herzstück

Palette. Setzen Sie data-bh-palette auf <html> oder einem beliebigen Abschnitt: primary, mono, signal, ember, pop, lab, night. Überschreiben Sie für eine Marke die sechs Rollen-Tokens (--bh-bg, --bh-fg, --bh-a1 bis --bh-a4) und führen Sie den Kontrastcheck in Schritt 5 durch. Rot, Blau und Gelb sind eine historische Konvention, keine Anforderung.

3. Platzieren, bevor Sie zeichnen

Lesen Sie placement.md, bevor Sie eine Form platzieren. Es ordnet jedem Seitenbereich zu, was dorthin gehört, und gibt numerische Budgets: eine Komposition pro Seite, eine Formfamilie pro Block, eine Kachelgröße, Formen, die über Kanten verbinden, keine Löcher, keine Figur in einer Figur, Daten außerhalb der Kunst. Die Kachelliste sagt, was existiert; diese Datei sagt, wohin es geht.

Wählen Sie für einen Hero einen Kunstmodus dort (Block, Stapel, Fries, Linien oder Zellen). Standardmäßig ein Block, der mit composeBlock erstellt wurde:

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

Für andere Abschnitte gibt composition.md Regeln und Fehlermodi für jeden Archetyp. Viele sind Postermethoden, überprüfen Sie also zuerst die Bereichszuordnung.

Wenn der Benutzer Referenzen liefert, messen Sie diese mit der Methode in reference-decoding.md, bevor Sie bauen, und vergleichen Sie dann Ihre Seite mit denselben Zahlen.

Lesen Sie die Theorie in theory.md, wenn der Benutzer Begründungen wünscht, wenn eine Entscheidung umstritten ist oder wenn Sie über das Design schreiben.

4. Teile laden

Kopieren Sie aus assets/ in das Projekt. Schreiben Sie sie nicht aus dem Gedächtnis neu.

• bauhaus-geometry.css: Tokens, Kacheln, Felder, Tiefe, Bewegung. Immer einbinden. Es ist sicher neben einem bestehenden Designsystem, da alles in Kaskadenschichten sitzt und mit bh- präfigiert ist.
• bauhaus-ui.css: Widgets und Abschnitte. Überspringen Sie es, wenn das Projekt eigene Komponenten hat, und wenden Sie stattdessen Kacheln und Tokens auf diese Komponenten an.
• bauhaus-commerce.css mit bh-commerce.js: Listings, Filter, Produktseiten, Warenkorb und Checkout. Für jeden Shop verwenden.
• bh-shapes.js: Benutzerdefinierte Formen als Daten, einschließlich <bh-shape>.
• bh-geometry.js: Generatoren und optionale benutzerdefinierte Elemente <bh-field>, <bh-bundle>, <bh-construct>.
• bh-three.js: Nur D4. templates/construct-webgl.html zeigt die Verdrahtung.
• templates/landing.html: Eine vollständige Marketingseite als Startpunkt.
• bh-audit.js: Ein In-Browser-Check für Schritt 6.

Bevorzugen Sie statisches Markup, damit die Seite kein Laufzeit-JS benötigt:

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

Probieren Sie mehrere Seeds und behalten Sie den besten; ein generiertes Feld ist ein Entwurf, also tauschen Sie einzelne Kacheln manuell aus, wo die Komposition schwach ist.

5. Bauen

Die Kachel ist das Atom. Ein Element, eine Primitive, eine Vierteldrehung:

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

• data-s Form: 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 Figur und data-g Grund: bg fg a1 a2 a3 a4, oder setzen Sie --f und --g direkt
• data-r: 90 180 270
• Layout: .bh-field mit --cols, .bh-cells für ein gezeichnetes Raster, data-span="2" für Maßstabskontrast

Fehlt eine Form in der Liste? Lesen Sie zuerst shapes.md und beschreiben Sie sie bh-shapes.js als Daten. Zeichnen Sie keine SVG-Pfade oder Strichtdetails von Hand auf eine Silhouette.

Finden Sie fertiges Markup und passen Sie dann dessen Text und Tokens an:

• commerce.md: Produktkarte und ihre Zustände, Varianten, Warenkorbzeile, Bestellübersicht, Checkout-Felder
• sections.md: Hero, Bento, Statistiken, Prozess, CTA, Footer
• widgets.md: Karten, Statistiken, Preispläne, Diagramme, Graph, Akkordeon, Formular, Tabs
• grids.md: Das Modul, Layout-Rezepte, responsive Regeln
• depth-3d.md: Spezifikationsformat für Konstrukte, D3 und D4
• motion.md: Eingangs-, Scroll- und kinetische Rezepte

Frameworks. Klassen und Attribute übertragen sich direkt. In JSX schreiben Sie className und style={{ "--cols": 6 }}. Mit Tailwind behalten Sie das Kern-Stylesheet und verwenden beliebige Werte für das Layout darum herum. Rendern Sie generiertes Markup nach Möglichkeit zur Build-Zeit.

6. Verifizieren

Führen Sie diese aus und beheben Sie, was sie melden, bevor Sie fertig sind:

node scripts/check-contrast.mjs            # gebündelte Paletten
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # jede Datei mit inline SVG

Führen Sie dann in einem Browser bei 375px und 1280px das Audit durch und arbeiten Sie die Akzeptanzliste der Seitenanleitung ab:

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

Prüfen Sie auch:

• Zählen Sie den Helden: eine Formfamilie, eine Größe, keine Löcher und Formen, die sich verbinden. Stellen Sie ihn neben Ihre Referenzen und vergleichen Sie die Zahlen.
• Entfernen Sie die gesamte Geometrie gedanklich: Ist die Hierarchie immer noch klar?
• Jede Form hat eine benennbare Aufgabe: markieren, teilen, einrahmen, codieren, navigieren oder verankern.
• Dekorative Kompositionen haben aria-hidden="true"; Datenformen haben eine Textalternative.
• Kein horizontaler Scrollbalken, und Kacheln bleiben quadratisch.
• Text liegt niemals auf einer Musterkachel (bars, arcs, dots, burst).
• Farbe ist niemals der einzige Bedeutungsträger. a3 und a4 sind dekorativ, sofern nicht gekennzeichnet.
• Bewegung stoppt unter prefers-reduced-motion, und nur eine Sache schleift pro Ansicht.
• Interaktive Ziele sind mindestens 44px hoch, mit sichtbarem Fokus.

Harte Regeln

Rechte. Verwenden Sie den Stil, niemals die Werke. Lesen Sie rights.md, bevor Sie benennen, Bilder hinzufügen oder eine Referenz anpassen.

• Reproduzieren Sie niemals ein bestimmtes Kunstwerk, Poster, Logo oder eine Komposition, weder historisch noch zeitgenössisch. Ein Referenzbild informiert nur über Prinzipien: Ändern Sie die Struktur, nicht nur die Farben.
• Verwenden Sie niemals das Bauhaus-Signet von 1922, Museumslogos oder Fotos von historischen Gebäuden, Möbeln oder Personen, es sei denn, der Benutzer stellt lizenzierte Dateien zur Verfügung.
• Kennzeichnen Sie das Produkt eines Kunden nicht als „Bauhaus“ und implizieren Sie keine Zugehörigkeit zu einer Bauhaus-Institution oder -Firma.
• Schriftarten: Standardmäßig die gebündelten Stapel, die auf die offen lizenzierten Jost, Archivo und Space Grotesk (SIL OFL) verweisen. Liefern Sie keine kommerziellen Revivals ohne Lizenz aus.

Form.

• Flache Füllungen, Haarstriche und harte Kanten. Keine Verläufe auf Figuren, weiche Schatten, Glassmorphismus oder abgerundete Karten. Kurven kommen von der Geometrie, nicht von border-radius auf Containern.
• Asymmetrisches Layout: linksbündiger Text und außermittige Gewichtung. Vermeiden Sie einen zentrierten Helden mit schwebenden Formen darum herum.
• Ein gesättigter Akzent sollte jede Ansicht dominieren. Drei gleichrangige Primärfarben wirken wie ein Spielzeug.
• Maßstabskontrast ist erforderlich: Kombinieren Sie eine sehr große Form mit sehr kleinen.
• Variieren Sie den Wortschatz, indem Sie ihn einschränken. Fünf gut eingesetzte Formen schlagen alle fünfundzwanzig auf einmal.

Maßstab. Beurteilen Sie ein Listing niemals anhand einer Demo mit neun Artikeln. Testen Sie mit vielen Artikeln, langen Namen, fehlenden Bildern und einem leeren Ergebnis, bevor Sie es als fertig bezeichnen.

Häufige Fehler.

Fehler	Lösung
Zufällige Formen über Inhalte verstreut	Bauen Sie einen Block mit composeBlock, und löschen Sie den Rest
Figur in einer Figur verschachtelt	Machen Sie das Objekt selbst zur Form, die 2×2 überspannt
Haarstriche in jedem Abschnitt	Rahmen Sie einen Abschnitt ein, und verwenden Sie für die anderen Abstand
Gleiche Kacheln bedecken alles wie Tapeten	Fügen Sie eine große Spanne hinzu, fügen Sie Leerräume hinzu, reduzieren Sie die Fläche
Primärfarben auf jedem Element	Verwenden Sie einen Akzent; der Rest ist Tinte und Papier
Geometrie kämpft mit dem Text	Reduzieren Sie die Intensität um eine Stufe
„Bauhaus“-Schriftart überall	Verwenden Sie eine neutrale Grotesk für Text, geometrische Sans nur für Auszeichnungen
Isometrische Szene, die nichts sagt	Verwenden Sie D0, es sei denn, die Teile entsprechen echten Konzepten
Form mit einem überstehenden Stummel oder Splitter	Bauen Sie sie mit bh-shapes.js neu: ein Schnitt, kein Strich
Editorial-Layout auf einen Shop angewendet	Nach Seitentyp navigieren: Preis und Aktion zuerst
Ein-Klick-Kauf wählt eine Variante, die niemand gewählt hat	Verlinken Sie zu Optionen, wenn es mehr als eine gibt