토스

가이드 요약

TDS. 토스 블루(#3182F6), 수백 개 컴포넌트를 개발과 직결

타이포그래피

Toss Product Sans

산돌·리도타입과 공동 개발한 전용 서체. 숫자·라틴 문자를 한글 비례에 맞춰 최적화해 금융 맥락의 가독성을 높임.

핵심 원칙

• 수백 개 컴포넌트가 실제 코드베이스(React 등)와 1:1로 직결되는 구조
• 카드 컴포넌트 3종 — Standard(반경 12px)/Featured(16px)/Compact(8px, 보더 1px)
• 정밀 조율된 마찰 없는 흐름 제어로 사용성 극대화

출처: tossmini-docs.toss.im 공식 문서 기준