pxd

회색 위에 흰 Outfit 영문 한 문장, 그 아래는 근검정 잉크와 1332 그리드 — 채도는 네온 그린 배지 하나뿐.

시드 가운데 유일한 UX 에이전시 사이트입니다. 회색 히어로 위에 흰 영문 헤드라인을 60px로 세우고, 그 아래부터는 근검정 한 색과 1332px 그리드로만 끌고 갑니다 — 색이 튀는 곳은 채용 배지의 네온 그린 하나뿐입니다. 영문 제목과 국문 본문을 위아래 층으로 쌓는 구조라 국문 대형 제목을 찾는 작업에는 맞지 않습니다(국문은 38px에서 멈춥니다). 대신 카드 그리드와 700px 읽기 컬럼이 산술로 딱 맞아떨어져서, 에이전시·포트폴리오 사이트의 조판 골격 참고로 좋습니다.

https://pxd.co.kr/ko

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Outfit · 700display (영문 전용)

Pretendard JP · 400 / 500 / 700heading·body·ui·caption, 한글 98.8%

IBM Plex Mono · 400mono UI (prompt 입력 라벨)

Type Scaleraw(1920) 31스타일 전부 letter-spacing 미지정(normal=0) — 자간으로 위계를 만들지 않고 서체 교체(Outfit↔Pretendard)와 크기 점프(60→50→38→36→28→24)로 만든다

display60px · 700 · 1.3

Handgloves 123

h150px · 700 · 1.3

Handgloves 123

stat38px · 700 · 1.29

Handgloves 123

h1-article38px · 700 · 1.5

다람쥐 헌 쳇바퀴

h236px · 700 · 1.5

다람쥐 헌 쳇바퀴

h328px · 700 · 1.5

다람쥐 헌 쳇바퀴

lead24px · 700 · 1.5

다람쥐 헌 쳇바퀴

body17px · 400 · 1.53

다람쥐 헌 쳇바퀴

ui16px · 400 · 1

다람쥐 헌 쳇바퀴

label14px · 700 · 1.29

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard JP 12,431글리프(98.8%) + Pretendard JP Medium 145(1.2%) — self-hosted next/font woff2, 정적 페이스(variable false). OS 폰트 개입 없음(Apple SD Gothic Neo는 라틴 3글리프뿐)
hangulWeights	400 주력(9,395) · 700 제목·리드·버튼(3,036) · 500 소수(145, '인기순' 등 정렬 탭)
body	17px/400 lh1.53 ls0 (×7, 서비스·Work 본문 700폭) · 18px/400 lh1.5 (×3, 인사이트 글) · 20px/400 lh1.5 (×2, About·다크 밴드)
sub	24px/700 lh1.5 국문 리드 (×4 — '사용자의 근본적인 문제를 발견하고…' Pretendard JP×73, Contact '함께 만들어가는 UX 혁신…')
label	14px/700 lh1.29 (×17 버튼) · 13px/400 lh1.54 (×16) · 12px/700 lh1.33 (×12 배지 '채용 중인 포지션을 확인하세요'·날짜)
mixing	층 분리 — 영문 Outfit 대형(60/50/38)과 국문 Pretendard 본문을 섹션 안에서 위아래로 쌓는다(히어로 영문 60 → 리드 국문 24). 한 줄 혼용은 Pretendard 단일('UX Research 자세히 보기' 14/700, 'AI Eyes #7 AI를 완성하는…' 38/700, 'Lean UX 활용한 디자인 프로세스' 22/700). 홈 텍스트 한글 비율 48%(한글 1,968·라틴 2,156자)
hangulHeadings	있음 — 단 편집형에 한정. 인사이트 글 h1 38px/700 Pretendard JP(×1, 'AI Eyes #7 AI를 완성하는 마지막 퍼즐 조각, 휴먼 인 더 루프'), Work 상세 h1 28px/700('롯데캐피탈 디지털채널 UX/UI 개선'), Work 섹션 h2 22px/700 ×5('신용대출 사용자에 대한 이해와 공감' 등), 인사이트 카드 h2 22px/700 ×12, Contact strong 24px/700. 홈 히어로 60·섹션 제목 50/36·페이지 h1 56은 전부 영문(Outfit 또는 Pretendard). 국문 최대 크기 38px(1페이지 1회), 50px 이상 국문 0
verdict	국문 히어로·랜딩 대형 제목 레퍼런스로는 부적합(50px↑ 국문 0, 히어로는 Outfit 영문 60). 국문 편집형 제목(38/28/22 전부 700·lh1.5·자간 0)과 24/700 리드 + 17/400 본문의 '영문 헤드라인 + 국문 본문' 에이전시 조판 레퍼런스로 유효
rendered	Pretendard JP ×15671 · Pretendard JP Medium ×15

영문 · Latin영문 전용

