표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Duotone
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.
- YEAR
- 2015
- MOOD
- 화려한 · 친근·발랄
- PRIMARY#1DB954
- SECONDARY#191414
- ACCENT#1ED760
- BG#000000
- SURFACE#121212
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 2단계
- 화려한
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Spotify (로고·앨범 처리)
- Squarespace 템플릿
사용 사례
- 음악·엔터테인먼트 브랜딩
- 이벤트 포스터
- 소셜 미디어 콘텐츠
- 뮤직 앱 UI
이런 프로젝트에 맞습니다
- 음악·엔터테인먼트
- 이벤트 포스터
- 소셜 콘텐츠
- 뮤직 앱 UI
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
핵심 원칙
- 색상 대비
- 시각적 통일성
- 브랜드 정체성
주요 특징
- 2색 컬러 팔레트
- 높은 대비
- 브랜드 색상 활용
- 이미지 필터 효과
- 대담한 시각적 임팩트
장점과 한계
장점
- 이미지에 강력한 브랜드 색상 입힘
- 이질적인 사진들을 통일감 있게 처리
- 인상적이고 기억에 남는 비주얼
한계
- 사진 디테일 손실
- 두 색상 이외의 정보 전달 어려움
- 지나치면 단조로울 수 있음
컬러 시스템
두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현
색의 역할
- color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할
- color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할
제약
- 세 번째 색 사용 절대 금지
- 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터)
- 두 색 간 명도 차이 충분히 — 작으면 구분 안 됨
다크모드 — color-1을 더 어둡게, color-2를 더 밝게. 비율만 조정
명도 대비 — 텍스트는 두 색 중 하나 위에만 배치 — 그 위에서 대비 확인
타이포그래피
두 색의 대담한 조합에 어울리는 강렬한 폰트
글꼴은 최대 1종 · 스케일 비율 1.333 (Perfect Fourth)
- 텍스트 색은 두 색 중 하나만 사용
- heading은 color-2 (밝은 색)로 강조 가능
설계 제약
반드시 포함
- 모든 이미지에 duotone 필터 적용
- 두 색의 극명한 대비
하지 말 것
- 세 번째 색 추가 금지
- 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리
모션 — 두 색 간 색상 전환 애니메이션 가능. hover 시 color-1·2 반전 효과.
자주 묻는 질문
Duotone이란 무엇인가요?
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다. 인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
Duotone의 핵심 디자인 원칙은 무엇인가요?
Duotone의 핵심 원칙은 색상 대비, 시각적 통일성, 브랜드 정체성입니다.
Duotone은 어떤 프로젝트에 적합한가요?
Duotone은 음악·엔터테인먼트 브랜딩, 이벤트 포스터, 소셜 미디어 콘텐츠, 뮤직 앱 UI, 음악·엔터테인먼트, 이벤트 포스터, 소셜 콘텐츠, 뮤직 앱 UI 등의 프로젝트에 적합합니다.
Duotone의 장단점은 무엇인가요?
장점으로는 이미지에 강력한 브랜드 색상 입힘, 이질적인 사진들을 통일감 있게 처리, 인상적이고 기억에 남는 비주얼이 있습니다. 단점으로는 사진 디테일 손실, 두 색상 이외의 정보 전달 어려움, 지나치면 단조로울 수 있음이 있습니다.
Duotone에서 색상은 어떻게 사용하나요?
두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현 색상 역할은 color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할, color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할입니다. 주의사항: 세 번째 색 사용 절대 금지, 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터).
Duotone에 어울리는 폰트 스타일은 무엇인가요?
Duotone에는 두 색의 대담한 조합에 어울리는 강렬한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 색은 두 색 중 하나만 사용, heading은 color-2 (밝은 색)로 강조 가능.
Duotone 디자인에서 하면 안 되는 것은 무엇인가요?
Duotone에서 피해야 할 것: 세 번째 색 추가 금지, 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리.
Duotone을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Duotone을 적용한 대표적인 제품·서비스로는 Spotify (로고·앨범 처리), Squarespace 템플릿 등이 있습니다.