토스뱅크
자간을 한 번도 건드리지 않은 70px w800 국문 제목 — 다크 기사 피드와 흰 상품 페이지를 서체 한 계열로 잇는다.
인터넷전문은행의 상품·공시 사이트로, 한 도메인이 두 지면으로 갈립니다 — 홈과 기사는 검정에 가까운 다크 지면, 상품·공시·법령은 흰 지면입니다. 홈이 마케팅 랜딩이 아니라 3열 기사 카드가 계속 이어지는 콘텐츠 피드라는 점이 토스 세 사이트 중 이곳만의 구조입니다. 국문 대형 제목은 상품 페이지가 맡아 70px에 800 웨이트까지 올라가는데, 자간은 70px 제목부터 11px 캡션까지 단 한 건도 조정하지 않습니다. 제목의 2행 줄바꿈이 전부 명사구나 부사절에서 끊겨 있어 국문 히어로의 줄나눔 표본으로도 쓸 수 있습니다.
https://www.tossbank.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Toss Product Sans · 400 / 500 / 600 / 700 / 800display·heading·body·ui — 홈·상품·기사·공시·목록 전부
Toss Product Sans Light · 400 / 500 / 600 / 700법령 문서 전용 본문
Apple Color Emoji · 400 / 700이모지
Type Scaleraw 32스타일 전부 letter-spacing이 null(normal)이다 — 70px 디스플레이부터 11px 캡션까지 자간 조정이 한 건도 없다
display70px · 800 · 1.3
다람쥐 헌 쳇바퀴
h156px · 700 · 1.25
다람쥐 헌 쳇바퀴
h248px · 800 · 1.3
다람쥐 헌 쳇바퀴
h336px · 700 · 1.3
다람쥐 헌 쳇바퀴
h424px · 700 · 1.6
다람쥐 헌 쳇바퀴
body-lg20px · 700 · 1.6
다람쥐 헌 쳇바퀴
body17px · 400 · 1.6
다람쥐 헌 쳇바퀴
link16px · 400 · 1.5
다람쥐 헌 쳇바퀴
label15px · 500 · 1.5
다람쥐 헌 쳇바퀴
caption12px · 500 · 1.6
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Toss Product Sans 계열 35,064글리프(100%) — 한글을 그리는 다른 서체가 하나도 없다. 선언 1순위(Toss Product Sans)와 렌더가 일치하지만 패밀리가 둘로 갈린다 — Toss Product Sans 20,648(58.9%, 서브셋 98–119.woff2 20파일)와 Toss Product Sans Light 14,416(41.1%, TossProductSansLight-*.woff2 4파일) |
| hangulWeights | 400 25,326(72.2%) · 700 6,153 · 500 1,947 · 600 1,560 · 800 78. 400은 Regular×13,154 + Light×12,172로 갈리고, 800(Extrabold)은 78글리프뿐이지만 그게 70px·48px 국문 디스플레이다 |
| body | 17/400 lh1.60 자간 0(기사 660px 컬럼) · 15/400 lh1.33 · 14/400 lh1.60 · 12/400 lh1.60(개인정보처리방침, Toss Product Sans Light) |
| sub | 20/700 lh1.60 ×10 · 20/500 lh1.60 ×1(상품 피처 설명, layout bodyPx 20·18) · 24/700 lh1.60 ×14 |
| label | 15/500 lh1.50 ×9(nav 24라벨, 렌더는 Toss Product Sans Medium) · 12/500 lh1.60 ×19 · 11/600 lh1.60 ×9 · 11/400 lh1.60 ×18 |
| mixing | 한 계열이 한글·라틴·숫자를 전부 담당한다 — 영문 전용 서체 층이 없고, 라틴에 따로 잡힌 이름은 이모지 25글리프뿐이다. 대신 문서 종류로 서체가 갈린다: 마케팅·상품·기사는 Toss Product Sans, 개인정보처리방침은 Toss Product Sans Light. 이모지는 OS 폰트로 떨어지며 기사 소제목이 이모지로 시작하는 패턴이 12회 이상('👷'·'💵'·'📉'·'🔗' 등) |
| hangulHeadings | 있음 — 70/800 lh1.30 '하루만 넣어도 / 이자가 쌓이는 통장'(상품 히어로 2행, padT146, 지면 #F2F4F6) · 56/700 lh1.25 '토스뱅크 나눠모으기 통장' · 48/800 상품 피처 3개('정해진 기간 없이 / 하루만 넣어도'·'이제 큰 금액도 / 간편하고 안전하게'·'수수료 없이 / 마음 편하게') · 48/700 홈 히어로 '저금할수록 커지는 / 키워봐요 31일적금' · 40/700 '용도별로 / 통장 만들기' · 36/700 ×5(공시정보·재무정보·공지사항) · 28/700·24/700 ×14. 국문 대형 제목 표본 12개 이상이고 전부 자간 0이다 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효하다. 라이브러리에서 드문 두 가지를 갖는다 — ① 자간 0으로 짜인 70px 국문 디스플레이(같은 서체를 쓰는 toss.im은 −2%를 건다) ② weight 800 국문 제목(Extrabold 한글 78글리프). 2행 줄바꿈이 전부 명사구/부사절 끊기('하루만 넣어도 / 이자가 쌓이는 통장')라 국문 히어로 줄나눔 표본으로도 쓸 수 있다. 본문 레퍼런스로는 페이지 종류를 갈라 봐야 한다 — 기사·상품은 Toss Product Sans 17/400 lh1.60, 법령은 Toss Product Sans Light 12/400 lh1.60으로 서체가 다르다. 뷰어에 Toss Product Sans가 없으므로 미리보기는 Pretendard 대체 |
| rendered | Toss Product Sans ×13154 · Toss Product Sans Light ×12172 · Toss Product Sans Bold ×4983 · Toss Product Sans Semibold ×1490 · Toss Product Sans Light Bold ×1170 · Toss Product Sans Light Medium ×1004 · Toss Product Sans Medium ×943 · Toss Product Sans Extrabold ×78 · Toss Product Sans Light Smbold ×70 |
영문 · Latin국문과 동일
| latinFont | Toss Product Sans 11,278글리프(91.1%) · Toss Product Sans Light 1,073글리프(8.7%) · Apple Color Emoji 25글리프(0.2%) · Toss Product Sans Light Smbold 6글리프(0.0%) |
| latinWeights | 실측 페이스 Light · Bold · Medium · Semibold · Extrabold · bold |
| share | 라틴 12,382글리프 / 한글 35,064글리프 — 지면의 26.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Toss Product Sans를 쓰는 단: display 70px/800 · h1 56px/700 · h2 48px/800 · h3 36px/700 · h4 24px/700 · body-lg 20px/700 · body 17px/400 · link 16px/400 · label 15px/500 · caption 12px/500 |
| mixing | 국영문 혼용 노드 785개(전체 2,064개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 26.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 91.1%를 그리는 Toss Product Sans가 한글도 93.6% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Toss Product Sans · Toss Product Sans Light · Toss Product Sans Light Smbold |
| rendered | Toss Product Sans ×5501 · Toss Product Sans Light ×3535 · Toss Product Sans Bold ×1166 · Toss Product Sans Light Medium ×835 · Toss Product Sans Medium ×543 · Toss Product Sans Semibold ×474 · Toss Product Sans Light Bold ×238 · Toss Product Sans Extrabold ×59 · Apple Color Emoji ×25 · Toss Product Sans Light Smbold ×6 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 4px | |
| Max width | 1392px | |
| Section gap | 홈 기사 그리드 행 피치 388–389(카드 348 + 아래 여백 32) | |
| Header | 48px fixed | |
| Content Widths | 홈 1392(cands 1392×3) · 경영공시·유의사항 1200 · 공지 1192 · 개인정보처리방침 1172(cands 1172×320) · 상품 2종 996(cands 996×67/76) · 채용 932 · 기사 본문 660(cands 660×84), 기사 '연관 콘텐츠'만 1008 | |
| Grid Home Feed | 3열 기사 카드, 카드 높이 348, 행 피치 388–389, 13행 39장(y760 → y5421) | |
| Grid Article Related | 3열 320×333 거터 24 (320×3+24×2=1008) | |
| Grid Recruit | 2열 카드 높이 300, 행 피치 340, 4행 8장(y582 → y1602), 콘텐츠 932 | |
| Grid Financial | 재무정보 4열 98×24 거터 34, 9행 | |
| Grid Legal Table | 개인정보처리방침 표 5열 234×55 · 234×45 · 149×45 / 6열 179×55 / 4열 292×55·183×55 / 3열 390×55·504×125, 셀 거터 0, 셀 배경 rgb(229,232,235) | |
| List Rows | 경영공시 20행 1200×48 r10 · 공지 10행 1200×70 r10 · 상품안내 22행(통장)·19행(나눠모으기) 996×38 · 개인정보 목차 10행 1169×41 | |
| Card Padding | 기사 콜아웃 16/16 · 개인정보 표 셀 3/3 · '자세히 보기' 18×32 · '파일 다운로드' 4×6 · 날짜 인풋 0×14 | |
| Button Padding | 18×32 r100(알약 CTA) · 4×6 r5(파일 다운로드) · 0×14 r12(날짜 칩) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 1px | 52회 · div — 최다값이지만 표·구분 요소 잔재로 보인다(미확인) |
| small | 5px | 25회 · '파일 다운로드' 버튼 |
| — | 6px | 2회 · 인풋 |
| — | 8px | 2회 · div |
| list | 10px | 43회 · 목록 행(경영공시 1200×48 · 공지 1200×70) · li |
| — | 12px | 2회 · 날짜 인풋 칩(0×14) |
| — | 14px | 3회 · div |
| button | 16px | 8회 · 버튼 |
| — | 18px | 6회 · div |
| link-card | 20px | 48회 · a — 링크 카드. 라운드 중 실질 최다 |
| slide | 24px | 11회 · 히어로 슬라이드(1·2·3번째 슬라이드) |
| — | 32px | 3회 · span |
| large | 40px | 9회 · 큰 버튼 |
| circle | 50% | 2회 · 원형 버튼 |
| pill | 100px | 24회 · 알약 CTA('자세히 보기' 18×32) |
Guidelines
Do
- 국문 대형 제목의 자간은 0으로 둔다 — raw 32스타일 전부 letter-spacing null이고 70px w800 히어로도 예외가 아니다
- 행간을 두 층으로 갈라 쓴다: 디스플레이 1.25–1.30(70px 1.30 · 56px 1.25 · 36px 1.30), 본문·UI 1.60(24·20·17·14·12·11px 전부)
- 다크 지면(#101013)의 본문은 #E5E8EB(15.44:1 ×58)·#B0B8C1(9.47:1 ×105)·#8B95A1(6.25:1 ×51)로 올린다
- 상품 히어로는 흰 지면이 아니라 회색 #F2F4F6(656회, 섹션 833px)이나 연파랑 #E8F3FF(섹션 470px)에 얹고 위 여백 146px 또는 60px을 준다
- 깊이는 그림자 대신 알파 오버레이로 만든다 — 다크 카드 rgba(209,209,253,.05)(20회), 콜아웃 rgba(217,217,255,.11) + 패딩 16
- 목록은 폭을 통일한다: 문서 목록 1200×48/70 radius 10, 상품 스펙 996×38, 법령 목차 1169×41
- 모션은 0.2s(621회)·0.15s(140회)에 ease/ease-in까지만. 링크는 0.15s·0.3s ease-in으로 transform+background를 함께 옮긴다(48회)
- 헤더는 48px fixed로 두고 다크 지면에서만 지면색을 α.7로 희석해 채운다
Don't
- 자간을 음수로 조이지 않는다 — 같은 서체를 쓰는 toss.im은 전 단계 −2%(80px −1.6 → 16px −0.32)지만 토스뱅크는 0이다. 두 사이트의 조판 규칙을 섞으면 충돌한다
- #212529(부트스트랩 기본 본문색)를 다크 지면에 올리지 않는다 — #0B0B0D에서 1.27:1 ×118, #101013에서 1.23:1 ×26이 실측된다
- #6B7684을 흰 지면 밖에서 본문으로 쓰지 않는다 — #0B0B0D 4.26 ×216 · #E5E8EB 3.75 ×87 · #101013 4.12 ×27로 전부 AA 미달이다
- 그림자로 면을 띄우지 않는다 — 그림자는 3종 29회이고 그중 25회가 투명 인셋 링(rgba(0,0,0,0) 0 0 0 1px), 실사용은 rgba(0,0,0,.1) 0 25px 50px 1회뿐이다
- 라운드를 한 값으로 통일했다고 가정하지 않는다 — 15값(1·5·6·8·10·12·14·16·18·20·24·32·40·50%·100px)이 흩어져 있고 큰 카드·피처 면은 radius 0px다
- 홈을 마케팅 랜딩으로 재현하지 않는다 — 히어로 1개(y200 h328) 다음은 3열 기사 카드가 92,919px까지 이어지는 피드다
- 본문 서체를 한 벌로 가정하지 않는다 — 개인정보처리방침 한 페이지만 Toss Product Sans Light 계열(한글 14,416글리프)로 통째로 갈아탄다. 그 페이지 한글의 100%가 Light 계열이다
- 오버슈트·바운스 커브를 넣지 않는다 — 이징은 ease(710)·ease-in(122)·ease-out(96)·linear(9)뿐이고 커스텀 커브는 애니메이션 1종(_1rtlufta 0.6s)에만 있다
