TELLBY
한국어
브랜드 가이드

텔비 로고와 쓰는 법

공식 로고는 여기 있는 파일뿐이에요. 다시 그리거나 글꼴로 흉내 내지 말고 파일을 그대로 쓰세요. 영상 끝화면·썸네일·제휴 자료 모두 같아요.

로고 묶음 내려받기 (ZIP)SVG 7개 · PNG 14개(1024·512, 투명 바탕)

로고 종류

바탕이 밝으면 검은 글자, 어두우면 흰 글자를 써요. 주황 점은 어느 바탕에서나 같은 주황이에요.

Tellby
앱 아이콘

주황 네모 + 검은 테두리 흰 핀 + 재생 삼각형. 프로필 사진·파비콘·앱 바로가기.

SVGPNG 1024PNG 512
TELLBY
워드마크 — 밝은 바탕

기본 로고. 영상 끝화면·문서·웹 머리.

SVGPNG 1024PNG 512
TELLBY
워드마크 — 어두운 바탕

사진·영상 위, 어두운 화면.

SVGPNG 1024PNG 512
Tellby
가로 조합 — 밝은 바탕

아이콘과 워드마크를 같이 보일 때. 간격과 크기 비율은 고정.

SVGPNG 1024PNG 512
Tellby
가로 조합 — 어두운 바탕

어두운 바탕용 가로 조합.

SVGPNG 1024PNG 512
Tellby
축약형 T•

아주 좁은 자리(휴대폰 메뉴, 작은 워터마크)에만.

SVGPNG 1024PNG 512
Tellby
축약형 T• — 어두운 바탕

어두운 바탕용 축약형.

SVGPNG 1024PNG 512

워드마크 짜임

앱 머리 Wordmark.tsx 그대로예요. 글자 크기 26 기준으로 적었고, 크기를 바꾸면 모두 같은 비율로 커져요.

글자
TELLBY · Inter Bold 700 · 대문자 · 윤곽선(글꼴 없이 같음)
자간
1.5 (글자 크기의 0.058배)
점
지름 8 (글자 크기의 0.31배) · 주황 #FF6933
점 자리
마지막 글자 뒤 3 · 위에서 4 — 점 윗변이 대문자 윗선보다 조금 위(오른쪽 윗선)

여백과 최소 크기

여백의 단위는 점 지름(D)이에요. 로고 둘레 D×3 안에는 글·그림·화면 끝이 들어오지 않게 해요.

여백 = D × 3D = 점 지름
로고화면(최소)인쇄(최소)
워드마크·가로 조합가로 80px가로 20mm
축약형 T•높이 16px높이 5mm
앱 아이콘24px8mm

앱 아이콘 둘레 여백은 한 변의 1/8 이상. 모서리는 그 자리의 규칙(iOS 둥근 네모, 원형 프로필)을 따라도 되고, 안의 그림은 바꾸지 않아요.

하지 말 것

아래처럼 바꾼 것은 텔비 로고가 아니에요.

✕ 안 돼요 색 바꾸기
✕ 안 돼요 주황 어둡게·흐리게
✕ 안 돼요 점 떨어뜨리기·옮기기
TELLBY
✕ 안 돼요 가는 글씨로 다시 쓰기
✕ 안 돼요 늘이기·찌그러뜨리기
✕ 안 돼요 그림자·테두리·효과 넣기

색

앱 frontend/constants/theme.ts 와 웹 theme.css 가 같은 값이에요. 대비는 WCAG 기준(4.5 이상이면 본문 글자 가능).

색코드쓰임대비
주황 (Accent)#FF6933점·주요 단추·고른 것. 주황 위 글자는 늘 잉크색.Aa6.19:1 위 #16181D · 본문 가능Aa2.76:1 위 #FCFAF8 · 글자 금지
잉크 (주황 위 글자)#16181D주황 바탕 위 글자·아이콘. ★흰 글자 금지.Aa6.19:1 위 #FF6933 · 본문 가능
바탕#FCFAF8밝은 화면 바탕.Aa17.15:1 위 #0F172A · 본문 가능
글자#0F172A본문·워드마크 글자(밝은 바탕).Aa17.15:1 위 #FCFAF8 · 본문 가능
보조 글자#475569설명·날짜·작은 글자.Aa7.28:1 위 #FCFAF8 · 본문 가능
테두리·그림자#111111카드·단추 2px 테두리, 각진 그림자.Aa18.14:1 위 #FCFAF8 · 본문 가능
어두운 바탕#0B0B0D어두운 화면 바탕 — 글자는 흰색.Aa19.66:1 위 #FFFFFF · 본문 가능

Aa흰 글자 on 주황 2.87:1 · 글자 금지

글꼴

라틴 글자는 Inter, 한글은 Noto Sans KR. 둘 다 무료(SIL OFL)예요. 제목은 700·800, 본문은 400.

Inter · 700 / 800

Hear the city

TELLBY 0123456789

Noto Sans KR · 700 / 400

도시를 소리로 듣다

지나치는 곳마다 이야기가 있어요

크기 단계 (앱 Typography)

  1. display · 48 · 700소리로 듣다
  2. h1 · 26 · 700소리로 듣다
  3. h2 · 20 · 700소리로 듣다
  4. body · 16 · 400소리로 듣다
  5. small · 14 · 400소리로 듣다
  6. micro · 12 · 500소리로 듣다

모양

검은 테두리와 흐리지 않은 각진 그림자가 텔비의 얼굴이에요. 흐린 그림자·그라데이션은 쓰지 않아요.

테두리
2px #111111 (고해상도 휴대폰 1.5px) · 어두운 화면에서는 흰색
그림자
작은 것 2px 2px 0 · 카드 4px 4px 0 · 흐림 0
둥근 정도
8 · 12 · 카드 14 · 16 · 24 · 칩 10 · 알약 단추 끝까지 둥글게
누르는 크기
최소 44px
카드 — 2px 테두리 + 4px 그림자
주요 단추보조 단추칩칩

태그라인

첫 화면 큰 문구

도시를 소리로 듣다

Hear the city

바닥 한 줄

지나치는 곳마다 이야기가 있어요

Every place you pass has a story

문구를 줄이거나 바꾸지 말고 그대로 써요. 한국어 자리에는 한국어, 영어 자리에는 영어.