latinFont	Pretendard JP 10,152글리프(83.9%) · IBM Plex Mono 1,634글리프(13.5%) · Outfit 307글리프(2.5%) · Apple SD Gothic Neo 3글리프(0.0%)
latinWeights	실측 페이스 Medium
share	라틴 12,096글리프 / 한글 15,686글리프 — 지면의 43.5%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard JP를 쓰는 단: h1-article 38px/700 · h2 36px/700 · h3 28px/700 · lead 24px/700 · body 17px/400 · ui 16px/400 · label 14px/700
mixing	국영문 혼용 노드 245개(전체 1,084개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Outfit 영문 전용(2.5% · 선언됨 · 최상단 디스플레이 독점) · IBM Plex Mono 모노(13.5%)
verdict	영문 전용 서체가 있다 — Outfit 라틴 2.5% / 한글 0.0% · 최상단 디스플레이 독점 · IBM Plex Mono 라틴 13.5% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 60px)
sharedWithKorean	국문과 같은 서체: Pretendard JP
rendered	Pretendard JP ×8673 · IBM Plex Mono ×1634 · Pretendard JP Medium ×1479 · Outfit ×307 · Apple SD Gothic Neo ×3

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	4px
Max width	1332px
Docs width	700px
Section gap	홈 12섹션은 padding-y 0(간격이 섹션 안쪽 요소에 붙음 — 미분해), 'Our Services'만 padB 60. About 섹션 padT/B 40/32·40/80·40/40. Careers padT 70 = 헤더 높이. 60px×18·80px×12가 섹션 내부 여백 후보
Header	70px fixed
Grid Home	카드 2열 648 거터 36(648×2+36=1332) · 인사이트 3열 420 거터 36(420×3+36×2=1332) · 칩 2열 243×64 거터 12 · 서비스 리스트 1열 460×60 ×11
Grid About	뉴스 카드 3열 431×299 거터 20(431×3+20×2=1333) · Approach 3열 320×320(gapX −40 — 겹침 또는 추출 오차, 미확인)
Grid Services	서비스 카드 3열 431×212 거터 20 ×9 · 상세 페이지 700 단일 컬럼(cands 700×36) · 관련 프로젝트 태그 84×26 r4 5×3 거터 4
Grid Contact	사진 모자이크 5열 256×256 거터 0 ×15(256×5=1280)
Grid Careers	포지션 행 1열 786×92 ×7
Card Padding	미확인 — layout은 카드 외곽 치수만(648×507·420×340·431×299·431×212)
Button Padding	0×16 (알약 14/700 r20) · 0×12 (주 버튼 12/700 r16) · 0×20 (아웃라인 16/700 r24) · 3×12 (prompt 입력 r4)

Border Radius

Role	Value	Preview
hairline	3px	2회 · div (0 0 3 3 / 3 3 0 0 버튼 분할 ×1씩 별도)
tag	4px	79회 · a/span 태그 칩 84×26·64×26, prompt 입력
—	6px	1회 · '업무협약(MOU)체결 관련 포스트 보기' 버튼
list	8px	12회 · 서비스 리스트 행 460×60·버튼
—	10px	1회 · 관측만
button-sm	16px	4회 · '프로젝트 문의하기' 주 버튼(p 태그)
pill-button	20px	54회 · 알약 버튼 표준 — 'Change language'·'Contact'·'pause'·'자세히 보기' (높이 40 추정, 미확인)
pill-lg	24px	5회 · '프로젝트 더보기' 아웃라인 버튼
—	30px	3회 · strong 태그 (히어로 문장 하이라이트 추정, 미확인)
circle	50%	3회 · 아이콘 버튼(pause·언어)
circle	100%	5회 · span/div 원형 마커
pill	999px	12회 · B2B 칩 243×64 bg #F5F5F5 (99px ×1 파트너십 태그 포함)

Guidelines

영문 디스플레이만 Outfit 700(60/50/40/38, lh1.3). 국문이 한 글자라도 섞인 줄은 Pretendard JP로 — 'UX Research 자세히 보기' 14/700, 'AI Eyes #7 AI를 완성하는…' 38/700 모두 Pretendard
36px 섹션 제목은 영문 단어여도 Pretendard JP 700 lh1.5(×5) — Outfit은 50px 이상에서만 꺼낸다
국문 본문은 Pretendard JP 17/400 lh1.53(×7) 또는 18/400 lh1.5(×3), 자간 0. 700px 단일 컬럼(글·포트폴리오 상세 cands 700×61·700×43)
텍스트 위계는 #111111(18.88:1) → #555555(7.46:1) → #747474(4.67:1) 3단으로, 전부 AA 통과
콘텐츠 폭 1332. 카드 그리드는 거터 36(2열 648 / 3열 420) 또는 20(3열 431)으로 폭을 정확히 채운다
버튼은 전부 알약 — 높이에 맞춰 radius 16/20/24, 보더 1px rgba(0,0,0,.13), 라벨 12~16px/700
채도는 네온 그린 #43FF77 한 색을 배지·마커·그라디언트(#01E969→#6EFF85)로만. 흰 지면 위 텍스트엔 #00873A(4.64:1)
모션은 0.3s ease-in-out 한 값(551회)으로 background-color·color·border-color만 전환

Don't

국문 히어로를 이 사이트에서 가져오지 않는다 — 히어로 60·섹션 50·페이지 h1 56 전부 영문 Outfit. 국문 최대는 38px 1회
#43FF77 위에 흰 텍스트·흰 지면 위 #43FF77 텍스트를 쓰지 않는다 (1.33:1, aa false ×8)
#B7B7B7을 읽어야 하는 텍스트에 쓰지 않는다 (2.01:1 ×11, 비활성 리스트 항목 전용)
box-shadow로 띄우지 않는다 — 8페이지에서 rgba(0,0,0,.15) 0 2px 2px ×2(low confidence)가 전부. 경계는 1px rgba(0,0,0,.29/.13/.06)
자간을 건드리지 않는다 — 31스타일 전부 letter-spacing 0. Outfit 60px에도 음수 자간 없음
다크 밴드를 남발하지 않는다 — 12섹션 중 2곳(434·464px), 나머지 10곳은 #FFFFFF
커스텀 이징·keyframe 애니메이션을 넣지 않는다 (animations 0, easing ease-in-out ×572·ease ×28)
18px·28px·10px 같은 4배수 밖 여백(18px×24·10px×7)을 표준으로 삼지 않는다 — 8·12·20·16·24가 주력