salveignis/bauhaus-geometry

包浩斯幾何

此處的幾何是一種建構系統，而非裝飾。頁面上的每個形狀都必須有工作要做，而且移除這些形狀後頁面仍必須能運作。它也絕不能妨礙頁面的主要工作。請依序遵循此工作流程。

1. 依頁面類型路由

從頁面必須做什麼開始，而不是它看起來應該如何。閱讀相符的指南，其中設定了幾何限制和驗收檢查清單。

頁面類型	閱讀	強度限制
首頁、品牌、發布、著陸、編輯	page-storefront.md	3
分類、搜尋結果、目錄	page-plp.md	1
產品詳情	page-pdp.md	1，或 2 但在圖庫之後
購物車、結帳	page-checkout.md	0
儀表板、管理、帳戶、設定	page-app.md	0 到 1

品牌簡報絕不能提高此限制。商店的首頁可以是海報，但其結帳頁面則不行。對於整個網站，請在設計任何頁面之前，為每個頁面設定限制。

然後詢問它必須達到多大量級：9 個產品和 900 個產品需要不同的結構。為真實的目錄建構，並以預期的最大規模進行測試。

2. 設定簡報

在編寫標記之前決定這三件事。從專案中推斷它們；只有當品牌真正留下開放選項時才詢問。

幾何強度。 預設為在頁面限制內，能表達品牌的最低層級。

層級	名稱	幾何涵蓋範圍	適合
0	文字	無。由縮放和灰度值完成工作	宣言、法律、長篇文章
1	標記	小形狀編碼類別或狀態	SaaS、儀表板、科學、金融
2	結構	網格可見；每畫面一個構圖	工作室、文化、編輯
3	海報	一個構圖主導一個區塊	發布、活動、品牌頁面

一個頁面最多只能有一個層級 3 的區塊。

深度層級。 D0 是預設值。僅當「組裝中的零件」或「圖層」是實際要傳達的訊息時，才添加深度。

層級	技術	成本	用途
D0	平面磁磚和線條	僅 CSS	幾乎所有情況
D1	硬偏移 (.bh-offset)	僅 CSS	按鈕、卡片、強調
D2	斜向擠壓 (.bh-extrude)	CSS 過濾器	圖示集、象形圖
D3	等角平板 (.bh-iso)	CSS 3D	主視覺、流程、產品架構
D4	WebGL (bh-three.js)	three.js, GPU	僅限一個互動核心

調色板。 在 <html> 或任何區塊上設定 data-bh-palette：primary、mono、signal、ember、pop、lab、night。對於品牌，覆蓋六個角色 token（--bh-bg、--bh-fg、--bh-a1 到 --bh-a4），並執行步驟 5 中的對比度檢查。紅、藍、黃是歷史慣例，並非必要條件。

3. 先放置再繪製

在放置任何形狀前，請先閱讀 placement.md。 它將每個頁面插槽對應到應有的內容，並提供數值預算：每頁一個構圖、每個區塊一個形狀系列、一種磁磚尺寸、跨邊緣連接的形式、無孔洞、無嵌套圖形、資料在藝術之外。磁磚列表說明存在什麼；此檔案說明它們應放在哪裡。

對於主視覺，請在那裡選擇一種藝術模式（區塊、堆疊、飾帶、線條或單元格）。預設為使用 composeBlock 建構的區塊：

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

對於其他區塊，composition.md 為每種原型提供了規則和失敗模式。許多是海報方法，因此請先檢查插槽映射。

如果使用者提供了參考資料，請在建構前使用 reference-decoding.md 中的方法進行測量，然後用相同的數字比較您的頁面。

當使用者想要理由、當決策有爭議、或當撰寫設計相關內容時，請閱讀 theory.md 中的理論。

4. 載入零件

從 assets/ 複製到專案中。不要憑記憶重寫它們。

• bauhaus-geometry.css：token、磁磚、區域、深度、動畫。務必包含。它與現有設計系統並存是安全的，因為所有內容都位於串聯層中，並以 bh- 為前綴。
• bauhaus-ui.css：小工具和區塊。當專案有自己的元件時跳過它，並改為將磁磚和 token 應用於這些元件。
• bauhaus-commerce.css 與 bh-commerce.js：列表、篩選器、產品頁面、購物車和結帳。用於任何商店。
• bh-shapes.js：自訂形狀作為資料，包括 <bh-shape>。
• bh-geometry.js：生成器和可選的自訂元素 <bh-field>、<bh-bundle>、<bh-construct>。
• bh-three.js：僅限 D4。templates/construct-webgl.html 顯示了接線方式。
• templates/landing.html：一個可供開始使用的完整行銷頁面。
• bh-audit.js：用於步驟 6 的瀏覽器內檢查。

偏好靜態標記，使頁面不需要執行時期 JS：

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

嘗試幾個種子並保留最佳的一個；生成的區域是草稿，因此在構圖薄弱的地方手動交換個別磁磚。

5. 建構

