두나무
흰 지면·검정 잉크·라운드 0 — 코퍼레이트 문서의 골격에 파랑 한 색만 얹는다.
두나무 코퍼레이트 사이트는 장식을 거의 다 걷어낸 문서형 골격입니다. 라운드가 0이고 그림자와 그라디언트는 한 건도 없이, 1px 헤어라인과 3px 상단 보더만으로 면을 나눕니다. 가장 큰 글자 자리는 홈 히어로의 영문 90px이고 국문은 44px에서 멈추며, 서브 페이지 여덟 장이 500px 히어로에 40px 국문 한 단어라는 같은 틀을 반복합니다. 다만 한글에 웹폰트를 물리지 않아 운영체제 기본 서체로 그려지므로, 조판 값만 가져오고 서체는 따로 정해야 합니다.
https://www.dunamu.comColor Palette
Primary
Label
Fill
Line
Background
Static
Typography
Noto Sans KR · 400 / 700한글 전부(제목·본문·UI)
Roboto · 400 / 700라틴·숫자·공백
Apple Symbols · 400기호
Type Scaleraw(1920) 스타일표는 30px에서 끊긴다 — 13개 스타일 전부 30px 이하이고 최다는 15px link 24회·20px link 23회다
display90px · 700 · 1.2
다람쥐 헌 쳇바퀴
h1-section44px · 700 · 1.3
다람쥐 헌 쳇바퀴
hero-title40px · 700 · 1.3
다람쥐 헌 쳇바퀴
h230px · 700 · 1.6
다람쥐 헌 쳇바퀴
h3-tab24px · 700 · 1.4
다람쥐 헌 쳇바퀴
body20px · 400 · 1.45
다람쥐 헌 쳇바퀴
body-md17px · 400 · 1.47
다람쥐 헌 쳇바퀴
body-sm16px · 400 · 1.63
다람쥐 헌 쳇바퀴
caption15px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR (한글 17,722글리프 중 17,686 = 99.8%) — 선언 1순위는 Roboto, 웹폰트 URL 0개라 OS 폴백이 한글을 전담한다 |
| hangulWeights | 400 16,807글리프 · 700 879글리프 (Noto Sans KR 기준). Roboto로 잡히는 한글은 400 30 · 700 6으로 합계 36글리프뿐 |
| body | 20px w400 lh1.45 ls−0.15px (−0.75%) |
| sub | 홈 히어로 부제 30px · 약관 본문 16px w400 lh1.63 · 링크 17px lh1.47 |
| label | 15px w400 (푸터·메타, 스타일 최다 24회) · 20px w700 (목록 헤더) |
| mixing | 국영문을 분리하지 않고 한 폰트 스택(Roboto → 폴백)에 맡긴다. Roboto에 한글이 없어 라틴·공백만 Roboto가 그리고 한글은 Noto Sans KR이 받는다 — '두나무 소개' 20/700 노드가 한글 Noto Sans KR×5 + 공백 Roboto×1로 갈린다. 한글만 떼어 재측정하면 Roboto 몫은 36글리프(0.2%)로 사실상 0이다. 층 분리(영문 디스플레이 서체 별도)는 없고, 90px 영문 히어로도 같은 Roboto다 |
| hangulHeadings | 있다. 다만 최대 크기 자리는 국문이 아니다 — 홈 히어로 90px/700은 영문 'Connect & Unlock Value' 1회뿐이고, 국문이 실제로 크기를 맡는 곳은 그 아래 44px/700 22회(홈 피처 3 '안전하고 투명한 블록체인 서비스를 제공합니다' 등 · 서비스 상세 6 '업비트'·'업비트 NFT'·'업비트 데이터랩'·'노딧'·'증권플러스'·'맵플러스' · 연혁 연도 12)와 서브 히어로 40px/700 8회(두나무 소개·서비스·IR·뉴스룸·채용)다. 즉 국문 디스플레이 상한은 44px이고 90px는 영문 전용이다 |
| verdict | 40~44px 국문 제목 레퍼런스로는 유효하다 — 서브 히어로 40/700 8페이지, 섹션 제목 44/700 22회가 같은 규칙(자간 −0.15px 고정, 라운드 0, 흰 지면)으로 반복된다. 다만 60px 이상 국문 디스플레이 레퍼런스로는 부적합하고(그 자리는 영문), 한글이 웹폰트가 아니라 OS 폴백이라 조판 값을 그대로 이식하면 환경별로 다르게 보인다 |
| rendered | Noto Sans KR Thin ×17686 · Roboto ×36 |
영문 · Latin영문 전용
| latinFont | Roboto 5,611글리프(81.0%) · Noto Sans KR 1,306글리프(18.9%) · Apple Symbols 9글리프(0.1%) · Helvetica Neue 1글리프(0.0%) |
| latinWeights | 실측 페이스 Thin |
| share | 라틴 6,927글리프 / 한글 17,722글리프 — 지면의 28.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Roboto를 쓰는 단: display 90px/700 |
| mixing | 국영문 혼용 노드 305개(전체 919개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Roboto 영문 전용(81.0% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Roboto 라틴 81.0% / 한글 0.2% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 90px) |
| sharedWithKorean | 국문과 같은 서체: Roboto · Noto Sans KR |
| rendered | Roboto ×5611 · Noto Sans KR Thin ×1306 · Apple Symbols ×9 · Helvetica Neue ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1200px | |
| Docs width | 1120px | |
| Section gap | 피처 섹션 padding 146/150(서비스)·150/158(홈)·150/152(ESG) | |
| Header | 100px fixed | |
| Grid Home | ESG 3열 320px 거터 80 (320×3+80×2=1120) · 뉴스 카드 3개 500×102 · 연혁 행 845×36 | |
| Card Padding | 연혁 행 845×36 · 채용 본문 블록 1120×108 ×13 · IR 목록 행 1200×101 ×20 | |
| Button Padding | 0 30px(서비스 보기·뉴스룸 보기) · 0(탭형 버튼 2종, 높이는 3px 상단 보더로만 구분) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| none | 0px | 4회 · 전 컴포넌트. 버튼 4종 전부 r0px, 반복 블록(연혁 행 845×36 · ESG 카드 320×132 · IR 목록 행 1200×101) 전부 r0px. dembrandt borderRadius 값 0종 |
Guidelines
Do
- 지면은 #FFFFFF, 텍스트는 #000000 → #333333 → #666666 3단으로만 내린다(각 130·8·14회)
- 채도색은 #0F52B3 하나만 쓰고, 그 자리는 활성 탭 3px 상단 보더와 링크 hover로 제한한다(5회)
- 라운드 0을 지킨다 — 버튼 4종·반복 블록 전부 r0px이고 borderRadius 값은 0종이다
- 깊이는 1px #DDDDDD·1px #272B37 헤어라인과 3px 상단 보더로만 만든다(그림자 0·그라디언트 0)
- 콘텐츠 폭은 1200을 기본으로, 본문 읽기 페이지만 1120으로 좁힌다(채용 상세·IR 상세)
- 서브 페이지는 500px 히어로 + padding-top 240 + 40px/700 국문 한 단어로 통일한다(8페이지)
- 면을 나눌 때는 #F7F7F8을 교차로 깐다(서비스 상세 2·4번째 섹션, 페이지 타이틀 밴드 124px)
Don't
- 자간을 크기별로 바꾸지 않는다 — raw 13개 스타일 전부 −0.15px 단일이다
- 그림자로 띄우지 않는다(10페이지 shadows 0·gradients 0)
- #000000을 어두운 면 위에 올리지 않는다 — #0E1320 위 1.13:1, #0F52B3 위 2.88:1로 AA 미달 쌍이 2건 나온다
- 0.8s보다 긴 전환이나 커스텀 이징을 넣지 않는다(durations 0.8s×6·easings ease×6이 전부)
- 한글 웹폰트를 선언하지 않는 방식을 따라 하지 않는다 — 이 사이트는 @font-face URL 0개라 한글 99.8%가 OS 폴백(Noto Sans KR)에 맡겨져 있다
- 90px 자리에 국문을 넣었다고 가정하지 않는다 — 홈 90px는 영문이고 국문 최대는 44px다
- 8배수 여백을 전제하지 않는다 — 최빈값이 3px(28회)·15px(14회)이고 큰 여백은 150·120·110·100px로 흩어진다
