# 토스 TDS Mobile 파운데이션 (컬러 + 타이포그래피)

출처: https://tossmini-docs.toss.im/tds-mobile/foundation/colors/ (토스 미니앱 개발자용 공개 문서, 색상 참고용)
브랜드 컬러: Toss Blue #0064FF, Toss Gray #202632 (출처: https://brand.toss.im/)

| 토큰 | 값 |
|---|---|
| grey50 | #f9fafb |
| grey100 | #f2f4f6 |
| grey200 | #e5e8eb |
| grey300 | #d1d6db |
| grey400 | #b0b8c1 |
| grey500 | #8b95a1 |
| grey600 | #6b7684 |
| grey700 | #4e5968 |
| grey800 | #333d4b |
| grey900 | #191f28 |
| blue50 | #e8f3ff |
| blue100 | #c9e2ff |
| blue200 | #90c2ff |
| blue300 | #64a8ff |
| blue400 | #4593fc |
| blue500 | #3182f6 |
| blue600 | #2272eb |
| blue700 | #1b64da |
| blue800 | #1957c2 |
| blue900 | #194aa6 |
| red50 | #ffeeee |
| red100 | #ffd4d6 |
| red200 | #feafb4 |
| red300 | #fb8890 |
| red400 | #f66570 |
| red500 | #f04452 |
| red600 | #e42939 |
| red700 | #d22030 |
| red800 | #bc1b2a |
| red900 | #a51926 |
| greyOpacity50 | #001733 |
| greyOpacity100 | #022047 |
| greyOpacity200 | #001b37 |
| greyOpacity300 | #001d3a |
| greyOpacity400 | #001936 |
| greyOpacity500 | #031832 |
| greyOpacity600 | #00132b |
| greyOpacity700 | #031228 |
| greyOpacity800 | #000c1e |
| greyOpacity900 | #020913 |
| orange50 | #fff3e0 |
| orange100 | #ffe0b0 |
| orange200 | #ffcd80 |
| orange300 | #ffbd51 |
| orange400 | #ffa927 |
| orange500 | #fe9800 |
| orange600 | #fb8800 |
| orange700 | #f57800 |
| orange800 | #ed6700 |
| orange900 | #e45600 |
| yellow50 | #fff9e7 |
| yellow100 | #ffefbf |
| yellow200 | #ffe69b |
| yellow300 | #ffdd78 |
| yellow400 | #ffd158 |
| yellow500 | #ffc342 |
| yellow600 | #ffb331 |
| yellow700 | #faa131 |
| yellow800 | #ee8f11 |
| yellow900 | #dd7d02 |
| green50 | #f0faf6 |
| green100 | #aeefd5 |
| green200 | #76e4b8 |
| green300 | #3fd599 |
| green400 | #15c47e |
| green500 | #03b26c |
| green600 | #02a262 |
| green700 | #029359 |
| green800 | #028450 |
| green900 | #027648 |
| teal50 | #edf8f8 |
| teal100 | #bce9e9 |
| teal200 | #89d8d8 |
| teal300 | #58c7c7 |
| teal400 | #30b6b6 |
| teal500 | #18a5a5 |
| teal600 | #109595 |
| teal700 | #0c8585 |
| teal800 | #097575 |
| teal900 | #076565 |
| purple50 | #f9f0fc |
| purple100 | #edccf8 |
| purple200 | #da9bef |
| purple300 | #c770e4 |
| purple400 | #b44bd7 |
| purple500 | #a234c7 |
| purple600 | #9128b4 |
| purple700 | #8222a2 |
| purple800 | #73228e |
| purple900 | #65237b |
| background | #FFFFFF |
| layeredBackground | #FFFFFF |
| floatedBackground | #FFFFFF |

## 타이포그래피 토큰 (출처: https://tossmini-docs.toss.im/tds-mobile/foundation/typography/)
| 토큰 | 폰트 크기 | 라인 높이 | 용도 |
|---|---|---|---|
| Typography 1 | 30 | 40 | 매우 큰 제목 |
| Typography 2 | 26 | 35 | 큰 제목 |
| sub Typography 5 | 24 | 33 | 조금 큰 제목 |
| Typography 3 | 22 | 31 | 일반 제목 |
| Typography 4 | 20 | 29 | 작은 제목 |
| sub Typography 8 | 19 | 28 | 조금 큰 본문 |
| Typography 5 | 17 | 25.5 | 일반 본문 |
| Typography 6 | 15 | 22.5 | 작은 본문 |
| Typography 7 | 13 | 19.5 | 안 읽어도 됨 |
| sub Typography 13 | 11 | 16.5 | 아예 안 읽어도 됨 |

모바일(pt) 기준 값. 16:9 슬라이드(1280x720)에서는 비율을 유지한 채 2배로 적용.