파운데이션

브랜드 · 로고

ON:GI의 워드마크, 콜론 마크, 펭귄 심볼, 슬로건, 브랜드 컬러와 소셜 공유 이미지를 올바르게 쓰는 방법입니다. 모든 제품 화면과 인쇄물은 이 규칙을 따릅니다.

브랜드 아이덴티티

ON:GI는 결제라는 차갑고 딱딱한 경험에 온기를 더하는 브랜드입니다. 제품 화면은 카드사처럼 정확하고 차분하게, 브랜드 접점은 펭귄 심볼처럼 친근하고 따뜻하게 표현합니다.

정확한

금액과 상태가 가장 먼저 읽히는 명료함. 장식보다 정보.

차분한

강한 색은 한 화면에 한 곳만. 여백과 회색 위계로 정리.

따뜻한

고객 접점의 첫 화면 · 완료 · 빈 화면에서만 심볼로 온기를 전달.

슬로건

대외 커뮤니케이션의 대표 문구입니다. 헤드라인과 서브 카피를 한 세트로 쓰고, 문구를 임의로 바꾸지 않습니다.

QR 하나로 간편하게,
GIVE를 ON하다

기부 · 후원부터 주문 · 결제까지

구분	문구	규칙
헤드라인	QR 하나로 간편하게, GIVE를 ON하다	쉼표 뒤에서 두 줄로 나눔 · ‘ON’만 Lilac 강조
서브 카피	기부 · 후원부터 주문 · 결제까지	헤드라인 아래 한 줄 · 가운뎃점(·) 앞뒤 공백
짧은 버전	GIVE를 ON하다	공간이 좁은 배너 · 굿즈 · SNS 프로필 소개

이름에 담긴 뜻

ON:GI는 따뜻함을 뜻하는 온기와, 나눔(GIVE)을 켠다(ON)는 의미를 함께 담습니다. 슬로건의 ‘GIVE를 ON하다’는 이 뜻을 풀어 쓴 문장입니다.

이렇게 하세요

헤드라인과 서브 카피를 함께 배치
강조는 ‘ON’ 한 곳에만
Pretendard Bold로 조판

이렇게 하지 마세요

‘GIVE’를 한글로 바꾸거나 ‘ON’을 소문자로 쓰기
문구 일부를 다른 말로 바꾸기
헤드라인 여러 단어에 색 강조

로고

로고는 워드마크 ‘ON’ · 콜론 마크 · ‘GI’로 구성된 전용 레터링입니다. 서체로 다시 입력하지 말고 제공 파일만 사용하세요.

123

1
워드마크 ON
두꺼운 그로테스크 레터링. 자간 · 굵기 변경 금지
2
콜론 마크
라운드 사각형 두 점. 윗점 Lilac, 아랫점 Purple — 로고의 유일한 강조 요소
3
워드마크 GI
ON과 같은 베이스라인 · 캡하이트

가로형 · 세로형

가로형 (기본)

헤더 · 웹 · 영수증 · 대부분의 가로 공간

세로형

정사각 · 세로 공간, 스플래시 · 굿즈 · SNS 프로필

여백 · 최소 크기

최소 여백 영역1.5x1.5x

x = 콜론 점 한 변의 길이

로고 주변에는 최소 1.5x의 여백을 둡니다. 제공 PNG의 투명 여백이 이미 이 값이므로, 파일을 자르지(crop) 말고 그대로 배치하세요.

형태	디지털 최소	인쇄 최소	권장
가로형	워드마크 폭 72px	20mm	헤더 높이 기준 워드마크 20–24px
세로형	워드마크 폭 48px	14mm	스플래시 · 굿즈 중앙 배치
심볼	24px	8mm	앱 아이콘 · 파비콘 · 프로필

배경별 사용

배경 명도에 따라 네 가지 버전 중 하나를 고릅니다. 로고와 배경의 대비는 4.5:1 이상이어야 합니다.

흰색 · 밝은 배경

컬러 (기본)

브랜드 퍼플 배경

화이트

어두운 배경 · 사진

화이트

단색 인쇄 · 영수증 · 팩스

블랙

잘못된 사용

아래 예시는 모두 금지합니다. 로고는 제공 파일 그대로, 비율 · 색 · 각도를 유지해야 합니다.

비율 변형 (늘리기 · 누르기)

임의의 색 변경

회전 · 기울이기

그림자 · 외곽선 효과

대비가 낮은 배경

ON:GI

서체로 다시 입력

심볼 — 펭귄

