Horizontal Logo
홈페이지 header/footer, 넓은 카드, 문서 표지의 기본 로고입니다.
assets/logo-horizontal.svg
Brand System
RemoteAll Desk 로고와 레드톤을 하나의 기준으로 맞춥니다
홈페이지, Windows 프로그램, 문서, 다운로드 페이지에서 같은 로고 자산과 같은 색상 토큰을 쓰기 위한 기준 페이지입니다.
Logo Assets
기본 자산
웹에서는 SVG를 우선 사용하고, PNG는 SVG를 쓸 수 없는 환경에서만 보조 자산으로 사용합니다.
Text Wordmark
아이콘 없이 브랜드명만 필요한 곳에서 사용합니다.
assets/logo-text.svg
Symbol Mark
앱 아이콘, favicon, 작은 사이드바, 버튼형 배지에 사용합니다.
assets/logo-symbol.svg
Typography
RemoteAll Desk 워드마크 규격
프로그램에서 텍스트로 로고를 그릴 때도 아래 값을 기준으로 맞춥니다.
| 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 |
Red Palette
프로그램 공통 레드톤
로고의 Desk 레드와 제품 UI의 버튼 레드는 역할을 나누어 사용합니다.
Brand Red
#f24b43Desk 워드마크, 브랜드 강조.
Primary Red
#e9464d주요 버튼, 선택 상태, 오류 강조.
Primary Dark
#ce3138hover/pressed, 진한 경계.
Primary Hot
#ff6868그라데이션 하이라이트.
Primary Soft
#fff1f2탭 배경, 배지, 부드러운 강조면.
Primary Pale
#fff8f8카드/섹션의 아주 옅은 배경.
Primary Border
#ffd8dc연한 레드 테두리.
Brand Ink
#24232eRemoteAll 워드마크 본문색.
Implementation
코드 기준값
웹 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 로고 자산을 우선 사용합니다.