salveignis/bauhaus-geometry

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. 브랜드의 경우 6개의 역할 토큰(--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: 토큰, 타일, 필드, 깊이, 모션. 항상 포함하세요. 모든 것이 계단식 레이어에 있고 bh- 접두사가 붙어 있으므로 기존 디자인 시스템 옆에서 안전합니다.
• bauhaus-ui.css: 위젯과 섹션. 프로젝트에 자체 컴포넌트가 있는 경우 건너뛰고 대신 해당 컴포넌트에 타일과 토큰을 적용하세요.
• 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. 구축

타일은 원자입니다. 하나의 요소, 하나의 프리미티브, 1/4 회전:

<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
• 레이아웃: --cols가 있는 .bh-field, 그려진 그리드를 위한 .bh-cells, 스케일 대비를 위한 data-span="2"

목록에 없는 도형이 필요하신가요? 먼저 shapes.md를 읽고 bh-shapes.js에 데이터로 설명하세요. 실루엣 위에 SVG 경로나 선 세부 정보를 손으로 그리지 마세요.

기성 마크업을 찾은 다음 복사본과 토큰을 적용하세요:

• commerce.md: 상품 카드 및 상태, 변형, 장바구니 라인, 주문 요약, 결제 필드
• sections.md: 히어로, 벤토, 통계, 프로세스, CTA, 푸터
• 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년 바우하우스 시그넷, 박물관 로고, 역사적 건물, 가구 또는 사람의 사진을 사용자가 라이선스 파일을 제공하지 않는 한 절대 사용하지 마세요.
• 클라이언트의 제품을 "Bauhaus"로 브랜딩하거나 바우하우스 기관 또는 회사와의 제휴를 암시하지 마세요.
• 폰트: 기본값은 번들 스택으로, 오픈 라이선스 Jost, Archivo 및 Space Grotesk(SIL OFL)를 참조합니다. 라이선스 없이 상업적 부흥 폰트를 제공하지 마세요.

형태.

• 평면 채우기, 헤어라인 및 하드 에지. 도형에 그라데이션, 소프트 섀도우, 글래스모피즘 또는 둥근 카드가 없습니다. 곡선은 컨테이너의 border-radius가 아닌 기하학에서 비롯됩니다.
• 비대칭 레이아웃: 왼쪽 정렬 텍스트와 오프센터 무게. 주위에 도형이 떠 있는 중앙 히어로를 피하세요.
• 하나의 포화 악센트가 각 뷰를 지배해야 합니다. 세 개의 동등한 기본색은 장난감처럼 읽힙니다.
• 스케일 대비는 필수입니다: 매우 큰 형태와 매우 작은 형태를 짝지으세요.
• 어휘를 제한하여 다양성을 확보하세요. 다섯 개의 도형을 잘 사용하는 것이 스물다섯 개를 한 번에 사용하는 것보다 낫습니다.

스케일. 9개 항목 데모에서 목록을 판단하지 마세요. 많은 항목, 긴 이름, 누락된 이미지 및 빈 결과로 테스트한 후 완료했다고 말하세요.

일반적인 실패.

실패	수정
콘텐츠 주위에 무작위로 흩어진 도형	composeBlock으로 하나의 블록을 구축하고 나머지는 삭제
도형 안에 중첩된 도형	객체 자체를 2×2에 걸친 형태로 만듦
모든 섹션의 헤어라인	하나의 섹션을 프레임으로 하고 다른 섹션에는 공간 사용
벽지처럼 모든 것을 덮는 동일한 타일	큰 스팬 추가, 빈 공간 추가, 영역 축소
모든 요소의 기본색	하나의 악센트 사용; 나머지는 잉크와 종이
기하학이 복사본과 충돌	강도를 한 수준 낮춤
모든 곳에 "Bauhaus" 폰트	텍스트에는 중립 그로테스크, 디스플레이에만 기하학 산세리프 사용
아무것도 말하지 않는 등축 장면	부품이 실제 개념에 매핑되지 않는 한 D0 사용
잘못된 돌출부 또는 조각이 있는 도형	bh-shapes.js로 재구축: 스트로크가 아닌 컷
상점에 적용된 에디토리얼 레이아웃	페이지 유형별 경로 설정: 가격과 액션 우선
한 번 탭으로 추가할 때 아무도 선택하지 않은 변형 선택	옵션이 두 개 이상일 때 옵션에 연결