빠른 판단
입력과 결과 영역을 명확히 구분해 필요한 답을 먼저 확인합니다.
Brand system
ToolPado
답부터 빠르게, 근거까지 분명하게
생활과 업무에 필요한 계산기, 금융 정보, 생활 도구와 개발자 도구를 한곳에서 빠르게 사용할 수 있는 서비스
ToolPado는 결과를 빨리 보여주되, 기준과 근거를 함께 제공하는 도구형 서비스의 정체성을 일관된 로고, 색상, 아이콘 체계로 확장합니다.
로고 사용 안내 보기Identity
도구가 필요한 순간을 짧게 줄입니다
ToolPado는 특정 계산기 하나가 아니라 생활 계산, 금융 정보, 개발자 유틸리티, 체크리스트형 생활 도구를 연결하는 플랫폼입니다.
분명한 근거
공식, 기준, 주의사항을 결과 아래에 함께 제공해 결과를 해석할 수 있게 합니다.
일관된 경험
PC와 모바일, 라이트와 다크 테마에서 같은 브랜드 인상과 사용 흐름을 유지합니다.
Core features
핵심 특징
다양한 도구
생활과 업무에 필요한 계산 기능
빠른 결과
최적화된 입력과 즉시 계산
정확한 정보
근거와 기준을 함께 안내
어디서나 사용
PC·모바일·태블릿 반응형
쉽고 간편하게
복잡한 과정 없이 바로 사용
Color system
브랜드 컬러
브랜드 페이지와 헤더는 `light`와 `dark` 디자인 토큰을 분리해 사용합니다. 색상 반전 필터가 아니라 실제 표면, 텍스트, 테두리, 포커스 토큰을 테마별로 적용합니다.
라이트 테마 컬러
Primary Navy
HEX: #10213D - 사용 용도
- 브랜드명, 주요 제목, 라이트 로고의 네이비 면
- 사용 기준
- 밝은 표면 위 주요 텍스트와 로고 배경
ToolPado Blue
HEX: #1D4ED8 - 사용 용도
- 슬로건, 링크, 활성 메뉴
- 사용 기준
- 흰색 및 연한 블루 표면 위 강조
Light Blue
HEX: #EAF2FF - 사용 용도
- 아이콘 배경, 보조 칩, 장식 패턴
- 사용 기준
- 네이비 텍스트 또는 블루 아이콘과 조합
Surface White
HEX: #FFFFFF - 사용 용도
- Hero와 카드 표면
- 사용 기준
- 네이비 제목과 블루·그레이 설명
Background Gray
HEX: #F6F8FC - 사용 용도
- 페이지 기본 배경
- 사용 기준
- 흰색 카드와 구분되는 밝은 배경
Text Navy
HEX: #10213D - 사용 용도
- 본문 제목과 브랜드 텍스트
- 사용 기준
- 흰색 및 밝은 블루 표면 기준
다크 테마 컬러
Deep Navy
HEX: #050D1C - 사용 용도
- 다크 페이지 기본 배경
- 사용 기준
- 넓은 영역의 검정 대체 배경
Surface Navy
HEX: #0D2347 - 사용 용도
- 카드, 검색창, 버튼 표면
- 사용 기준
- 밝은 텍스트와 반투명 테두리 조합
ToolPado Blue
HEX: #3B82F6 - 사용 용도
- 주요 강조, 아이콘, 활성 요소
- 사용 기준
- 딥 네이비와 서피스 네이비 위 강조
Light Blue
HEX: #60A5FA - 사용 용도
- 슬로건, 포커스 링, 다크 로고 하이라이트
- 사용 기준
- 어두운 표면 위 식별성 확보
Primary Text
HEX: #F8FAFC - 사용 용도
- Hero 제목과 카드 제목
- 사용 기준
- 딥 네이비와 카드 표면 기준
Secondary Text
HEX: #C7D7EF - 사용 용도
- 설명 문구와 보조 정보
- 사용 기준
- 흰색 과사용 없이 정보 계층 구분
Logo use
로고 및 브랜드명 사용 안내
라이트 배경에는 라이트 테마용 로고를, 어두운 배경에는 다크 테마용 로고를 사용합니다.
- 로고와 아이콘의 가로세로 비율을 유지합니다.
- 밝은 배경과 어두운 배경에 맞는 자산을 구분해 사용합니다.
- 아이콘 주변에 불필요한 흰색 캔버스나 검은 외곽선을 추가하지 않습니다.
- 복잡한 사진 위에는 충분한 대비를 보장하는 표면을 먼저 둡니다.
- 작은 크기에서는 심볼 단독 사용을 우선합니다.
Icon system
파비콘 및 앱 아이콘
파비콘, Apple Touch Icon, Android/PWA 아이콘은 같은 ToolPado 심볼을 기준으로 생성합니다.
파비콘
브라우저 탭에서는 테마에 맞는 SVG favicon을 우선 사용합니다.
PWA 192
manifest의 기본 설치 아이콘입니다.
Maskable 512
안전 영역 안에 심볼이 들어가도록 생성한 대형 아이콘입니다.
Apple Touch
iOS 홈 화면에 사용하는 180px 아이콘입니다.
Open Graph
공유 이미지에는 로고, 슬로건, 컬러 시스템을 함께 노출합니다.
Implementation policy
신규 화면 적용 기준
새 페이지는 공통 마크업과 역할 기반 토큰을 우선 사용하고, 테마별 로고와 실제 이미지가 필요한 경우에만 자산을 분리합니다.
토큰 우선
헤더, 카드, 텍스트, 포커스 색상은 `--tp-*` 역할 토큰을 기준으로 연결합니다.
테마명 통일
코드와 설정에서는 `light`와 `dark`만 사용합니다.
콘텐츠 우선
브랜드 소개의 주요 문구는 이미지가 아니라 HTML 텍스트로 제공합니다.
반응형 검증
320px부터 데스크톱까지 가로 스크롤과 텍스트 잘림을 확인합니다.
Assets
브랜드 에셋
파일명에서 `light`는 밝은 테마에서 쓰는 자산, `dark`는 어두운 테마에서 쓰는 자산을 의미합니다.
SVG 아이콘 - 라이트 테마용
밝은 표면에서 사용하는 네이비·블루 심볼
/assets/brand/toolpado-icon-light.svg SVG 아이콘 - 다크 테마용
어두운 표면에서도 같은 기존 심볼을 유지하는 연결 자산
/assets/brand/toolpado-icon-dark.svg SVG 로고 - 라이트 테마용
밝은 배경용 네이비 워드마크
/assets/brand/toolpado-logo-light.png SVG 로고 - 다크 테마용
어두운 배경용 밝은 워드마크
/assets/brand/toolpado-logo-dark.png PNG OG - 라이트 테마용
라이트 테마 공유 이미지
/assets/brand/toolpado-og-light.png PNG OG - 다크 테마용
다크 테마 공유 이미지
/assets/brand/toolpado-og-dark.png 
PWA 192 아이콘
manifest 기본 앱 아이콘
/icon-192.png PWA 512 아이콘
manifest 대형 및 maskable 앱 아이콘
/icon-512.png Apple Touch Icon
iOS 홈 화면 아이콘
/apple-touch-icon.png