데브시스터즈

흰 지면 위에 영문을 900 웨이트로 크게 때리고, 국문은 800으로 한 단 낮춰 받는다.

데브시스터즈는 흰 지면에 검정·주황 두 색만 쓰는 게임사 코퍼레이트 사이트입니다. 폴드는 1440×637 자동재생 영상 위에 97px 900 웨이트 영문 두 줄을 얹어 여는데, 이 대형 조판은 전부 Azo Sans(영문 전용)이고 국문은 한 단 아래에서 Pretendard 800으로 받습니다. 국문 최대 조판은 회사소개 페이지의 82px 800(자간 −0.144px)이라, 국문 히어로가 아니라 '영문 디스플레이 + 국문 본문' 이원 조판의 레퍼런스로 보는 편이 맞습니다. 모션 라이브러리는 한 줄도 없고 스크롤 진입 시 1회 재생되는 페이드업(translateY 80px→0, 440px 구간)만 쓰므로, 가벼운 구현으로 밝고 활기찬 인상을 만들어야 하는 브랜드 사이트에 참고하기 좋습니다.

https://www.devsisters.com

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Azo Sans (azo-sans-web) · 500 / 700 / 800 / 900display (영문 전용)

Pretendard · 400 / 500 / 600 / 700 / 800 / 900한글 전담 + 본문·UI 라틴

Apple SD Gothic Neo · 500한글 OS 폴백 (의도 아님)

Source Han Sans Korean (선언만) · 400 / 500declared-not-rendered

Type Scalepx 기준은 layout

hero97px · 900 · 0.9

Handgloves 123

page-title84px · 900 · 0.86

Handgloves 123

display-ko82px · 800 · 1.2

다람쥐 헌 쳇바퀴

section68px · 900 · 0.8

Handgloves 123

hero-ko64px · 800 · 1.22

다람쥐 헌 쳇바퀴

h356px · 900 · 1

Handgloves 123

h4-ko48px · 800 · 1.17

다람쥐 헌 쳇바퀴

sub-ko32px · 800 · 1.25

다람쥐 헌 쳇바퀴

body16px · 500 · 1.5

다람쥐 헌 쳇바퀴

label14px · 500 · 1

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 계열이 98.3% (ExtraBold 6,902 = 40.0% · Medium 6,844 = 39.6% · SemiBold 2,198 = 12.7% · Regular 1,024 = 5.9%), 나머지 1.7%는 Apple SD Gothic Neo 300글리프 — 한글 총 17,268글리프 (CDP 10페이지 1440 실측)
hangulWeights	800 ExtraBold 6,385 · 500 Medium 6,844 + SemiBold 940 + Apple SD Gothic Neo 300 · 600 SemiBold 1,258 · 700 Regular 710 · 900 ExtraBold 517 · 400 Regular 314. 800과 500 두 웨이트가 전체의 80%다
body	16px w500 lh1.50 자간 normal (Pretendard, count 6). 게임 소개 8블록 설명이 전부 이 단
sub	회사소개 82px w800 lh1.20 ls−0.144px · 쿠키런 상세 64px w800 lh1.22 · contact 48px w800 lh1.17 ×4 · 다크 구간 소제목 32px w800
label	14px w500 uppercase lh1.00 ×27(최다) · 12px w500 ×9 · 15px w800 uppercase ×9
mixing	층으로 완전 분리한다 — 디스플레이 층은 Azo Sans(한글 0글리프), 국문·본문 층은 Pretendard. 한 줄 안에서 섞는 대신 영문 제목 아래 국문 부제를 다는 구조가 반복된다(홈 히어로 영문 97px → 다음 화면 국문 카피). 다만 16px ui·link 스타일의 family 선언은 source-han-sans-korean인데 실제 렌더는 Pretendard로, 선언과 실측이 어긋난다
hangulHeadings	있다 — 82px/800(회사소개 '세상을 즐겁게!' y2019) · 64px/800(쿠키런 상세 '쿠키런: 오븐브레이크' y636) · 48px/800 ×4(contact 지사명) · 32px/800 ×3(다크 구간 소제목) · 24px/900 ×9(게임 목록 타이틀). 단 폴드(y<700)를 여는 자리는 10페이지 전부 영문이다
verdict	국문 대형 조판 레퍼런스로 유효하다 — 82px w800 lh1.20 ls−0.18%는 라이브러리 상위권 굵기다. 다만 '97px 국문 히어로'가 아니다: 97px은 영문(Azo Sans Black)이고 국문 최대는 82px, 위치도 폴드가 아니라 둘째 화면이다. 영문 디스플레이 + 국문 서브 조판의 이원 구조를 배우는 용도로 쓸 것
rendered	Pretendard ExtraBold ×6902 · Pretendard Medium ×6844 · Pretendard SemiBold ×2198 · Pretendard ×1024 · Apple SD Gothic Neo ×300

