펜타브리드
검정 지면 위에 국문 대형 제목 하나, 액센트는 시안 한 색뿐.
펜타브리드는 디지털 에이전시의 자사 사이트로, 라이브러리에서 드물게 지면 전체가 검정이고 액센트는 시안 한 색뿐입니다. 영문 대문자를 190px까지 키워 섹션을 열고 그 아래 국문 제목을 74~110px의 가장 굵은 굵기로 놓아, 영문과 국문이 층으로 나뉩니다. 다만 한글을 그리는 실제 서체가 확인되지 않아 서체는 복제할 수 없고 크기·굵기·행간 구조만 가져올 수 있습니다. 홈이 스크롤 없는 풀스크린 슬라이더이고 작업 목록은 이미지가 본체라, 포트폴리오·에이전시 사이트를 설계할 때 참고하기 좋습니다.
https://www.pentabreed.comColor Palette
Primary
Label
Fill
Line
Background
Static
Typography
OTS derived font (CDP 명칭 — 실제 패밀리명 미확인) · 100 / 200 / 300 / 500 / 600 / 700 / 800 / 900한글·라틴 본문 및 제목 주력
WebSubsetFont (CDP 명칭 — 실제 패밀리명 미확인) · 100 / 300 / 500 / 700한글·라틴 보조
Apple SD Gothic Neo · 400한글 웨이트 400 폴백 · 라틴 폴백
Times / Times New Roman · 400 / 700라틴 선언 폴백
Type Scale1440 layout 기준으로 쓰고, 1440에 없는 300px·140px은 raw 1920 값이다(뷰포트 병기)
display-xl300px · 700 · 1
다람쥐 헌 쳇바퀴
display190px · 700 · 0.9
다람쥐 헌 쳇바퀴
h1140px · 700 · null
다람쥐 헌 쳇바퀴
h1-ko110px · 900 · 1.18
다람쥐 헌 쳇바퀴
h2100px · 700 · 1.1
다람쥐 헌 쳇바퀴
hero-ko74px · 900 · null
다람쥐 헌 쳇바퀴
h336px · 500 · 1.5
다람쥐 헌 쳇바퀴
body24px · 300 · 1.8
다람쥐 헌 쳇바퀴
body-sm18px · 100 · 1.3
다람쥐 헌 쳇바퀴
meta16px · 500 · 2
다람쥐 헌 쳇바퀴
label14px · 300 · 1
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | 미확인 — CDP는 'OTS derived font' 5,742글리프(96.6%)와 'WebSubsetFont' 181글리프(3.0%)로 보고한다. 이 둘은 패밀리명이 제거된 난독화·서브셋 웹폰트에 CDP가 붙이는 이름이지 서체명이 아니다. 선언 1순위는 Noto Sans KR이고 self-host 파일명은 NotoSansKR-Thin~Black(7웨이트)과 Spoqa Han Sans(4웨이트) 두 계열이라 실제 서체는 둘 중 하나로 추정되나 확정 불가 |
| hangulWeights | 300이 주력 4,029글리프(OTS 3,849 + WebSubset 180) · 500 849 · 700 397 · 200 224 · 100 159 · 800 152 · 900 96 · 400 37(그중 24가 Apple SD Gothic Neo) · 600 4. 한글 총 5,947글리프 |
| body | 24px w300 lh1.80 (about 소개문·project-id 개요) · 16px w300 lh2.38 · 18px w100 lh1.30 |
| sub | project 목록 항목 36px w500 lh1.50 · project-id 본문 24px w500(한글 200글리프 전량이 OTS derived font 하나로 그려진다 — 같은 노드에 섞인 WebSubsetFont 67글리프는 라틴·기호이고 한글이 아니다) |
| label | 14px w300 lh1.00 / w200 · 16px w500 lh2.00 · 푸터 주소 24px w800 |
| mixing | 영문 대문자 디스플레이(PENTAVERSE 190/700, ADVERTISING & DIGITAL FILM·MANPOWER 100/700)가 섹션을 열고, 국문은 그 아래 본문 24/300과 대형 제목 74/900·110/900을 맡는 2층 구조다. 웨이트 400 한글 37글리프 중 24글리프가 OS 폰트(Apple SD Gothic Neo)로 떨어져 이 좁은 구간만 서체가 사실상 지정돼 있지 않다 |
| hangulHeadings | 있음 — 홈 풀스크린 슬라이더 제목 74px/900 국문 7장('그린카 오피셜 웹사이트' · '서울시 대중교통 통합브랜드' · '현대로템 수소전기트램 AI…'), project-id 히어로 110px/900 '현대로템 수소전기트램 AI 그리기', about 문의 섹션 100px/700 '궁금한 점이 있으신가요?' |
| verdict | 국문 대형 제목·히어로 조판 레퍼런스로 유효하다 — 900 웨이트 74~110px, 검정 지면, 자간 0. 다만 실제 한글 서체가 CDP 난독화 이름으로만 남아 미확인이라 '이 사이트의 서체를 쓴다'는 식으로는 복제할 수 없고, 크기·웨이트·행간 구조만 이식 대상이다 |
| rendered | OTS derived font ×5742 · WebSubsetFont ×181 · Apple SD Gothic Neo ×24 |
영문 · Latin국문과 동일
| latinFont | OTS derived font 7,098글리프(74.6%) · WebSubsetFont 2,144글리프(22.5%) · Apple SD Gothic Neo 271글리프(2.8%) |
| latinWeights | 단일 페이스(웨이트 파생 페이스 없음) |
| share | 라틴 9,513글리프 / 한글 5,947글리프 — 지면의 61.5%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 OTS derived font를 쓰는 단: display-xl 300px/700 · display 190px/700 · h1 140px/700 · h1-ko 110px/900 · h2 100px/700 · hero-ko 74px/900 · h3 36px/500 · body 24px/300 · body-sm 18px/100 · meta 16px/500 · label 14px/300 |
| mixing | 국영문 혼용 노드 186개(전체 946개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 61.5%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 74.6%를 그리는 이름 미보고 서체(OTS derived font)가 한글도 96.6% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: OTS derived font · WebSubsetFont · Apple SD Gothic Neo |
| rendered | OTS derived font ×7098 · WebSubsetFont ×2144 · Apple SD Gothic Neo ×271 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 10px | |
| Max width | 1340px | |
| Section gap | 섹션 사이 여백은 padding이 아니라 섹션 높이 자체로 만든다 — about 16섹션 h90(strip)~5,330, 다음 페이지 CTA 섹션만 padding-bottom 230px ×3페이지, project 목록 상단 padding-top 240px | |
| Header | 64px fixed | |
| Content Width By Page | about 1340(68회) · project 1340(372회) · contact 1300(18회) · project-id 1280(2회) · home 600(3회, 슬라이드 내부 텍스트 블록 추정 — 슬라이드 자체는 1440 풀블리드) | |
| Grid Project | 목록 1열 1340×793 ×46 (project) · 1340×110 ×26 (about ICT AWARD) | |
| Grid Logos | 로고 6열 227×227 ×30, gap 0 (about y15465·h930) | |
| Grid Cards | 관계사 3열 335×400 (about y12868) · 소개 2열 670×657 ×5 (about y990) | |
| Card Padding | 미확인 — 반복 아이템 padding이 추출되지 않았다 | |
| Button Padding | 입력 0 30px / 40px (r 5px) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| input | 5px | 13회 · 폼 입력·라벨 |
| pill | 30px | 26회 · em 요소 — 슬라이더 제목 래퍼·태그 |
| circle | 50% | 14회 · span 아이콘·불릿 |
Guidelines
Do
- 지면은 #000000 단일로 두고, 텍스트를 #FFFFFF → #999999(7.37:1) → #666666(3.66:1) 3단으로 내린다
- 국문 대형 제목은 900 웨이트로 세운다 — 홈 슬라이더 74px/900, project-id 히어로 110px/900
- 영문 대문자 디스플레이는 자간을 음수로 조인다 — 190px −8px(−4.2%), 140px −3.2px(−2.3%)
- 국문 본문은 24px w300 lh1.80(또는 16px w300 lh2.38)로 행간을 크게 연다
- 액센트 #00B5C8은 검정 위에서만 쓴다(8.44:1). 보더 1px·글로우 rgba(0,181,200,.4) 0 0 40px가 정해진 용법이다
- 면은 각지게 둔다 — 45섹션의 반복 아이템 radius가 전부 0px, 라운드는 입력 5px·em 30px·아이콘 50%뿐
- 전환은 0.3s ease를 기본값으로 두고(104회), 긴 연출만 1s·1.2s·4s로 뺀다
- 다음 페이지 CTA는 100px/700 앵커 한 줄 + padding-bottom 230px로 페이지를 닫는다
Don't
- 시안 #00B5C8 위에 흰 텍스트를 올리지 않는다 (2.49:1, AA 미달 13쌍)
- #666666을 본문에 쓰지 않는다 (검정 위 3.66:1, AA 미달 16쌍) — 저작권·푸터 메타 전용
- 밝은 배경 섹션을 만들지 않는다 (5페이지 45섹션 중 44섹션이 rgb(0,0,0), 나머지 1섹션은 rgb(19,20,21))
- 그라디언트를 쓰지 않는다 (0개). 깊이는 그림자 2종뿐 — 드롭 rgba(0,0,0,.1) −20px 25px 40px 8px ×5, 시안 글로우 ×5
- 웨이트 400으로 한글을 조판하지 않는다 — 400 한글은 37글리프뿐이고 그중 24글리프가 OS 폰트(Apple SD Gothic Neo)로 떨어져 OS마다 다르게 보인다
- 카드·이미지에 라운드를 주지 않는다 (반복 아이템 radius 0px)
- 이 사이트의 서체명을 그대로 인용하지 않는다 — 실제 한글 서체가 CDP 난독화 이름(OTS derived font·WebSubsetFont)으로만 남아 미확인이다
