# Toss Design System (TDS) — 디자인 스타일 가이드

## 기본 정보
- **ID**: toss-design-system
- **카테고리**: design-language
- **연도**: 2018
- **제작자**: Toss (비바리퍼블리카)

## 설명
OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.

## 역사·배경
2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.

## 핵심 원칙
- Simplicity — 복잡한 금융을 단순하게
- Consistency — 모든 플랫폼에서 동일한 경험
- Scalability — 테마 파생으로 무한 확장

## 주요 특징
- OKLCH 기반 균일 명도 컬러 시스템
- 파생 가능한 테마 시스템
- 시맨틱 토큰 자동화 파이프라인
- 모바일 우선 접근성 설계
- 11개 핵심 TDS 컴포넌트

## 컬러 시스템 가이드
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 자동 적용

## 하면 안 되는 것 (안티패턴)
- 플랫폼별 토큰 개별 관리 금지 — 반드시 Single Source of Truth 유지
- 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지
- 복잡한 장식 요소로 금융 정보의 가독성을 해치는 디자인 금지
- 라이트모드만 디자인하고 다크모드를 소홀히 하는 것 금지

## 반드시 포함해야 하는 것
- 8px 기반 스페이싱 시스템
- 시맨틱 컬러 토큰을 통한 일관된 색상 사용
- 11개 핵심 컴포넌트 활용 (Badge, Button, ListRow, Navigation, Tab 등)
- 테마 오버라이드를 통한 브랜드 커스터마이징
- 명확한 정보 위계와 여백

## 모션 가이드
ease-in-out 200ms 기본 — 자연스럽고 빠른 트랜지션, 금융 맥락에서 사용자 불안감을 주지 않는 안정적 모션

## 사용 사례
- 핀테크 / 금융 모바일 앱
- 슈퍼앱 멀티 서비스 플랫폼
- POS 및 오프라인 디바이스 UI
- 서드파티 앱인토스 미니앱
- B2B 어드민 대시보드 (TDS Desktop)

## 추천 프로젝트 유형
- 모바일 중심 B2C 금융 서비스
- 다수 브랜드를 수용하는 슈퍼앱 플랫폼
- 접근성과 일관성이 핵심인 대규모 프로덕트
- 라이트/다크 + 멀티 디바이스 대응이 필요한 앱

## 장점
- OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장
- 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능
- 커스텀 UI 대비 3~5배 빠른 개발 속도
- 라이트/다크모드 자동 전환 + 저해상도 디바이스 대응
- 테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장

## 단점·한계
- 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능
- 토스 Product Sans 등 자체 폰트 의존도 높음
- 금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요

## 실제 사용 제품·서비스
- 토스 앱 (간편송금, 투자, 보험, 대출)
- 토스페이먼츠
- 토스뱅크
- 토스증권 (TDS WTS — 빨강=긍정 테마 파생)
- 앱인토스 파트너 미니앱

## 접근성
OKLCH 색공간으로 모든 색상 스케일에서 인지적으로 균일한 명도를 보장하며, APCA(Advanced Perceptual Contrast Algorithm) 기준의 다크모드 명도 보정, 저해상도 디바이스 대응, iOS/Android '더 큰 텍스트' 접근성 설정을 지원합니다.

