← 갤러리

Bauhaus Geometric

원·삼각형·사각형과 빨강·노랑·파랑 3원색만으로 화면을 짜는 바우하우스 조형 스타일 — 도형은 격자에 정렬되고 회전은 0°/45°뿐이다.

bauhaus bauhausgeometric-abstractionprimary-colorsblock-gridfunctionalistflat
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

1920년대 바우하우스 조형 원리를 웹으로 옮긴 스타일. 웜 오프화이트(종이 톤) 바탕 위에 정확히 5색(오프화이트·검정·빨강·노랑·파랑)만 사용하고, 완전한 원·정사각·삼각형·반원·1/4원의 5종 도형 어휘로 6모듈 블록 그리드를 구성한다. 그림자·그라디언트·둥근 모서리는 전면 금지 — 깊이는 도형 겹침으로, 위계는 색 면과 기하학적 산세리프 디스플레이 타입으로 만든다. Memphis의 무작위 키치와 달리 모든 도형이 격자에 정렬된 기능주의적 추상이다.

타입 스케일

display Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen

단일 기하학적 산세리프(Archivo — 바우하우스 활자 계보의 Futura 대체). 디스플레이는 800~900 초고중량 + 타이트 트래킹, 라벨은 대문자 + 넓은 자간(0.14em). 본문 측정 60~70자. 헤드라인 단어를 도형으로 감싸거나 색 블록 위에 얹어 타이포-도형 통합.

골든 예제 (exemplar)

Form
follows
function

Enter the workshop Manifesto

Five colors, five shapes, one grid. Everything else is ornament — and ornament is banned.

Kreis

Dreieck

Quadrat

Do

  • 정확히 5색만 사용한다 — 오프화이트·검정·빨강·노랑·파랑. 한 도형 = 한 솔리드 색
  • 도형은 5종 어휘만 — 완전한 원, 정사각/직사각, 삼각형(clip-path), 반원, 1/4원
  • 도형은 격자에 정렬하고 회전은 0° 또는 45°만 허용한다
  • 깊이는 그림자가 아니라 도형 겹침(z-index)으로 만든다
  • 비대칭 균형 — 무거운 색 블록 반대편을 여백과 작은 도형으로 받친다

Don't

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

컴포넌트 노트

button
base: radius 0, 솔리드 원색 채움(파랑/빨강/노랑) 또는 3px 검정 보더 + 투명, 대문자 label 타이포, padding 14px 32px
hover: 다른 원색으로 즉시 스왑 또는 배경/글자 반전, 160ms cubic-bezier(0.2,0,0,1)
focus: 3px solid ring 오프셋 아웃라인
disabled: opacity 0.4
card
색 블록 모자이크 — 각 카드는 한 원색 면 또는 흰 면 + 기하 도형 아이콘. 보더 없이 맞붙음(거터 0-4px). 호버 시 카드 안 도형 45° 회전.
hero
6모듈 그리드 — 큰 파랑 사각 블록에 흰 헤드라인, 노랑 완전한 원, 빨강 직각삼각형. 도형이 격자에 정확히 정렬, 한 도형이 블록 경계에 45° 걸침.
nav
대문자 Archivo 라벨 타이포(0.78rem/700/0.14em). 도형 불릿(작은 원·사각) 허용.
footer
검정 블록 + 오프화이트 텍스트. 3원색 도형 한 줄(원·삼각·사각)이 좌측 정렬, 대문자 메뉴.