Bauhaus Geometric

# Bauhaus Geometric — web 디자인 팩

## 이 스타일의 정체성
1920년대 바우하우스 조형 원리를 웹으로 옮긴 스타일이다. 원·삼각형·사각형의 기본 도형, 빨강·노랑·파랑 3원색에 검정·흰색, 기하학 그리드와 대각 구성. 기능주의적 명료함과 도형의 추상 구성으로 화면을 짠다. 무엇을 보면 이 스타일임을 아는가 — 화면이 명확한 기하 도형(완전한 원, 직각 삼각형, 정사각형)으로 구성되고, 색이 정확히 빨강·노랑·파랑·검정·흰색 5가지뿐이며, 도형이 무작위가 아니라 격자에 정렬·대각으로 배치된다.

## 색
- 배경: `#f0ece1` (웜 오프화이트 — 순백이 아닌 종이 톤).
- 표면: `#f0ece1` 및 흰색 `#ffffff`.
- 텍스트: `#141414` (검정).
- 3원색(도형·블록·강조에 사용): 빨강 `#d62828`, 노랑 `#f2b705`, 파랑 `#1d4e9c`.
- 색 규칙: 정확히 이 5색(오프화이트·검정·빨강·노랑·파랑)만. 중간색·파스텔·그라디언트 절대 없음. 한 도형 = 한 솔리드 색.

## 타이포그래피
- 디스플레이: `Archivo`(Google Fonts) weight 800~900, 대체 `'Futura', sans-serif`. 헤드라인 `clamp(2.4rem, 5.5vw, 4.4rem)`, `letter-spacing: -0.02em`, line-height 1.05, 대문자 가능. 기하학적 산세리프(바우하우스 활자 계보).
- 라벨/내비: `Archivo` `0.78rem`, weight 700, 대문자, `letter-spacing: 0.14em`.
- 본문: `Archivo` `1.05rem`, weight 400, line-height 1.6, 측정 60~70자.
- 헤드라인 단어를 도형(원·사각)으로 감싸거나 색 블록 위에 얹어 타이포-도형 통합.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1200px. 좌우 패딩 모바일 20px / 데스크탑 48px.
- 브레이크포인트: 640px, 1024px.
- `block-grid` — 6×N 모듈 그리드. 각 셀은 색 블록 또는 도형 또는 텍스트. 거터 0(블록끼리 맞붙음) 또는 4px.
- 대각 구성: 일부 블록을 대각선으로 분할(`clip-path: polygon`)하거나 도형을 45° 배치. 비대칭 균형 — 무거운 색 블록을 한쪽에 두고 반대쪽 여백·작은 도형으로 균형.
- 섹션 수직 리듬: 섹션 간 `clamp(64px, 8vw, 112px)`(balanced). 블록은 맞붙되 섹션 간엔 호흡.

## 형태 / 질감
- 모서리: 사각형 블록 radius `0`. 원은 완전한 원(`border-radius: 50%`). 반원·1/4원 도형도 사용.
- 도형 어휘: 완전한 원, 정사각/직사각, 정삼각·직각삼각형(`clip-path`), 반원, 1/4원. 이 5종만.
- 보더: 블록 기본 보더 없음(색 면끼리 맞붙어 구분). 강조 시 `3px solid #141414`.
- 그림자: 전면 금지 — 깊이는 도형 겹침(`z-index` 레이어)으로만.
- 도형 겹침: 원이 사각 블록 위에 일부 걸치는 식의 정렬된 겹침. 무작위 회전 금지 — 0° 또는 45°만.

## 모션
- 전환: `snappy` — `160ms cubic-bezier(0.2, 0, 0, 1)`.
- 호버: 도형이 `rotate(0 → 45deg)` 또는 `scale(1 → 1.08)` 즉각 전환. 색 블록 호버 시 다른 원색으로 즉시 스왑.
- 스크롤 진입: 도형이 `scale(0 → 1)`로 등장하거나 한 변에서 슬라이드 인, stagger 100ms, 각 도형 다른 방향.
- 부드러운 페이드·바운스 금지 — 기계적·정확한 모션.

## 하지 말 것
- 보라·초록·주황 등 3원색 외 색 금지. 파스텔·중간색 금지. 그라디언트 절대 금지.
- 둥근 모서리(사각 블록 radius > 0) 금지 — 단 원·반원은 도형 어휘로 허용.
- 박스 섀도·soft shadow 금지.
- 도형 무작위 회전·무작위 산포 금지 — Memphis가 아니다. 도형은 격자 정렬, 0°/45°만.
- 도형 종류를 늘리지 말 것 — 원·사각·삼각·반원·1/4원 5종만.
- 이모지·일러스트·blob(유기 곡선) 금지.
- 부드러운 페이드·통통 바운스 모션 금지.

## 적용 예
- **히어로:** 6모듈 그리드 — 좌측 큰 파랑 사각 블록에 흰 헤드라인, 우상단 노랑 완전한 원, 우하단 빨강 직각삼각형. 도형이 격자에 정확히 정렬, 한 도형이 블록 경계에 45° 걸침.
- **카드:** 색 블록 모자이크 — 각 카드는 한 원색 면 또는 흰 면 + 도형 아이콘(기하 도형 조합). 보더 없이 맞붙음. 호버 시 카드 안 도형 45° 회전.
- **푸터:** 검정 `#141414` 블록, 오프화이트 텍스트. 3원색 도형 한 줄(원·삼각·사각)이 좌측에 정렬, 대문자 Archivo 메뉴.