IDENTITY
색을 두 가지로 줄인 이유
색을 많이 쓰지 않기로 했습니다. 도시락 사진에는 이미 색이 많습니다. 브랜드가 색을 더하면 음식이 안 보입니다.
| 이름 | HEX | 쓰임 | 흰 배경 대비 |
|---|---|---|---|
| 브랜드 옐로 | #f2c000 | 면(배경)·강조 블록. 글자색으로는 쓰지 않습니다 | 1.86 : 1 |
| 먹색 | #2a2724 | 제목·주요 텍스트 | 13.9 : 1 |
| 본문 먹색 | #373737 | 본문 텍스트 | 10.9 : 1 |
| 회갈 | #5c5953 | 보조 설명 텍스트 | 6.6 : 1 |
| 베이지 라인 | #cfc6bc | 구분선·표 테두리 | — |
| 연옐로 면 | #fff4ca | 아이콘 배경·고지 바 배경 | — |
심볼의 뜻
칸이 나뉜 사각형
심볼은 도시락 용기를 위에서 내려다본 모양에서 왔습니다. 큰 칸 하나와 작은 칸 셋. 큰 칸은 밥, 작은 칸 셋은 반찬입니다. 브랜드가 파는 것이 정확히 그 구성이기 때문에 더 꾸미지 않았습니다.
모서리는 둥글리지 않았습니다. 실제 도시락 용기의 칸은 각져 있고, 각진 형태가 「담기는 양이 정해져 있다」는 인상을 줍니다. 이 브랜드에서 정량은 중요한 약속입니다.
심볼을 축소해 쓸 때는 작은 칸 셋을 하나로 합칩니다. 16픽셀 이하에서 칸 구분선이 뭉개지기 때문입니다. 파비콘과 앱 아이콘에는 이 축약형을 씁니다.
로고 사용 규칙
최소 크기
가로 조합형은 96px, 심볼 단독은 24px 아래로 줄이지 않습니다. 인쇄물에서는 가로 24mm가 하한입니다.
여백
로고 상하좌우에 심볼 높이의 절반만큼 여백을 둡니다. 이 안에는 다른 요소를 넣지 않습니다.
금지 사용
기울이기, 그림자 넣기, 색을 임의로 바꾸기, 심볼과 글자의 간격을 바꾸기는 하지 않습니다.
배경별 버전
밝은 배경에는 먹색 로고, 어두운 배경과 사진 위에는 흰색 로고를 씁니다. 옐로 배경 위에는 먹색을 씁니다.
서체
국문은 굵기 대비를 크게 두는 고딕 계열을 씁니다. 제목은 800, 본문은 400을 기본으로 하고 중간 굵기는 소제목에만 제한적으로 씁니다. 도시락 메뉴명은 짧기 때문에 굵기 차이만으로도 위계가 충분히 만들어집니다.
본문 크기는 15px를 기준으로 합니다. 메뉴판이나 안내물처럼 서서 읽는 인쇄물에서는 한 단계 키워 17px 상당으로 씁니다. 점심 시간에 줄을 선 채로 읽는 글자는 앉아서 읽는 글자보다 커야 합니다.
| 용도 | 크기 | 굵기 | 비고 |
|---|---|---|---|
| 히어로 제목 | 52px | 800 | 한 줄 15자 이내 |
| 섹션 제목 | 32px | 800 | 두 줄까지 허용 |
| 소제목 | 24px | 800 | |
| 카드 제목 | 18px | 800 | |
| 본문 | 15px | 400 | 줄 간격 1.75 |
| 캡션·보조 | 13px | 400 | 회갈 계열로 표기 |
적용 예시
브랜드 요소는 실제로 쓰이는 자리에서 검증합니다. 화면 위에서 좋아 보이는 조합이 간판이나 용기 라벨에서는 읽히지 않는 경우가 많습니다.
간판은 노란 면에 먹색 글자를 씁니다. 반대로 하면 야간에 글자가 번져 보입니다. 노란색은 밝기가 높아 어두운 배경에서 빛이 퍼지기 때문입니다. 어두운 배경에는 흰색 로고를 씁니다.
용기 라벨은 흰 바탕에 먹색 글자를 기본으로 합니다. 도시락 용기는 대부분 검은색이라 라벨이 흰색이어야 눈에 들어옵니다. 노란색은 라벨의 구분선과 카테고리 표시에만 씁니다.
메뉴판은 흰 바탕에 먹색 글자를 쓰고, 카테고리 구분에만 노란 면을 씁니다. 메뉴명은 17px 상당 이상으로 키웁니다. 서서 읽는 글자이기 때문입니다.
| 적용처 | 배경 | 글자 | 노란색 사용 |
|---|---|---|---|
| 외부 간판 | 브랜드 옐로 면 | 먹색 | 배경 전체 |
| 야간 조명 간판 | 먹색 면 | 흰색 | 테두리 라인만 |
| 용기 라벨 | 흰색 | 먹색 | 구분선 · 카테고리 표시 |
| 메뉴판 | 흰색 | 먹색 | 카테고리 구분 면 |
| 포장 봉투 | 크라프트 지 | 먹색 | 심볼만 |
| 웹 · 모바일 | 흰색 | 먹색 계열 | CTA 버튼 면 · 강조 블록 |