## 관련 스타일
- [human-interface-guidelines](https://ui.buildersgate.com/styles/human-interface-guidelines)
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [wanted-montage](https://ui.buildersgate.com/styles/wanted-montage)
- [flat-design](https://ui.buildersgate.com/styles/flat-design)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #3182F6
- secondary: #0050FF
- accent: #3182F6
- background: #F2F4F6
- surface: #FFFFFF
- text: #191F28
- textSecondary: #8B95A1
- border: #E5E8EB

### 헤더
- background: #FFFFFF
- textColor: #191F28
- accentColor: #3182F6

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

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

### 그림자 (Shadows)
- sm: 0 2px 8px rgba(0,0,0,0.04)
- md: 0 4px 16px rgba(0,0,0,0.06)
- lg: 0 8px 24px rgba(0,0,0,0.08)
- xl: 0 16px 32px rgba(0,0,0,0.12)

### Border Radius
- none: 0
- sm: 8px
- md: 16px
- lg: 24px
- full: 9999px

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

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

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

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

### 레이아웃
- containerStyle: fluid
- sectionSpacing: compact

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

## 자주 묻는 질문 (FAQ)

### Q: Toss Design System (TDS)이란 무엇인가요?
A: OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다. 2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.

### Q: Toss Design System (TDS)의 핵심 디자인 원칙은 무엇인가요?
A: Toss Design System (TDS)의 핵심 원칙은 Simplicity — 복잡한 금융을 단순하게, Consistency — 모든 플랫폼에서 동일한 경험, Scalability — 테마 파생으로 무한 확장입니다.

### Q: Toss Design System (TDS)은 어떤 프로젝트에 적합한가요?
A: Toss Design System (TDS)은 핀테크 / 금융 모바일 앱, 슈퍼앱 멀티 서비스 플랫폼, POS 및 오프라인 디바이스 UI, 서드파티 앱인토스 미니앱, B2B 어드민 대시보드 (TDS Desktop), 모바일 중심 B2C 금융 서비스, 다수 브랜드를 수용하는 슈퍼앱 플랫폼, 접근성과 일관성이 핵심인 대규모 프로덕트, 라이트/다크 + 멀티 디바이스 대응이 필요한 앱 등의 프로젝트에 적합합니다.

### Q: Toss Design System (TDS)의 장단점은 무엇인가요?
A: 장점으로는 OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장, 디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능, 커스텀 UI 대비 3~5배 빠른 개발 속도, 라이트/다크모드 자동 전환 + 저해상도 디바이스 대응, 테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장이 있습니다. 단점으로는 오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능, 토스 Product Sans 등 자체 폰트 의존도 높음, 금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요이 있습니다.

### Q: Toss Design System (TDS)에서 색상은 어떻게 사용하나요?
A: OKLCH 색공간 기반으로 인지적으로 균일한 명도를 보장하는 시맨틱 컬러 토큰 시스템 색상 역할은 primary: 주요 CTA 및 브랜드 강조 — TDS Blue (#0050FF ~ #3182F6 스케일), background: 화이트(#FFFFFF) 및 라이트 그레이(#F2F4F6) 배경, text: #191F28(본문), #4E5968(보조), #8B95A1(비활성)입니다. 주의사항: 동일 스케일 번호는 반드시 동일 명도 — Blue 100과 Red 100은 같은 밝기, 다크모드 전용 명도 보정 적용 (라이트와 다른 별도 기준치).

### Q: Toss Design System (TDS)에 어울리는 폰트 스타일은 무엇인가요?
A: Toss Design System (TDS)에는 Toss Product Sans — 친근하면서도 신뢰감 있는 자체 개발 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 계층화된 Typography 토큰으로 폰트 크기·라인 높이 추상화, iOS/Android '더 큰 텍스트' 접근성 설정 연동 필수.

### Q: Toss Design System (TDS) 디자인에서 하면 안 되는 것은 무엇인가요?
A: Toss Design System (TDS)에서 피해야 할 것: 플랫폼별 토큰 개별 관리 금지 — 반드시 Single Source of Truth 유지, 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지, 복잡한 장식 요소로 금융 정보의 가독성을 해치는 디자인 금지, 라이트모드만 디자인하고 다크모드를 소홀히 하는 것 금지.

### Q: Toss Design System (TDS)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Toss Design System (TDS)을 적용한 대표적인 제품·서비스로는 토스 앱 (간편송금, 투자, 보험, 대출), 토스페이먼츠, 토스뱅크, 토스증권 (TDS WTS — 빨강=긍정 테마 파생), 앱인토스 파트너 미니앱 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=toss-design-system
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=toss-design-system&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Toss Design System (TDS)

OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.

연도

2018

제작자

Toss (비바리퍼블리카)

2018년 비바리퍼블리카가 간편송금앱에서 금융 슈퍼앱으로 확장하며 구축한 디자인 시스템. 2024년 7년 만에 OKLCH 기반 컬러 시스템을 전면 개편하고, Style Dictionary 기반 토큰 자동화 파이프라인과 파생 가능한 테마 시스템을 도입하며 System of System으로 진화했습니다.

#0050FF

핵심 원칙

1

Simplicity — 복잡한 금융을 단순하게

2

Consistency — 모든 플랫폼에서 동일한 경험

3

Scalability — 테마 파생으로 무한 확장

주요 특징

  • OKLCH 기반 균일 명도 컬러 시스템
  • 파생 가능한 테마 시스템
  • 시맨틱 토큰 자동화 파이프라인
  • 모바일 우선 접근성 설계
  • 11개 핵심 TDS 컴포넌트

장단점

장점

  • +OKLCH 명도 시스템으로 모든 색상 조합에서 균일한 대비 보장
  • +디자이너가 Figma → GitHub PR로 직접 토큰 배포 가능
  • +커스텀 UI 대비 3~5배 빠른 개발 속도
  • +라이트/다크모드 자동 전환 + 저해상도 디바이스 대응
  • +테마 파생으로 브랜드 컬러만 바꿔도 접근성 보장

단점 / 한계

  • −오픈소스가 아닌 내부 시스템 — 앱인토스 파트너만 제한적 사용 가능
  • −토스 Product Sans 등 자체 폰트 의존도 높음
  • −금융 도메인 최적화로 타 도메인 적용 시 커스터마이징 필요

적합한 사용처

사용 사례

  • 핀테크 / 금융 모바일 앱
  • 슈퍼앱 멀티 서비스 플랫폼
  • POS 및 오프라인 디바이스 UI
  • 서드파티 앱인토스 미니앱
  • B2B 어드민 대시보드 (TDS Desktop)

이런 프로젝트에 추천

모바일 중심 B2C 금융 서비스다수 브랜드를 수용하는 슈퍼앱 플랫폼접근성과 일관성이 핵심인 대규모 프로덕트라이트/다크 + 멀티 디바이스 대응이 필요한 앱
접근성

OKLCH 색공간으로 모든 색상 스케일에서 인지적으로 균일한 명도를 보장하며, APCA(Advanced Perceptual Contrast Algorithm) 기준의 다크모드 명도 보정, 저해상도 디바이스 대응, iOS/Android '더 큰 텍스트' 접근성 설정을 지원합니다.

실제 사용 예시

토스 앱 (간편송금, 투자, 보험, 대출)토스페이먼츠토스뱅크토스증권 (TDS WTS — 빨강=긍정 테마 파생)앱인토스 파트너 미니앱

UI 컴포넌트 예제

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

TDS Buttons & BottomCTA

토스 스타일의 둥근 버튼과 하단 고정 CTA 패턴

TDS ListRow

토스의 핵심 컴포넌트 — 정보를 행 단위로 표시하는 리스트

💰

토스뱅크 통장

입출금 통장

1,234,567원
📈

토스증권

국내주식

892,100원
🛡️

토스보험

운전자보험

월 12,900원

TDS Badge & Tab

상태 표시 뱃지와 탭 내비게이션

NEW진행중대기긴급완료

TDS Card

토스 스타일의 플랫 카드 — 최소한의 그림자와 넉넉한 여백

내 신용점수

지금 바로 확인해보세요

912점

이번 달 소비

지난달보다 12% 줄었어요

482,300원

TDS Input Fields

배경 채움(Filled) 스타일의 입력 필드와 포커스 효과

TDS Typography

Toss Product Sans 기반의 간결하고 친근한 타이포그래피 체계

Display (28px / Bold)

간편하게 보내고 받으세요

Headline (22px / Bold)

내 돈 관리

Title (17px / Semibold)

이번 달 쓴 금액

Body (15px / Regular)

토스 디자인 시스템(TDS)은 직관적이고 친근한 UI를 제공하기 위해 설계되었으며, 모바일 환경에서의 가독성을 최우선으로 합니다.

Caption (13px / Regular)

Toss (비바리퍼블리카) · 2018 · OKLCH 컬러 시스템

TDS Color System

OKLCH 기반 균일 명도 컬러 팔레트 — 같은 스케일 번호는 같은 밝기

Blue
Grey
Red
Green

50 → 100 → 200 → 300 → 400 → 500 → 900 (동일 스케일 = 동일 명도)

자주 묻는 질문

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 — 빨강=긍정 테마 파생), 앱인토스 파트너 미니앱 등이 있습니다.

관련 스타일 탐색

Human Interface Guidelines (HIG)

애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Wanted Design System (Montage)

CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다.

Flat Design

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.