磁磚是原子。一個元素、一個原始形狀、一個四分之一圈旋轉：

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

• data-s 形狀：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 圖形和 data-g 背景：bg fg a1 a2 a3 a4，或直接設定 --f 和 --g
• data-r：90 180 270
• 佈局：.bh-field 搭配 --cols、.bh-cells 用於繪製網格、data-span="2" 用於縮放對比

需要列表缺少的形狀？ 先閱讀 shapes.md，並將其作為資料描述給 bh-shapes.js。不要手繪 SVG 路徑或在輪廓頂部繪製筆畫細節。

尋找現成的標記，然後調整其內容和 token：

• commerce.md：產品卡片及其狀態、變體、購物車行、訂單摘要、結帳欄位
• sections.md：主視覺、便當、統計、流程、行動呼籲、頁尾
• widgets.md：卡片、統計、價格方案、圖表、圖形、手風琴、表單、標籤
• grids.md：模組、版面配方、響應式規則
• depth-3d.md：結構 D3 和 D4 的規格格式
• motion.md：進入、滾動和動態配方

框架。 類別和屬性可直接移植。在 JSX 中，編寫 className 和 style={{ "--cols": 6 }}。使用 Tailwind 時，保留核心樣式表，並在其周圍使用任意值進行佈局。盡可能在建構時渲染生成的標記。

6. 驗證

在完成前執行這些並修復它們報告的內容：

node scripts/check-contrast.mjs            # 捆綁的調色板
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # 任何包含內聯 SVG 的檔案

然後，在瀏覽器中以 375px 和 1280px 的寬度執行審計，並按照頁面指南的驗收清單進行檢查：

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

同時檢查：

• 盤點主視覺：一個形狀系列、一種尺寸、無孔洞、且形式相連。將其放在您的參考資料旁邊並比較數字。
• 在腦中移除所有幾何：階層結構是否仍然清晰？
• 每個形狀都有可命名的功能：標記、劃分、框架、編碼、導航或錨定。
• 裝飾性構圖設有 aria-hidden="true"；資料形狀則有文字替代。
• 無水平滾動，且磁磚保持正方形。
• 文字絕不放置在圖案磁磚（bars、arcs、dots、burst）上。
• 顏色絕非唯一的意義載體。a3 和 a4 除非有標籤，否則僅為裝飾性。
• 動畫在 prefers-reduced-motion 下停止，且每個視圖中只有一個項目循環。
• 可互動的目標至少 44px 高，並有可見的焦點。

嚴格規則

權利。 使用風格，絕不使用作品。在命名、添加圖像或改編參考資料之前，請參閱 rights.md。

• 絕不複製特定的藝術品、海報、標誌或構圖，無論是歷史的還是當代的。參考圖像僅用於告知原則：改變結構，而不僅僅是顏色。
• 絕不使用 1922 年包浩斯標誌、博物館標誌，或歷史建築、家具或人物的照片，除非使用者提供擁有許可的檔案。
• 不要將客戶的產品命名為「包浩斯」，或暗示與任何包浩斯機構或公司有關聯。
• 字型：預設使用捆綁的字型堆疊，這些字型參考了開放許可的 Jost、Archivo 和 Space Grotesk（SIL OFL）。未經許可，請勿提供商業復刻版字型。

形式。

• 平面填色、極細線條和硬邊緣。圖形上無漸層、柔和陰影、玻璃擬態或圓角卡片。曲線來自幾何，而非容器的 border-radius。
• 非對稱佈局：左對齊的文字和偏離中心的重心。避免圍繞漂浮形狀的置中主視覺。
• 每個視圖應由一個飽和的強調色主導。三個相等的原色看起來像玩具。
• 需要縮放對比：將一個非常大的形狀與非常小的形狀配對。
• 透過限制來變化詞彙。五個形狀使用得當，勝過一次使用全部二十五個。

規模。 絕不要從九個項目的演示中判斷列表。在宣佈完成之前，請測試多個項目、長名稱、缺失圖像和空結果。

常見失敗。

失敗	修正
隨機形狀散落在內容周圍	用 composeBlock 建構一個區塊，並刪除其餘部分
圖形嵌套在另一個圖形中	讓物件本身成為形式，跨越 2×2
每個區塊都有極細線條	為一個區塊加框，其他區塊則使用空間
像壁紙一樣覆蓋一切的等大磁磚	添加一個大跨度、添加空白、減少面積
每個元素都使用原色	使用一個強調色；其餘的是墨水和紙張
幾何與文案對抗	將強度降低一個層級
到處都是「包浩斯」字體	文字使用中性無襯線字體，僅展示使用幾何無襯線字體
毫無意義的等角場景	除非零件對應到實際概念，否則使用 D0
帶有殘留凸塊或細片的形狀	用 bh-shapes.js 重建：一個切割，而不是一個筆畫
編輯佈局應用於商店	依頁面類型路由：價格和行動優先
一鍵加入購物車卻選了沒人選擇的變體	當有多個選項時，連結到選項頁面