Horizontal Logo
홈페이지 header/footer, 넓은 카드, 문서 표지의 기본 로고입니다.
assets/logo-horizontal.svg홈페이지, Windows 프로그램, 문서, 다운로드 페이지에서 같은 로고 자산과 같은 색상 토큰을 쓰기 위한 기준 페이지입니다.
웹에서는 SVG를 우선 사용하고, PNG는 SVG를 쓸 수 없는 환경에서만 보조 자산으로 사용합니다.
홈페이지 header/footer, 넓은 카드, 문서 표지의 기본 로고입니다.
assets/logo-horizontal.svg아이콘 없이 브랜드명만 필요한 곳에서 사용합니다.
assets/logo-text.svg앱 아이콘, favicon, 작은 사이드바, 버튼형 배지에 사용합니다.
assets/logo-symbol.svg프로그램에서 텍스트로 로고를 그릴 때도 아래 값을 기준으로 맞춥니다.
| Font stack | Pretendard, Inter, Noto Sans KR, Segoe UI, Arial, sans-serif |
|---|---|
| Weight | 900 또는 Windows GDI 기준 FW_HEAVY |
| SVG size / spacing | font-size: 118, letter-spacing: -3 |
| Logo baseline | logo-text.svg y=116, logo-horizontal.svg y=186 |
| Text color | RemoteAll #24232e, Desk #f24b43 |
| Desk position | logo-text.svg x=600, logo-horizontal.svg x=934 |
로고의 Desk 레드와 제품 UI의 버튼 레드는 역할을 나누어 사용합니다.
#f24b43Desk 워드마크, 브랜드 강조.
#e9464d주요 버튼, 선택 상태, 오류 강조.
#ce3138hover/pressed, 진한 경계.
#ff6868그라데이션 하이라이트.
#fff1f2탭 배경, 배지, 부드러운 강조면.
#fff8f8카드/섹션의 아주 옅은 배경.
#ffd8dc연한 레드 테두리.
#24232eRemoteAll 워드마크 본문색.
웹 CSS와 Windows GDI 코드에서 같은 값을 참조합니다.
:root {
--brand-ink: #24232e;
--brand-red: #f24b43;
--primary: #e9464d;
--primary-dark: #ce3138;
--primary-hot: #ff6868;
--primary-soft: #fff1f2;
--primary-pale: #fff8f8;
--primary-border: #ffd8dc;
}
// Windows GDI
const COLORREF kBrandInk = RGB(36, 35, 46);
const COLORREF kBrandRed = RGB(242, 75, 67);
const COLORREF kPrimaryRed = RGB(233, 70, 77);
const COLORREF kPrimaryDark = RGB(206, 49, 56);
로고는 흰색 또는 아주 옅은 배경 위에 배치하고, 텍스트 로고를 임의로 늘리거나 자간을 다시 조정하지 않습니다.
흰 배경이 포함된 PNG를 색이 있는 카드 위에 그대로 올리면 배경 박스가 보입니다. 이 경우 SVG 또는 투명 배경 자산을 사용합니다.
폰트 파일이 없는 Windows 환경에서는 Pretendard가 fallback될 수 있습니다. 정확한 로고 재현이 필요하면 SVG 로고 자산을 우선 사용합니다.