영문 · Latin영문 전용

latinFont	Azo Sans 6,854글리프(55.7%) · Pretendard 5,415글리프(44.0%) · Apple Color Emoji 35글리프(0.3%)
latinWeights	실측 페이스 Black · ExtraBold · Medium · SemiBold
share	라틴 12,304글리프 / 한글 17,268글리프 — 지면의 41.6%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Azo Sans를 쓰는 단: hero 97px/900 · page-title 84px/900 · section 68px/900 · h3 56px/900
mixing	국영문 혼용 노드 545개(전체 1,963개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Azo Sans 영문 전용(55.7% · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Azo Sans 라틴 55.7% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 97px)
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Azo Sans Black ×6298 · Pretendard ExtraBold ×2401 · Pretendard Medium ×1906 · Pretendard SemiBold ×742 · Pretendard ×366 · Azo Sans Medium ×286 · Azo Sans ×270 · Apple Color Emoji ×35

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	8px
Max width	1120px
Section gap	홈 96/96 (STUDIOS·OUR STORIES 섹션 패딩)
Header	48px fixed
Grid Home	OUR STORIES 4열 258×258, 거터 30px (258×4+30×3=1122 ≈ 1120)
Grid Cards	support POLICIES 3열 353×256 거터 30 · 회사소개 3열 353×109 거터 30 · RELATED VIDEOS 3열 352×252 거터 32
Grid Media	홈 게임 소개 8블록이 1120×512 영상 한 장씩, 세로 간격 32px (y1878부터 544px 피치)
Card Padding	카드 자체 패딩은 미측정 — 반복 아이템 치수(258×258 · 353×256)만 실측
Button Padding	12×24 (r36 표준) · 5.5×12 (r36 소형 태그) · 0×26 (r24 필터 칩)

Border Radius

Role	Value	Preview
small	8px	15회 · 리스트 아이템(li)
—	10px	8회 · 관측만 (div)
card	20px	188회 · 카드·썸네일·링크 블록 (div/a)
chip	24px	84회 · 필터 칩·태그 버튼 (div/button)
pill	36px	297회 · 버튼 표준 — 12×24 패딩 CTA 전부 (최다)
circle	50px	31회 · 원형 배지·아이콘(span)
circle-pct	100% / 60%	1회 · 타원 마스크 1건

Guidelines

대형 조판은 Azo Sans 900으로, 국문은 Pretendard 800으로 한 단 낮춰 받는다 — 영문 97/84/68px w900 ↔ 국문 82/64/48px w800
영문 대형은 lineHeight를 1.0 아래로 조인다(68px=0.80 · 84px=0.86 · 97px=0.90). 국문은 82px에서도 1.20, 본문 16px에서 1.50으로 연다
국문 대형 제목에만 음수 자간을 준다 — 82px에서 −0.144px(−0.18%). 나머지 41개 스타일은 자간 normal
버튼은 패딩 12×24 + radius 36px 하나로 통일한다(297회). 색만 검정·주황·고스트 3종으로 가른다
카드 거터는 30px으로 고정한다(4열 258×258 · 3열 353×256 모두 30px). 콘텐츠 폭 1120 중앙
주황 위에는 검정 글자를 올린다 — #000000 on #FF5F00 6.89:1(AA 통과), #FFFFFF on #FF5F00은 3.05:1로 미달
진입 모션은 translateY 80px→0 + opacity 0.1→1을 440px 스크롤 구간에 걸어 1회만 재생한다(스크럽 0건)

Don't

국문으로 폴드 히어로를 짜지 않는다 — 10페이지 전부 폴드 최대 조판이 영문이다. 국문 최대 82px은 y2019(둘째 화면)에 있다
본문에 주황을 쓰지 않는다 — #FF5F00 on #FFFFFF 3.05:1(382회) · #FFFFFF on #FF8200 2.49:1(246회) 모두 AA 미달
#ADADAD를 읽을 텍스트에 쓰지 않는다 — #EEEEEE 위 1.93:1(81회), 비활성 칩 전용
그림자로 띄우지 않는다 — 외부 box-shadow 0개. 깊이는 1px #DCDCDC 헤어라인(105회)과 이미지 스크림뿐
스크롤에 잠긴 모션(스크럽·핀)을 만들지 않는다 — 3페이지 실측에서 스크럽 0 · ScrollTrigger 0 · 모션 라이브러리 0
다크 지면을 남발하지 않는다 — #2B0F0C는 쿠키런 상세 3,310px 한 구간에만 쓴다
라운드를 9999px 알약으로 쓰지 않는다 — 이 사이트는 고정 36px으로 알약 효과를 낸다
웨이트 500 한글을 시스템 폰트에 맡기지 않는다 — 실측에서 Apple SD Gothic Neo로 300글리프가 샜다(Windows에서 달라진다)