토스 TDS Mobile · 2026 (Apps in Toss) · dark
PREVIEW · DARK Token-driven
은행에 다니는 유능한 친구

금융을 더 쉽게,
토스로 한번에.

송금·결제·은행·증권을 한 화면에서.

토스는 차가운 cool-blue tinted 어두운 캔버스 위에 단 하나의 토스 블루로 가장 중요한 액션만 강조해요. 다크 모드에서도 동일한 cool-blue 색온도를 유지하고, blue-500은 lightness를 +0.06 들어 올려 충분한 대비를 확보해요.

PRIMARY

Blue 500 (dark)

PALETTES

10 families

TYPE RAMP

16 steps

RADIUS

8 + full

COMPONENTS

41 Figma pages

MAKERS

≈ 2,000명

01.

Colors — dark alias (cool-blue 유지)

번들엔 dark alias 테이블이 없어 합성한 값 · base 팔레트로 노출

BRAND · primary blue lightness +0.06으로 dark contrast 확보

700 · pressed
blue-700
oklch(0.546 0.170 258)
pressed gradient stop
600 · hover
blue-600
oklch(0.620 0.168 256)
pressed-blue 단계
500 · brand
blue-500
oklch(0.684 0.158 254)
primary CTA · focus · link
50 · weak
blue-50
oklch(0.260 0.060 250)
brand-weak bg · deep navy tint
white
white
oklch(1.000 0.000 0)
텍스트 alt (특수)

COOL-BLUE TINTED NEUTRALS · light 모드의 inverted 매핑 (chroma 0.020~0.030 유지)

900 · text
grey-900
oklch(0.965 0.005 247)
primary text on dark
700
grey-700
oklch(0.752 0.016 251)
secondary text on dark
400
grey-400
oklch(0.452 0.028 253)
disabled · strong line
200
grey-200
oklch(0.270 0.030 255)
default divider · border
100
grey-100
oklch(0.200 0.028 255)
secondary surface · neutral btn

YELLOW & ORANGE · illustration body는 dark에서도 동일 (브랜드 자산)

500
yellow-500
oklch(0.853 0.156 86)
illustration body · Tossface
600
yellow-600
oklch(0.840 0.171 87)
illustration accent
500
orange-500 (dark)
oklch(0.780 0.176 56)
semantic warning
300
orange-300
oklch(0.870 0.078 51)
washed warning bg
brown-900
brown-900
oklch(0.359 0.083 39)
illustration facial features

SEMANTIC · success / danger / scrim (dark adjusted)

500 · dark
red-500
oklch(0.688 0.205 22)
error · danger CTA
500 · dark
green-500
oklch(0.620 0.143 154)
success · toast ic
navy-900
navy-900
oklch(0.155 0.060 261)
shadow base · scrim source
scrim 64%
overlay-scrim
oklch(0 0 0 / 0.64)
bottom-sheet 배경 (dark)
press 16%
overlay-press
oklch(1 0 0 / 0.16)
pressed-state · dark inverted

SEMANTIC ALIAS · dark (raw 토큰 매핑) — product 화면은 alias만 호출

fill-brand blue-500 (dark)
fill-primary grey-900 (inverted)
fill-secondary grey-100 (dark surface)
fill-danger red-500 (dark)
text-brand blue-500 (dark)
text-primary grey-900 (near-white)
text-secondary grey-700 (mid)
border-primary blue-500 (focused)
border-secondary grey-200 (default · dark)
border-strong grey-400 (dark)
02.

Typography — TPS / Pretendard fallback

한글 가독성을 위해 본문 1.5 line-height · 숫자는 tabular
tds-display-156 / 1.30 · 700 · -2%

송금하기

tds-display-240 / 1.20 · 700 · -2%

Send 1,234,567원

tds-h128 / 1.30 · 700

디자인 시스템

tds-h322 / 1.30 · 700

한국어 본문 샘플 헤딩

tds-title-118 / 1.45 · 600

