Logo

Tiro 로고의 구성, 변형, 사용 규칙.

상징성

Tiro 로고는 만년필 촉이자 동시에 똑바로 선 사람으로 읽힙니다. 만년필 = 정밀함과 기록, 사람 = 믿음직한 동료. 촉 중앙의 비움(ink hole)이 시각적 무게를 더합니다.

Construction

• 상징: brown-800 배경 위 흰색 pen-person 도형
• 컨테이너: 둥근 사각형 (squircle)
• Corner radius: 컨테이너 너비의 약 22% (iOS 앱 아이콘 규격)
• Clear space: 상징 주변 내부 여백 — 컨테이너 너비의 ≥ 15%
• 정렬: 상징은 수직 중앙, 원(머리)은 촉 본체 위

Variants

Usage Rules

• 항상 둥근 사각형 컨테이너 안에. 자유 배치 금지.
• 고정 브랜드 컨테이너는 bg-brand-dark + fg-on-dark를 사용합니다. 일반 앱 표면의 단색 심벌·워드마크는 아래 fg-logo 규칙을 따릅니다.
• 절대 과대화 금지. 로고는 도장이지 간판이 아닙니다.
• 로고 주변 여백은 최대한 확보 — "여백을 충분히 확보할수록 완성도가 높아진다."
• 로고는 Tiro가 "말할 때"만 컨테이너 밖으로 나옵니다: AI 채팅 인사, 온보딩 환영, 알림 아바타 — Tiro가 브랜드 마크가 아닌 캐릭터로서 등장하는 순간.
• 워드마크 "Tiro"는 Pretendard JP Medium, 컨테이너 크기에 비례.

사진 위 배치

로고가 사진과 함께 등장할 때:

• 로고는 단색 패널 위 (크림 또는 브라운)에 배치. 사진 위에 겹치지 않음.
• 또는: 로고가 작고, 사진 배경이 시각적으로 조용할 때만 넉넉한 clear space를 두고 오버레이.
• 레이아웃 느낌은 "도장이 사진 옆에 찍혀 있는 것" — 워터마크가 아님.

단색 로고 색 — fg-logo

단색 심볼·워드마크는 SVG를 fill="currentColor"(또는 stroke="currentColor")로 그리고, 감싸는 요소의 글자색으로 잉크색을 정합니다. 로고 잉크는 fg-primary가 아니라 전용 시맨틱 fg-logo로 칠합니다. 두 토큰은 값이 겹치는 자리가 있어도 목적이 다릅니다 — fg-primary는 강조·선택·타이틀용 브랜드색이고, fg-logo는 로고 자산 전용이라 fg-primary의 시맨틱 연결을 바꿀 때 로고 연결은 독립적으로 유지합니다. 공유 primitive 자체의 변경은 로고에도 반영됩니다.

면에 따라 토큰을 고릅니다.

{/* 일반 앱 표면 — 모드에 대응. 라이트 brown, 다크 white */}
<span className="text-tds-fg-logo">
  <TiroSymbol aria-label="Tiro" />        {/* SVG fill="currentColor" */}
</span>

{/* 고정 어두운 면 위 로고 — 두 모드 모두 흰 잉크 */}
<footer className="bg-tds-bg-brand-dark">
  <span className="text-tds-fg-on-dark">
    <TiroWordmark aria-label="Tiro" />     {/* currentColor */}
  </span>
</footer>

{/* 고정 밝은 면 위 로고 — 두 모드 모두 어두운 잉크 */}
<div className="bg-tds-bg-light">
  <span className="text-tds-fg-on-light">
    <TiroSymbol aria-label="Tiro" />       {/* currentColor */}
  </span>
</div>

밝은 고정 면에 꼭 브랜드 브라운 로고가 필요하다면 fg-on-light(stone-800)로는 브라운이 나오지 않습니다. 이때는 별도 브랜드 자산이나 컴포넌트 정책이 필요하며, 새 토큰을 추측해 만들지 않습니다. 소스에 선언이 없으면 신설을 제안하세요.

멀티컬러 파트너 로고·사진·장식 그래픽은 fg-logo의 대상이 아닙니다. fg-logo는 단색 Tiro 마크에만 씁니다.

로고를 일반 버튼처럼 감쇠(disabled 처리)하지 않습니다. 로고 자산의 비활성 표현이 필요하면 전역 fg-primary를 바꾸지 말고 로고 자산·컴포넌트 층에서 다룹니다.

Do / Don't

• Do: 로고는 항상 둥근 사각형 컨테이너 안에
• Do: 최대한의 clear space로 premium 느낌 전달
• Do: Tiro가 "행동하는 순간"에만 컨테이너 밖 사용 (AI 채팅 등)
• Don't: 로고를 자유 배치, 회전, 기울임, 왜곡 금지
• Don't: 사진 위에 로고를 워터마크처럼 오버레이 금지
• Don't: 로고를 간판처럼 크게 키우지 말 것 — 도장의 절제