HS효성첨단소재
어두운 영상 히어로로 열고, 흰 지면 위에 남색 영문 디스플레이 한 단어와 연한 라벤더 회색으로 섹션을 잇는다.
HS효성첨단소재는 타이어보강재·탄소섬유·아라미드를 만드는 소재 기업의 코퍼레이트 사이트로, 첫 화면은 어두운 차체 영상이고 그 아래는 흰 지면입니다. 섹션 제목은 얇은 영문 한 단어(Business·Sustainability·R&D)를 남색 72px로 크게 세우고, 서브페이지에서는 국문 제목을 72px 굵게 올리는 것이 특징입니다. 자사 서체(HS Hyosung)가 국문 제목과 영문 디스플레이를 함께 그려 국문 대형 제목 타이포그래피 레퍼런스로 쓸 만합니다. 제조·소재 계열 코퍼레이트 사이트의 홈과 사업 소개 페이지를 설계할 때 참고하기 좋습니다.
https://www.hshyosungadvancedmaterials.com/krColor Palette
Primary
Label
Accent
Line
Background
Typography
HS Hyosung · 300 / 500 / 700display·heading (국문+영문)
Noto Sans KR Regular · 400body·ui
Type Scalepx 기준은 layout
display-home72px · 300 · 1.6
다람쥐 헌 쳇바퀴
h2-sub72px · 700 · 1.4
다람쥐 헌 쳇바퀴
h2-sub-sm64px · 700 · 1.4
다람쥐 헌 쳇바퀴
hero-title48px · 300 · 1.4
다람쥐 헌 쳇바퀴
h3-section40px · 500 · 1.4
다람쥐 헌 쳇바퀴
lead32px · 300 · 1.6
다람쥐 헌 쳇바퀴
h424px · 700 · 1.4
다람쥐 헌 쳇바퀴
body-lg20px · 400 · 1.6
다람쥐 헌 쳇바퀴
body18px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui16px · 400 · 3.5
다람쥐 헌 쳇바퀴
caption10px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | HS Hyosung 876글리프(39%) · Noto Sans KR Regular 558글리프 — 둘 다 webfont(isCustomFont) |
| hangulWeights | HS Hyosung 300·500·700 / Noto Sans KR 400 |
| body | 18~20px w400 Noto Sans KR lh1.6 ls−2.1% |
| sub | 국문 부제 18px(히어로) |
| label | 10~16px w400 |
| mixing | 제목은 HS Hyosung 이 국영문 모두 그리고 본문·메뉴는 Noto Sans KR. 선언 1순위가 NotoSansKR 이어도 제목 요소에서 HSHyosung 이 이긴다 |
| hangulHeadings | 있음 — 서브페이지 h2 72px/700('CEO 인사말'·'연혁'·'인사제도')·'타이어보강재' 72/700, 64/700('고객문의'), 섹션 h3 40/500. 단 홈 최대 제목 72px는 영문(Business·Sustainability·R&D)이고 국문 최대는 32/300 소개 문장 |
| verdict | 국문 대형 제목 레퍼런스로 유효(서브페이지 72/700 자사 서체, 자간 −1%). 홈 히어로는 영문 48/300이라 홈 국문 히어로 레퍼런스는 아님 |
| rendered | Noto Sans KR Regular ×12350 · HS Hyosung ×8012 · Noto Sans KR Bold ×205 |
영문 · Latin국문과 동일
| latinFont | HS Hyosung 5,693글리프(55.3%) · Noto Sans KR 4,522글리프(44.0%) · Apple SD Gothic Neo 69글리프(0.7%) · Helvetica 2글리프(0.0%) |
| latinWeights | 실측 페이스 Regular · Bold |
| share | 라틴 10,286글리프 / 한글 20,567글리프 — 지면의 33.3%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 HS Hyosung를 쓰는 단: display-home 72px/300 · h2-sub 72px/700 · h2-sub-sm 64px/700 · hero-title 48px/300 · h3-section 40px/500 · lead 32px/300 · h4 24px/700 |
| mixing | 국영문 혼용 노드 501개(전체 1,425개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 33.3%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 55.3%를 그리는 HS Hyosung가 한글도 39.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: HS Hyosung · Noto Sans KR |
| rendered | HS Hyosung ×5693 · Noto Sans KR Regular ×4440 · Noto Sans KR Bold ×82 · Apple SD Gothic Neo ×69 · Helvetica ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 10px | |
| Max width | 1080px | |
| Docs width | 1368px | |
| Section gap | 서브페이지 섹션 위아래 100/100(hero padT/B 100·100), 홈 hero 블록 간 약 1,084 간격은 스크롤 연출 포함 | |
| Header | 64px fixed | |
| Card Padding | 버튼 13×23 (12px 라운드) | |
| Button Padding | 13px 23px 10px |
Border Radius
| Role | Value | Preview |
|---|---|---|
| xs | 4px | 36회 · 작은 버튼·div |
| button | 8px | 59회 · 위로 이동 버튼·배지 |
| md | 12px | 21회 · 바로가기 버튼 |
| card-sm | 16px | 5회 · span 칩 |
| pill | 50px | 21회 · 연혁 기간 칩 |
| card | 24px | 81회 · 카드·이미지 |
Guidelines
Do
- 섹션 제목은 영문 한 단어 72px/300 + 남색 #06038D 로 크게 세운다
- 국문 제목은 HS Hyosung 700으로 72px(서브페이지)까지 올린다
- 큰 글자 자간은 −1.0%(−0.01em)로 통일
- 본문은 Noto Sans KR 400 18~20px lh1.6
- 카드·이미지 라운드 24px, 버튼 8~12px
- 콘텐츠 폭 홈 1080 / 서브페이지 1368
- 첫 화면은 어두운 풀폭 영상 + 흰 제목으로 열고 이후 지면은 #FFFFFF
Don't
- #A0A1BA·#888888(2.53·3.54:1)을 본문 텍스트로 쓰지 않는다
- #00E600 을 흰 바탕 위 글자색으로 쓰지 않는다(1.7:1)
- 그림자는 rgba(0,0,0,.1) 0 14px 40px 한 종류 외 늘리지 않는다(총 6회)
- 그라디언트 지면을 쓰지 않는다(raw gradients 0, 비전 패널은 이미지)
- 국문에 HS Hyosung 700 외 임의 합성 볼드를 쓰지 않는다(선언 웨이트 300·500·700)
- HS Hyosung 서체 파일 없이 72px 제목을 재현했다고 보지 않는다(자사 서체, 대체 시 줄바꿈 달라짐)
