표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Toss Design System (TDS)
OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.
- YEAR
- 2018
- BY
- Toss (비바리퍼블리카)
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#3182F6
- SECONDARY#0050FF
- ACCENT#3182F6
- BG#F2F4F6
- SURFACE#FFFFFF
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 5단계
- 미니멀
- 신뢰감
함께 보면 좋은 스타일
Human Interface Guidelines (HIG)애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.Human Interface Guidelines (HIG)와 비교하기
어디에 쓰나
실제로 쓰는 곳
- 토스 앱 (간편송금, 투자, 보험, 대출)
- 토스페이먼츠
- 토스뱅크
- 토스증권 (TDS WTS — 빨강=긍정 테마 파생)
- 앱인토스 파트너 미니앱
사용 사례
- 핀테크 / 금융 모바일 앱
- 슈퍼앱 멀티 서비스 플랫폼
- POS 및 오프라인 디바이스 UI
- 서드파티 앱인토스 미니앱
- B2B 어드민 대시보드 (TDS Desktop)
이런 프로젝트에 맞습니다
- 모바일 중심 B2C 금융 서비스
- 다수 브랜드를 수용하는 슈퍼앱 플랫폼
- 접근성과 일관성이 핵심인 대규모 프로덕트
- 라이트/다크 + 멀티 디바이스 대응이 필요한 앱
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.
핵심 원칙
- Simplicity — 복잡한 금융을 단순하게
- Consistency — 모든 플랫폼에서 동일한 경험
- Scalability — 테마 파생으로 무한 확장
주요 특징
- OKLCH 기반 균일 명도 컬러 시스템
- 파생 가능한 테마 시스템
- 시맨틱 토큰 자동화 파이프라인
- 모바일 우선 접근성 설계
- 11개 핵심 TDS 컴포넌트
장점과 한계
장점
- OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장
- 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능
- 커스텀 UI 대비 3~5배 빠른 개발 속도
- 라이트/다크모드 자동 전환 + 저해상도 디바이스 대응
- 테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장
한계
- 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능
- 토스 Product Sans 등 자체 폰트 의존도 높음
- 금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요
컬러 시스템
OKLCH 색공간 기반으로 인지적으로 균일한 명도를 보장하는 시맨틱 컬러 토큰 시스템
색의 역할
- primary: 주요 CTA 및 브랜드 강조 — TDS Blue (#0050FF ~ #3182F6 스케일)
- background: 화이트(#FFFFFF) 및 라이트 그레이(#F2F4F6) 배경
- text: #191F28(본문), #4E5968(보조), #8B95A1(비활성)
- semantic: Grey, Blue, Red, Orange, Yellow, Green, Teal, Purple 각 팔레트 제공
- Fill/Weak: 브랜드 컬러 입력 시 자동으로 접근성 충족하는 색 조합 생성
제약
- 동일 스케일 번호는 반드시 동일 명도 — Blue 100과 Red 100은 같은 밝기
- 다크모드 전용 명도 보정 적용 (라이트와 다른 별도 기준치)
- 노란색은 Dark Yellow Problem 대응을 위한 별도 명도 진행 곡선 적용
- 브랜드 컬러 오버라이드 시 자동화 로직으로 접근성 검증 필수
다크모드 — 다크모드 전용 명도 기준치 별도 설정 — APCA 메트릭 기반으로 어두운 배경에서 더 강한 명도대비 적용
명도 대비 — OKLCH 기반 인지적 균일 명도 + APCA 대비 알고리즘 적용, 저해상도 디바이스에서도 색상 소실 없이 식별 가능
타이포그래피
Toss Product Sans — 친근하면서도 신뢰감 있는 자체 개발 산세리프
글꼴은 최대 1종 · 스케일 비율 1.25 (Major Third)
- 계층화된 Typography 토큰으로 폰트 크기·라인 높이 추상화
- iOS/Android '더 큰 텍스트' 접근성 설정 연동 필수
- Figma에서는 SF Pro 사용, 실제 앱에서 Toss Product Sans 자동 적용
설계 제약
반드시 포함
- 8px 기반 스페이싱 시스템
- 시맨틱 컬러 토큰을 통한 일관된 색상 사용
- 11개 핵심 컴포넌트 활용 (Badge, Button, ListRow, Navigation, Tab 등)
- 테마 오버라이드를 통한 브랜드 커스터마이징
- 명확한 정보 위계와 여백
하지 말 것
- 플랫폼별 토큰 개별 관리 금지 — 반드시 Single Source of Truth 유지
- 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지
- 복잡한 장식 요소로 금융 정보의 가독성을 해치는 디자인 금지
- 라이트모드만 디자인하고 다크모드를 소홀히 하는 것 금지
모션 — ease-in-out 200ms 기본 — 자연스럽고 빠른 트랜지션, 금융 맥락에서 사용자 불안감을 주지 않는 안정적 모션
접근성
OKLCH 색공간으로 모든 색상 스케일에서 인지적으로 균일한 명도를 보장하며, APCA(Advanced Perceptual Contrast Algorithm) 기준의 다크모드 명도 보정, 저해상도 디바이스 대응, iOS/Android '더 큰 텍스트' 접근성 설정을 지원합니다.
자주 묻는 질문
Toss Design System (TDS)이란 무엇인가요?
OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다. 2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.
Toss Design System (TDS)의 핵심 디자인 원칙은 무엇인가요?
Toss Design System (TDS)의 핵심 원칙은 Simplicity — 복잡한 금융을 단순하게, Consistency — 모든 플랫폼에서 동일한 경험, Scalability — 테마 파생으로 무한 확장입니다.
Toss Design System (TDS)은 어떤 프로젝트에 적합한가요?
Toss Design System (TDS)은 핀테크 / 금융 모바일 앱, 슈퍼앱 멀티 서비스 플랫폼, POS 및 오프라인 디바이스 UI, 서드파티 앱인토스 미니앱, B2B 어드민 대시보드 (TDS Desktop), 모바일 중심 B2C 금융 서비스, 다수 브랜드를 수용하는 슈퍼앱 플랫폼, 접근성과 일관성이 핵심인 대규모 프로덕트, 라이트/다크 + 멀티 디바이스 대응이 필요한 앱 등의 프로젝트에 적합합니다.
Toss Design System (TDS)의 장단점은 무엇인가요?
장점으로는 OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장, 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능, 커스텀 UI 대비 3~5배 빠른 개발 속도, 라이트/다크모드 자동 전환 + 저해상도 디바이스 대응, 테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장이 있습니다. 단점으로는 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능, 토스 Product Sans 등 자체 폰트 의존도 높음, 금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요이 있습니다.
Toss Design System (TDS)에서 색상은 어떻게 사용하나요?
OKLCH 색공간 기반으로 인지적으로 균일한 명도를 보장하는 시맨틱 컬러 토큰 시스템 색상 역할은 primary: 주요 CTA 및 브랜드 강조 — TDS Blue (#0050FF ~ #3182F6 스케일), background: 화이트(#FFFFFF) 및 라이트 그레이(#F2F4F6) 배경, text: #191F28(본문), #4E5968(보조), #8B95A1(비활성)입니다. 주의사항: 동일 스케일 번호는 반드시 동일 명도 — Blue 100과 Red 100은 같은 밝기, 다크모드 전용 명도 보정 적용 (라이트와 다른 별도 기준치).
Toss Design System (TDS)에 어울리는 폰트 스타일은 무엇인가요?
Toss Design System (TDS)에는 Toss Product Sans — 친근하면서도 신뢰감 있는 자체 개발 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 계층화된 Typography 토큰으로 폰트 크기·라인 높이 추상화, iOS/Android '더 큰 텍스트' 접근성 설정 연동 필수.
Toss Design System (TDS) 디자인에서 하면 안 되는 것은 무엇인가요?
Toss Design System (TDS)에서 피해야 할 것: 플랫폼별 토큰 개별 관리 금지 — 반드시 Single Source of Truth 유지, 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지, 복잡한 장식 요소로 금융 정보의 가독성을 해치는 디자인 금지, 라이트모드만 디자인하고 다크모드를 소홀히 하는 것 금지.
Toss Design System (TDS)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Toss Design System (TDS)을 적용한 대표적인 제품·서비스로는 토스 앱 (간편송금, 투자, 보험, 대출), 토스페이먼츠, 토스뱅크, 토스증권 (TDS WTS — 빨강=긍정 테마 파생), 앱인토스 파트너 미니앱 등이 있습니다.