카드 타이틀 · Account balance

tds-body-117 / 1.50 · 400

토스는 자신을 “은행에 다니는 유능한 친구”로 포지셔닝해요. 정보 밀도보다 가독성과 행동 유도를 우선하고, 한 문장은 목적을, 다음 한 문장은 언제 쓰는지를 말해요.

tds-body-215 / 1.50 · 400 (기본 본문)

카드 본문 기본값이에요. 1.5 line-height는 한글 가독성을 위한 표준이며, 본문 가운데 em-dash나 느낌표는 사용하지 않아요.

tds-body-313 / 1.50 · 400

보조 텍스트 · 도움말 · timestamp. tabular figure는 잔액·환율·차트 같은 실시간 금융 데이터에 적용해요.

tds-caption12 / 1.40 · 500

메타 캡션 — 2026.05.11 13:24 KST · 거래 ID #20260511-9F4A

03.

Button — XL / L / M / S

사이즈마다 height·radius·label 폰트가 페어로 변한다

SIZE · XL 56 / L 48 / M 40 / S 32

VARIANT · primary / neutral / danger / ghost

STATE · default / pressed (흰 16% overlay) / disabled (opacity 30%)

CHIP · resting / active / brand

전체 입금 출금 자동이체 + 카테고리 추가

BADGE · washed bg + 시맨틱 텍스트 컬러

N 완료 신규 예약
04.

Inputs · Switch · Radius · Elevation

grey-100 resting → focus near-black + 1.5px blue ring

TEXT FIELD — idle / focused / error

최근 송금한 사람부터 자동 추천돼요.

잔액 1,234,567원 중 사용

20자까지 입력할 수 있어요.

SWITCH · CHECKBOX (resting / on)

RADIUS LADDER · 4 → 32 + full(999)

4 · xs
8 · s
12 · m
14 · l
16 · xl
20 · 2xl
24 · 3xl
32 · 4xl
999 · full

ELEVATION · shadow-1 / 2 / 3 / toast

shadow-1
menu
shadow-2
tooltip
shadow-3
dialog
shadow-toast
toast

dark 모드에선 shadow alpha를 0.30~0.56으로 강화해 dark 표면 위에서도 elevation이 인지되도록 해요. inner-shadow는 사용하지 않고, pressed state는 흰 16% overlay로 처리해요.

05.

List · Toast · Dialog

amount는 Bold 700 · +는 blue-500, −는 grey-900 (tabular nums)

최근 거래 내역

전체보기 ›
😊
엄마
토스뱅크 · 1234
+50,000원
방금 전
🚕
카카오T 택시
교통
−12,300원
오후 2:14
📦
쿠팡
쇼핑 · 즉시 결제
−34,900원
어제
🏷️
정기적금 자동이체
매월 25일
›

TOAST · grey-900 surface + near-black 라벨 (dark inversion)

✓
송금이 완료되었어요

DIALOG · radius 20 · shadow-3 (dark)

송금을 취소할까요?
취소하면 작성하던 내용이 사라져요.
06.

Key screen — 홈 / 송금 흐름

360px 컨테이너 · top-app-bar + bottom-cta + 떠 있는 tab-bar
←
홈
⌕

토스뱅크 · 1234

1,234,567원

사용 가능 금액 · 2026.05.11

↗
송금
↙
받기
＝
결제
…
더보기
이번 달 지출
−468,900원
지난 달보다 12% 적게 썼어요

최근 거래

😊
엄마
방금 전
+50,000원
🚕
카카오T
오후 2:14
−12,300원
📦
쿠팡
어제
−34,900원
●
홈
○
혜택
○
주식
○
전체
←
송금하기
×

받는 분

엄마

토스뱅크 · 1234

보낼 금액

120,000원

잔액 1,234,567원 중 사용

+1만 +5만 +10만 전액
받는 분이 받을 금액
120,000원
수수료 0원 · 즉시 입금

남기는 말 (선택)