← 목록
#4

토스 홈 (Toss Minimal Blue)

출처토스 공식 홈페이지 히어로
날짜2026-07-09
카테고리web
태그토스, 미니멀, 3D일러스트, 블루, 핀테크
토스 홈 (Toss Minimal Blue)
🗣️ 이렇게 말하세요
"4번(토스 홈 (Toss Minimal Blue)) 스타일로 만들어줘"
에이전트용 정본: ~/design-team/references/web/toss-home-20260709.md
색상토큰HEX
background#FFFFFF
heroGradient#D9E9F7
heading#191F28
textSecondary#6B7684
accent#3182F6
ctaButton#000C1E
역할폰트비고
headingToss Product Sans초대형 볼드, fallback Noto Sans KR
bodyToss Product Sans그레이 위계로 강약

관찰 체크리스트 (레퍼런스 충실 프로토콜 1단계)

# 항목 레퍼런스는? (관찰)
1 레이아웃 형태 풀블리드 히어로 1단 — 중앙 정렬 2행 대형 헤드라인, 그 아래 스토어 버튼 2개, 배경 전체에 3D 오브젝트를 격자형으로 흩뿌림
2 네비게이션 상단 슬림 헤더: 좌측 로고, 중앙 텍스트 메뉴 7개(회사 소개~채용), 우측 KOR|ENG 언어 토글. 배경과 자연스럽게 융화
3 진도 표시 해당 없음 (하단 중앙에 스크롤 유도 셰브론(⌄)만)
4 인터랙션 스크롤 유도 셰브론, 3D 오브젝트 모션 연출(정적 캡처라 추정), 라운드 버튼 호버
5 색·타이포 화이트→아이스블루 그라데이션 배경, 잉크 블랙(#191F28) 초대형 볼드 헤드라인, 토스 블루(#3182F6) 포인트, 본문은 그레이 위계(#333D4B/#4E5968/#6B7684/#B0B8C1). 전용 서체 Toss Product Sans
6 도식·일러스트 실사풍 3D 렌더 금융 오브젝트(카드·자물쇠·동전·트럭·선물상자 등) — 아이스블루·화이트 톤으로 통일해 배경과 한 몸
7 콜아웃·박스 다크 네이비 반투명 라운드 버튼 2개(App Store/Google Play) — 아이콘+레이블, 밝은 배경 위 유일한 다크 요소로 시선 고정
8 반응형 정적 캡처라 확인 불가 (추정: 모바일 1열 중앙 정렬)
9 표지 히어로가 곧 표지 — "금융의 모든 것 / 토스에서 쉽고 간편하게" 2행 카피가 화면의 절대 중심

관측 노트