펭귄 심볼은 ON:GI의 ‘온기’를 전하는 브랜드 캐릭터입니다. 로고를 대신하지 않고, 고객 접점에서 감정을 더하는 보조 요소로 씁니다.

앱 아이콘 · 72

프로필 · 48

파비콘 · 32

결제가 완료됐어요

완료 · 환영 순간에 심볼을 함께 보여줍니다

사용처	심볼 사용	비고
앱 아이콘 · 파비콘 · SNS 프로필	권장	연보라(Purple 100) 배경 위 얼굴 크롭 (ongi-symbol-penguin-square.png)
앱 스플래시 · 온보딩	권장	로고와 함께, 심볼이 위 · 로고가 아래
결제 완료 · 주문 완료	권장	완료 메시지 위 64–96px
빈 화면 · 404	허용	문구와 함께, 과도한 크기 금지 (최대 160px)
KIOSK 대기 화면	허용	‘화면을 터치해 주문하세요’ 안내와 함께
오류 · 결제 실패 · 환불	금지	부정적 상황에 캐릭터를 쓰지 않음
콘솔 · 관리자 등 업무 화면	금지	업무 화면은 워드마크만 사용

이렇게 하세요

제공된 3D 렌더 이미지 그대로 사용
배경은 흰색 · 연보라 · 브랜드 퍼플 중 선택
심볼과 로고를 함께 쓸 때 로고를 더 작게

이렇게 하지 마세요

얼굴 일부만 잘라 쓰기 · 좌우 반전
색 보정 · 필터 · 말풍선 합성
금액 · 버튼 위에 겹쳐 배치
오류 · 경고 메시지와 함께 사용

브랜드 컬러

로고에서 추출한 두 가지 보라색이 브랜드의 기준입니다. 제품 UI에서는 같은 값이 --brand 토큰으로 연결됩니다.

ON:GI Purple

워드마크 · 대표 컬러

HEX: #7C3AED
RGB: 124, 58, 237

--purple-600 · --brand

Colon Lilac

콜론 윗점 · 보조 강조

HEX: #A78BFA
RGB: 167, 139, 250

--purple-400

Ink

본문 · 블랙 로고

HEX: #191F28
RGB: 25, 31, 40

--grey-900 · --fg-strong

Snow

배경 · 화이트 로고

HEX: #FFFFFF
RGB: 255, 255, 255

--bg-canvas

사용 비율

Snow 60%

Ink 28%

9%

흰 배경과 잉크 텍스트가 대부분을 차지하고, 퍼플은 로고 · 주요 버튼 · 선택 상태에만 씁니다. Lilac은 콜론처럼 아주 작은 강조에 한정합니다.

서체

로고

전용 레터링

로고는 이미지로만 사용합니다. 비슷한 서체로 흉내 내지 않습니다.

제품 · 커뮤니케이션

Pretendard

모든 UI · 문서 · 마케팅 텍스트. 자세한 스케일은 타이포그래피 가이드를 따릅니다.

적용 예시

앱 스플래시

화면을 터치해 주문하세요

KIOSK 대기 화면

온기커피 성수점

아메리카노 x29,000

바닐라라떼 x15,500

합계14,500원

2026.09.28 13:08 · 카드 승인

영수증 (단색 인쇄)

소셜 공유 이미지 (OG)

카카오톡 · 슬랙 · X · 페이스북 등에 링크를 공유할 때 보이는 대표 이미지입니다. 모든 ON:GI 웹사이트는 같은 레이아웃을 따릅니다.

기본 OG 이미지 · 1024×537 (1.91:1)

카카오톡 링크 미리보기

ON:GI Design System

ON:GI 콘솔 · POS · KIOSK · 앱 · QR 주문 · 결제 전 제품군을 위한 통합 디자인 시스템

ds.ongi.site

항목	스펙
비율 · 크기	1.91:1 · 1200×630 권장 (최소 600×315)
파일	PNG 또는 JPG · 1MB 이하 권장 (X 5MB · 페이스북 8MB 제한)
배경	딥 퍼플 그라데이션 (왼쪽 위 #140C23 → 오른쪽 아래 #33254A) · 아래쪽 은은한 조명
구성	왼쪽 — 헤드라인 · 서브 카피 / 오른쪽 — QR 스탠드 · 펭귄 심볼
안전 영역	가장자리 64px 안쪽 · 정사각 크롭(가운데 630×630)에도 헤드라인이 잘리지 않게
텍스트	슬로건 헤드라인은 이미지 높이의 8–9% · 서브 카피는 그 절반