# Monochrome Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: monochrome
- **카테고리**: visual-style
- **연도**: Timeless
## 설명
단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.
## 핵심 원칙
- 일관성
- 세련됨
- 집중
## 주요 특징
- 단일 색상 기반
- 톤과 음영 활용
- 명확한 대비
- 우아한 느낌
- 집중력 향상
## 컬러 시스템 가이드
단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현
### 색상 역할
- base: 선택한 단일 색상 (또는 흑백)
- light-variant: base의 밝은 버전 — 배경, 카드
- dark-variant: base의 어두운 버전 — 텍스트, 아이콘
- tint: base에 흰색 혼합한 버전 — 서브 영역
- shade: base에 검정 혼합한 버전 — 강조, 호버
### 색상 제약 조건
- 두 번째 색상 추가 금지 — 단일 색 계열만
- 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용
- 텍스트와 배경의 명도 차이 반드시 충분히
### 다크모드 전략
light/dark variant 반전. base 색상 자체는 유지
### 대비 요구사항
WCAG AAA (7:1) 권장 — 색상이 없을수록 명도 대비가 전부
## 타이포그래피 가이드
- **폰트 성격**: 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.333 이상 — 색 없이 위계를 크기로 강하게 표현
### 타이포그래피 제약
- 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단
- letter-spacing으로 분위기 차별화 가능
## 하면 안 되는 것 (안티패턴)
- 두 번째 색상 사용 금지
- 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용
## 반드시 포함해야 하는 것
- 명도 계층 최소 3단계 (배경/중간/텍스트)
- strong/weak 텍스트 계층으로 정보 위계 표현
## 모션 가이드
선택적. 사용 시 opacity 또는 scale 변화. 색상 변화 없음.
## 사용 사례
- 패션·럭셔리 브랜드
- 포트폴리오
- 사진작가 사이트
- 편집 디자인
## 추천 프로젝트 유형
- 패션·럭셔리
- 포트폴리오
- 사진작가 사이트
- 편집 디자인
## 장점
- 색상 충돌 없이 항상 조화로움
- 고급스럽고 세련된 이미지
- 타이포그래피와 구조가 돋보임
## 단점·한계
- 지루하거나 단조로울 수 있음
- 상태·카테고리 구분에 색상 사용 불가
- 활기차고 에너지 넘치는 브랜드엔 부적합
## 실제 사용 제품·서비스
- Chanel 웹사이트
- 일부 사진작가 포트폴리오
## 관련 스타일
- [minimalism](https://ui.buildersgate.com/styles/minimalism)
- [swiss-design](https://ui.buildersgate.com/styles/swiss-design)
- [dark-mode](https://ui.buildersgate.com/styles/dark-mode)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #000000
- secondary: #666666
- accent: #AAAAAA
- background: #FFFFFF
- surface: #F5F5F5
- text: #000000
- textSecondary: #666666
- border: #CCCCCC
### 헤더
- background: linear-gradient(180deg, #FFFFFF 0%, #CCCCCC 100%)
- textColor: #000000
- titleFont: Courier New, monospace
- accentColor: #666666
### 타이포그래피
- fontFamily: 'Courier New', 'Noto Sans KR', monospace
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.2)
- md: 0 2px 4px rgba(0,0,0,0.2)
- lg: 0 4px 8px rgba(0,0,0,0.2)
- xl: 0 8px 16px rgba(0,0,0,0.3)
### Border Radius
- none: 0
- sm: 2px
- md: 4px
- lg: 8px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #CCCCCC
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=square / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=outlined / focusEffect=border
- 배지: shape=square / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Monochrome Design이란 무엇인가요?
A: 단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.
### Q: Monochrome Design의 핵심 디자인 원칙은 무엇인가요?
A: Monochrome Design의 핵심 원칙은 일관성, 세련됨, 집중입니다.
### Q: Monochrome Design은 어떤 프로젝트에 적합한가요?
A: Monochrome Design은 패션·럭셔리 브랜드, 포트폴리오, 사진작가 사이트, 편집 디자인, 패션·럭셔리, 포트폴리오, 사진작가 사이트, 편집 디자인 등의 프로젝트에 적합합니다.
### Q: Monochrome Design의 장단점은 무엇인가요?
A: 장점으로는 색상 충돌 없이 항상 조화로움, 고급스럽고 세련된 이미지, 타이포그래피와 구조가 돋보임이 있습니다. 단점으로는 지루하거나 단조로울 수 있음, 상태·카테고리 구분에 색상 사용 불가, 활기차고 에너지 넘치는 브랜드엔 부적합이 있습니다.
### Q: Monochrome Design에서 색상은 어떻게 사용하나요?
A: 단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현 색상 역할은 base: 선택한 단일 색상 (또는 흑백), light-variant: base의 밝은 버전 — 배경, 카드, dark-variant: base의 어두운 버전 — 텍스트, 아이콘입니다. 주의사항: 두 번째 색상 추가 금지 — 단일 색 계열만, 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용.
### Q: Monochrome Design에 어울리는 폰트 스타일은 무엇인가요?
A: Monochrome Design에는 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단, letter-spacing으로 분위기 차별화 가능.
### Q: Monochrome Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Monochrome Design에서 피해야 할 것: 두 번째 색상 사용 금지, 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용.
### Q: Monochrome Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Monochrome Design을 적용한 대표적인 제품·서비스로는 Chanel 웹사이트, 일부 사진작가 포트폴리오 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=monochrome
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=monochrome&merged=true
Monochrome Design은 패션·럭셔리 브랜드, 포트폴리오, 사진작가 사이트, 편집 디자인, 패션·럭셔리, 포트폴리오, 사진작가 사이트, 편집 디자인 등의 프로젝트에 적합합니다.
Monochrome Design의 장단점은 무엇인가요?
장점으로는 색상 충돌 없이 항상 조화로움, 고급스럽고 세련된 이미지, 타이포그래피와 구조가 돋보임이 있습니다. 단점으로는 지루하거나 단조로울 수 있음, 상태·카테고리 구분에 색상 사용 불가, 활기차고 에너지 넘치는 브랜드엔 부적합이 있습니다.
Monochrome Design에서 색상은 어떻게 사용하나요?
단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현 색상 역할은 base: 선택한 단일 색상 (또는 흑백), light-variant: base의 밝은 버전 — 배경, 카드, dark-variant: base의 어두운 버전 — 텍스트, 아이콘입니다. 주의사항: 두 번째 색상 추가 금지 — 단일 색 계열만, 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용.
Monochrome Design에 어울리는 폰트 스타일은 무엇인가요?
Monochrome Design에는 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단, letter-spacing으로 분위기 차별화 가능.
Monochrome Design 디자인에서 하면 안 되는 것은 무엇인가요?
Monochrome Design에서 피해야 할 것: 두 번째 색상 사용 금지, 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용.
Monochrome Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Monochrome Design을 적용한 대표적인 제품·서비스로는 Chanel 웹사이트, 일부 사진작가 포트폴리오 등이 있습니다.