# Duotone — 디자인 스타일 가이드

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

## 설명
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.

## 역사·배경
인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.

## 핵심 원칙
- 색상 대비
- 시각적 통일성
- 브랜드 정체성

## 주요 특징
- 2색 컬러 팔레트
- 높은 대비
- 브랜드 색상 활용
- 이미지 필터 효과
- 대담한 시각적 임팩트

## 사용 사례
- 음악·엔터테인먼트 브랜딩
- 이벤트 포스터
- 소셜 미디어 콘텐츠
- 뮤직 앱 UI

## 추천 프로젝트 유형
- 음악·엔터테인먼트
- 이벤트 포스터
- 소셜 콘텐츠
- 뮤직 앱 UI

## 장점
- 이미지에 강력한 브랜드 색상 입힘
- 이질적인 사진들을 통일감 있게 처리
- 인상적이고 기억에 남는 비주얼

## 단점·한계
- 사진 디테일 손실
- 두 색상 이외의 정보 전달 어려움
- 지나치면 단조로울 수 있음

## 실제 사용 제품·서비스
- Spotify (로고·앨범 처리)
- Squarespace 템플릿

## 관련 스타일
- [monochrome](https://ui.buildersgate.com/styles/monochrome)
- [gradient-design](https://ui.buildersgate.com/styles/gradient-design)
- [maximalism](https://ui.buildersgate.com/styles/maximalism)

## 디자인 토큰

### 색상
- primary: #1DB954
- secondary: #191414
- accent: #1ED760
- background: #000000
- surface: #121212
- text: #FFFFFF
- textSecondary: #B3B3B3
- border: #282828

### 헤더
- background: linear-gradient(135deg, #1DB954 0%, #191414 100%)
- textColor: #FFFFFF
- accentColor: #1ED760

### 타이포그래피
- fontFamily: Circular, Helvetica, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0, 0, 0, 0.5)
- md: 0 4px 8px rgba(0, 0, 0, 0.6)
- lg: 0 8px 16px rgba(0, 0, 0, 0.7)
- xl: 0 16px 32px rgba(0, 0, 0, 0.8)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #282828

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 200ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false

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

Duotone

이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.

연도

2015

인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.

#1DB954

핵심 원칙

1

색상 대비

2

시각적 통일성

3

브랜드 정체성

주요 특징

  • 2색 컬러 팔레트
  • 높은 대비
  • 브랜드 색상 활용
  • 이미지 필터 효과
  • 대담한 시각적 임팩트

장단점

장점

  • +이미지에 강력한 브랜드 색상 입힘
  • +이질적인 사진들을 통일감 있게 처리
  • +인상적이고 기억에 남는 비주얼

단점 / 한계

  • −사진 디테일 손실
  • −두 색상 이외의 정보 전달 어려움
  • −지나치면 단조로울 수 있음

적합한 사용처

사용 사례

  • 음악·엔터테인먼트 브랜딩
  • 이벤트 포스터
  • 소셜 미디어 콘텐츠
  • 뮤직 앱 UI

이런 프로젝트에 추천

음악·엔터테인먼트이벤트 포스터소셜 콘텐츠뮤직 앱 UI

실제 사용 예시

Spotify (로고·앨범 처리)Squarespace 템플릿

UI 컴포넌트 예제

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

Classic Duotone Effect

두 가지 색상으로 처리된 이미지 효과

🏔️
🌊
🌅

Spotify-Inspired Duotone

Spotify의 대표적인 녹색-검정 듀오톤

🎵

Playlist Name

50 songs • 3h 20min

Various Color Combinations

다양한 듀오톤 색상 조합

Red • Blue
Yellow • Purple
Cyan • Pink
Orange • Indigo

Brand Duotone Cards

브랜드 색상을 활용한 듀오톤 카드

🎧

Music

Discover new sounds every day

📱

App

Experience the new design

High Contrast Duotone

높은 대비의 듀오톤 효과

🌙
☀️

Duotone Text Backgrounds

듀오톤 배경 위의 텍스트

Creative Design

Bold colors for bold ideas

Fresh Approach

Innovation meets tradition

Duotone Gallery

듀오톤이 적용된 이미지 갤러리

🏔️
🌊
🌅
🌲
🏜️
🌸
🌊
🌤️

Duotone Buttons

듀오톤 그라데이션을 사용한 버튼

관련 스타일 탐색

Monochrome Design

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

Gradient Design

부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.

Maximalism

풍부한 색상, 패턴, 장식으로 시각적으로 압도적인 경험을 제공합니다.