오뚜기

흰 지면에 순수 검정 글자, 노랑(#FFED00)은 CTA와 구획 면에만 — 제품 사진과 영상이 색을 맡는 식품 기업 사이트.

오뚜기는 흰 지면과 순수 검정 글자 위에 제품 영상·사진이 색을 전부 맡는 식품 기업 사이트입니다. 브랜드 노랑은 오뚜기몰 버튼, 제품 전체보기 CTA, 라인업·카레 같은 구획 띠에만 쓰고 그 밖의 UI는 흑·백·회색입니다. 자체 서체 OtokiSans3N이 국문 제목을 80px까지 키우고, 본문은 Light 300으로 가볍게 깔아 굵기 대비가 큽니다. 영상 히어로 슬라이더와 한 줄 큰 제목 단이 반복되는 기업·식품 브랜드 사이트를 만들 때 참고하기 좋습니다.

https://www.otoki.com/main

Color Palette

Primary

Label

Line

Background

Static

Accent

Typography

OtokiSans3N · 300 / 500 / 700display·heading·body·ui 전부 (국문·영문 겸용)

Type Scalepx는 dembrandt raw(1920) styles의 count와 layout

display-ornament180px · 500 · 1.33

Handgloves 123

display-hero80px · 500 · 1.25

Handgloves 123

h164px · 500 · 1.41

Handgloves 123

h248px · 500 · 1.33

Handgloves 123

h340px · 500 · 1.4

Handgloves 123

lead32px · 300 · 1.6

Handgloves 123

card-title24px · 500 · 1.42

Handgloves 123

nav18px · 500 · 1.44

Handgloves 123

body-lg18px · 300 · 1.67

Handgloves 123

body16px · 300 · 1.5

Handgloves 123

label14px · 700 · 1.57

Handgloves 123

국문 · Korean

hangulFont	OtokiSans3N 자체 웹폰트 (Light 14,157 · Medium 5,754 · ExtraBold 265글리프 / 20,176)
hangulWeights	Light 300 70.2% · Medium 500 28.5% · ExtraBold 700 1.3%
body	16~18px / 300 / lh1.5~1.67 (16px은 ls −0.8px)
sub	24px / 500 / lh1.42 (뉴스 카드 제목) · 26px / 300 (도입 문장)
label	14px / 700 / ls +2.1px
mixing	국영문 한 서체(OtokiSans3N)가 전부 그린다. 영문 대형 'Global OTOKI'(80/500)·'OTOKI'(180/500)·'PRODUCTS' 48/500도 같은 서체
hangulHeadings	있음 — 국문 최대 80px/500 OtokiSans3N 홈 히어로 '소비자가 필요로 하고 소비자에게 편리한 제품을 만들어…'(레이아웃 p, 1440). 그다음 64px/500 'ESG 마음을 담은 미래를 위한…', 48/500 반복
verdict	국문 대형 제목 레퍼런스로 유효 — 80/500 한 줄·두 줄 선언문, 40px 이상 자간 −2~−3%, 본문 Light 300과의 굵기 대비. 서체는 자체 웹폰트라 다른 사이트에서는 Pretendard 계열로 대체해야 한다
rendered	OtokiSans3N Light ×14157 · OtokiSans3N Medium ×5754 · OtokiSans3N ExtraBold ×265

영문 · Latin국문과 동일

latinFont	OtokiSans3N 10,715글리프(99.9%) · Apple Color Emoji 7글리프(0.1%) · Apple SD Gothic Neo 1글리프(0.0%)
latinWeights	실측 페이스 Light · Medium · ExtraBold · Bold
share	라틴 10,723글리프 / 한글 20,176글리프 — 지면의 34.7%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 OtokiSans3N를 쓰는 단: display-ornament 180px/500 · display-hero 80px/500 · h1 64px/500 · h2 48px/500 · h3 40px/500 · lead 32px/300 · card-title 24px/500 · nav 18px/500 · body-lg 18px/300 · body 16px/300 · label 14px/700
mixing	국영문 혼용 노드 705개(전체 1,870개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 34.7%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.9%를 그리는 OtokiSans3N가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: OtokiSans3N
rendered	OtokiSans3N Light ×8060 · OtokiSans3N Medium ×2595 · OtokiSans3N ExtraBold ×50 · OtokiSans3N Bold ×10 · Apple Color Emoji ×7 · Apple SD Gothic Neo ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	5px
Max width	1340px
Section gap	섹션 상단 패딩 80/100/150/180/230px (홈 180·104, ESG 100/150/200, 회사소개 150) — 섹션 사이 128px 빈 띠(strip)가 홈에 4곳
Header	100px absolute(홈·ESG·회사소개, 투명) / relative(그 외, 흰색)
Content Widths	홈 1292px · 서브(회사소개·ESG·뉴스) 1340px · 상세(컵누들·정책·고객) 1180px · 잇 에디션 1180px
Grid Home	제품 3×3 / 뉴스 6×3 카드 410×410 gap 30 / 레시피 4×4 300×385 gap 30 / 미디어 6×3 410×533 gap 30
Button Padding	제품 전체보기 0 100px (r100, 22/500) · 오뚜기몰 3 36 3 10px (r8) · 인재상 12 25px (r5000)

Border Radius

Role	Value	Preview
small	5px	9회 · 작은 상자
small	8px	9회 · 오뚜기몰 버튼
standard	10px	46회 · 목차 행·카드 상자
medium	20px	27회 · 정책 카드·칩
input	50px	37회 · 입력·셀렉트·알약 버튼
pill	100px / 5000px	19회 · 제품 전체보기·인재상 알약
circle	50%	53회 · 슬라이더 이전·정지·다음 원형 버튼 (2px 검정 외곽선)

Guidelines

국문 제목은 OtokiSans3N Medium 500, 40px 이상에서 자간 −2~−3%(48px −1.44px, 64px −1.92px)로 좁힌다
본문은 Light 300(18px lh1.67 · 16px ls−0.8px)으로 제목과 굵기 대비를 크게 둔다 — 한글 70.2%가 Light다
노랑 #FFED00 위에는 항상 #000 글자(17.37:1). 노랑은 CTA·구획 띠 면에만 쓴다
히어로는 1440×900 영상/이미지 풀블리드 + 80/500 카피 + 하단 진행 막대·원형 컨트롤 3개
섹션 상단 패딩은 5px 사다리(80·100·150·180·230)에서 고르고 섹션 사이에 128px 빈 띠를 둔다
카드 그리드는 gap 30px(뉴스 6×3 410px, 레시피 4×4 300px)로 맞춘다
구획 면은 #FFFDEB·#F8F8F8·#FFFBCC 같은 옅은 면과 노랑 하나로 제한한다