# Monochrome Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: monochrome
- **카테고리**: visual-style
- **연도**: Timeless

## 설명
단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.

## 핵심 원칙
- 일관성
- 세련됨
- 집중

## 주요 특징
- 단일 색상 기반
- 톤과 음영 활용
- 명확한 대비
- 우아한 느낌
- 집중력 향상

## 사용 사례
- 패션·럭셔리 브랜드
- 포트폴리오
- 사진작가 사이트
- 편집 디자인

## 추천 프로젝트 유형
- 패션·럭셔리
- 포트폴리오
- 사진작가 사이트
- 편집 디자인

## 장점
- 색상 충돌 없이 항상 조화로움
- 고급스럽고 세련된 이미지
- 타이포그래피와 구조가 돋보임

## 단점·한계
- 지루하거나 단조로울 수 있음
- 상태·카테고리 구분에 색상 사용 불가
- 활기차고 에너지 넘치는 브랜드엔 부적합

## 실제 사용 제품·서비스
- 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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=monochrome
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=monochrome&merged=true
← 홈으로 돌아가기

Monochrome Design

단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.

연도

Timeless

#808080

핵심 원칙

1

일관성

2

세련됨

3

집중

주요 특징

  • 단일 색상 기반
  • 톤과 음영 활용
  • 명확한 대비
  • 우아한 느낌
  • 집중력 향상

장단점

장점

  • +색상 충돌 없이 항상 조화로움
  • +고급스럽고 세련된 이미지
  • +타이포그래피와 구조가 돋보임

단점 / 한계

  • −지루하거나 단조로울 수 있음
  • −상태·카테고리 구분에 색상 사용 불가
  • −활기차고 에너지 넘치는 브랜드엔 부적합

적합한 사용처

사용 사례

  • 패션·럭셔리 브랜드
  • 포트폴리오
  • 사진작가 사이트
  • 편집 디자인

이런 프로젝트에 추천

패션·럭셔리포트폴리오사진작가 사이트편집 디자인

실제 사용 예시

Chanel 웹사이트일부 사진작가 포트폴리오

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Monochrome Buttons

단일 색상의 다양한 톤을 사용한 버튼

Tonal Hierarchy

명도 차이로 계층 구조 표현

Primary Level

가장 어두운 톤으로 최상위 계층을 표현

Secondary Level

중간 톤으로 2차 계층을 표현

Tertiary Level

밝은 톤으로 3차 계층을 표현

Quaternary Level

가장 밝은 톤으로 최하위 계층을 표현

Monochrome Cards

회색조 카드 디자인

Black

강렬하고 명확한 대비

Gray

중립적이고 균형잡힌

White

깨끗하고 미니멀한

Monochrome Gradients

단색 그라데이션

Dark Gradient
Light Gradient

Typography in Monochrome

타이포그래피에 집중하는 단색 디자인

MONO

Single Color, Multiple Tones

모노크롬 디자인은 색상을 제거하고 타이포그래피와 레이아웃에 집중합니다.

명도와 채도의 변화만으로 충분한 시각적 흥미를 만들어낼 수 있습니다.

High Contrast

강한 명암 대비

Strong Contrast

흑과 백의 강렬한 대비로 명확한 가독성을 확보합니다.

관련 스타일 탐색

Minimalism

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.

Swiss Design (국제 타이포그래피 양식)

스위스에서 발전한 그래픽 디자인 스타일로, 명료성과 객관성을 강조합니다.

Dark Mode Design

어두운 배경을 사용하여 눈의 피로를 줄이고 배터리를 절약합니다.