소크라

흰 지면 위 남색 잉크 한 색, 굵기를 올리는 대신 크기만 키우는 조판.

소크라는 AI 교육 회사의 기업 사이트로, 흰 지면에 남색 계열(#090C32·#001380) 글자만 쓰는 조용한 인상입니다. 제목을 굵게 만들지 않는 것이 이 사이트의 규칙이라 국문 제목 48px·36px이 전부 Regular(400)이고, 굵기 대신 크기로만 위계를 만듭니다. 히어로는 1,440×716 캔버스 한 장이 섹션 전면을 덮고 그 위에 영문 제목이 올라가는 구조입니다. 페이지에서 직접 읽어낸 디자인 토큰이 84개(--ds-* 변수)나 공개돼 있어, 색 역할 체계를 어떻게 짜는지 배우기에도 좋습니다.

https://corp.socra.ai

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 300 / 400 / 500 / 600heading·body·ui 전부 — 한글 99.6% · 라틴 94.0%

Fractul Variable · 400display (라틴 전용)

JetBrains Mono · 300 / 400code

Apple SD Gothic Neo · 300한글 폴백 (웹폰트 아님)

JejuMyeongjo · 400선언만 있고 안 그림

Jua · 400선언만 있고 안 그림

Type Scale이 사이트의 규칙은 ‘굵기를 안 올린다’이다 — 48·36·28·24·20px이 전부 weight 400이고 600은 32px 이하에서만 나타난다

display64px · 400 · 1.2

Handgloves 123

stat50px · 400 · 1.28

Handgloves 123

h148px · 400 · 1.33

다람쥐 헌 쳇바퀴

h236px · 400 · 1.39

다람쥐 헌 쳇바퀴

h2-latin36px · 400 · 1.39

Handgloves 123

h332px · 600 · 1.44

다람쥐 헌 쳇바퀴

h428px · 400 · 1.43

다람쥐 헌 쳇바퀴

h526px · 600 · 1.54

다람쥐 헌 쳇바퀴

lead20px · 400 · 1.6

다람쥐 헌 쳇바퀴

body16px · 400 · 1.63

다람쥐 헌 쳇바퀴

body-sm15px · 400 · 1.6

다람쥐 헌 쳇바퀴

ui14px · 600 · 1.71

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable 20,733글리프(99.6%) · Apple SD Gothic Neo 80(0.4%)
hangulWeights	400 주력 15,841(76.1%) · 600 3,496(16.8%) · 500 1,356(6.5%) · 300 120(Apple SD Gothic Neo 80 + Pretendard 40). 700 이상이 0이다
body	16px/400 lh1.63 자간 0 (count 27, 최다). 카드 본문은 15px/400 lh1.6(18회)
sub	20px/400 lh1.60 리드(10회) · 36px/400 lh1.39 대형 리드 문장
label	14px/600 lh1.71 nav·버튼(24회) · 13px/600 lh1.85(9회) · 12px/600 lh1.67(1회)
mixing	혼용 노드 491개(전체 1,698개 중 28.9%)이고 491개 전부 한글만 담은 프로브로 재측정에 성공했다. 혼용 줄('AI 시대, 가장 중요한 기술은 사람입니다.' 'Human Foundation의 성장을 위해 AI를 연구합니다.')은 Pretendard Variable 단일로 그려진다. Fractul Variable은 라틴만 있는 줄에서만 등장하고 혼용 줄에 개입하지 않는다 — 서체 전환 지점이 문장 단위로 깔끔하다
hangulHeadings	있다. 국문 최대는 48px/400 lh1.333(64px) 자간 0 — 회사소개·스토리 h1(‘AI 시대, 가장 중요한 기술은 사람입니다.’ 1440 실측 y208). 홈의 국문 최대는 36px/400 lh50px이고, 홈 h1 64px은 라틴이다
verdict	국문 조판 레퍼런스로 유효하되 성격이 특수하다 — 국문 대형을 48px에서 멈추고 굵기를 400으로 고정한 사례라, 굵기 대신 크기로 위계를 만드는 조판을 찾을 때 인용한다. 국문 히어로(첫 화면 대형 국문 제목) 레퍼런스로는 부적합하다: 홈 첫 화면 제목이 영문 64px이고 국문은 그 아래 36px부터 시작한다
rendered	Pretendard Variable ×20733 · Apple SD Gothic Neo ×80

영문 · Latin영문 전용

latinFont	Pretendard 22,989글리프(93.3%) · JetBrains Mono 1,263글리프(5.1%) · Fractul 177글리프(0.7%) · AppleMyungjo 96글리프(0.4%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 24,636글리프 / 한글 20,813글리프 — 지면의 54.2%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: h1 48px/400 · h2 36px/400 · h3 32px/600 · h4 28px/400 · h5 26px/600 · lead 20px/400 · body 16px/400 · body-sm 15px/400 · ui 14px/600
mixing	국영문 혼용 노드 491개(전체 1,698개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Fractul 영문 전용(0.7% · 선언됨 · 최상단 디스플레이 독점) · JetBrains Mono 모노(5.1% · 선언됨)
verdict	영문 전용 서체가 있다 — Fractul 라틴 0.7% / 한글 0.0% · 최상단 디스플레이 독점 · JetBrains Mono 라틴 5.1% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 64px)
sharedWithKorean	국문과 같은 서체: Pretendard · Apple SD Gothic Neo
rendered	Pretendard Variable ×22989 · JetBrains Mono ×1263 · Fractul Variable ×177 · AppleMyungjo ×96 · Apple SD Gothic Neo ×72 · Pretendard JP Variable ×31 · .SF NS ×4 · PingFang SC ×4

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1280px
Section gap	섹션 패딩 80/80이 기본이고 마감 CTA만 120/120이다(회사소개 #8 y4444, 홈 hero 아래 블록 80/120). 80px 60회
Header	72px fixed
Card Padding	회사소개 연구 카드 240x188 6열 gap60 · 홈 특징 258x148 4열 gap40 · 홈 인용 339x50 3행 · 스토리 카드 572x173 2열 gap40 · 로고 132x42 5열 gap0 · 파트너 로고 160x32 6열 gap24
Content Widths	홈 1280px(후보 1280x21) · 회사소개·스토리 목록 1184px(1184x39) · 스토리 본문 784px(784x205) — 읽는 글만 확실히 좁힌다
Button Padding	14x20 (아웃라인 r8 14px/600) · 8x16 (필터 칩 r9999 14px/500)

Border Radius

Role	Value	Preview
hairline	2px	1회 · 인라인 표시
small	4px	96회 · 작은 버튼·아이콘 타일
standard	8px	157회 · 버튼·카드 표준
tag	20px	4회 · 태그 span
large	16px	7회 · 큰 카드
pill	9999px	116회 · 필터 칩·언어 선택·메뉴 열기·페이지네이션 원형 버튼

Guidelines

제목을 굵게 만들지 말고 크기만 키운다 — 48·36·28·24·20px이 전부 weight 400이고 700 이상이 사이트 전체에 없다
국문 자간은 0으로 둔다 — Pretendard Variable 단 중 자간이 붙은 것은 18px/300의 +0.36px 하나뿐이다
라틴 디스플레이에만 음수 자간을 준다 — Fractul 64px −1.92px(−3.0%) · 50px −0.5px · 36px −0.36px
글자색을 검정이 아니라 남색 #090C32(18.91:1)로 쓴다 — 흰 지면과의 대비를 잃지 않으면서 톤이 생긴다
읽는 글만 폭을 좁힌다 — 홈 1280px · 목록 1184px · 스토리 본문 784px
색을 2층으로 짠다 — 스케일(gray/blue/purple/green/red 100~900) 위에 역할 토큰(primary·font-sub·bg-subtle·border-default·btn-*-hover/pressed)을 얹는다
버튼은 아웃라인 하나로 통일하고(1px #001380 · r8 · 14px/600) 알약은 칩·아이콘 버튼에만 준다

Don't

#777B96을 본문에 쓰지 않는다 — 4.15:1(206쌍)로 AA 미달인데 팔레트 9페이지 전부에 등장한다
큰 글씨를 국문으로 가정하지 않는다 — 64px과 50px은 Fractul Variable이 그리는 라틴이고 한글은 0글리프다
JejuMyeongjo·Jua를 조판 근거로 인용하지 않는다 — 선언·로드는 되지만 렌더 글리프가 0이다
그림자를 여러 단으로 쌓지 않는다 — 실효 그림자가 0 10px 40px rgba(0,0,0,.14)(9회)와 0 8px 24px rgba(0,0,0,.1)(6회) 두 단뿐이고 --ds-shadow-float/overlay 두 토큰이 그대로 그 값이다
weight 300을 국문에 쓰지 않는다 — 300 자리에서 Apple SD Gothic Neo가 80글리프를 그려 OS별로 다르게 보인다
스크롤 스크럽 연출을 전제하지 않는다 — 3페이지 실측에서 모션 라이브러리 0 · 스크롤 전환 0건이다
캔버스 위에 중요한 텍스트를 그리지 않는다 — 이 사이트도 캔버스는 배경이고 h1은 DOM 텍스트다