flex

검정 지면 위 국문 52–72px 제목이 논지를 말하고, 라임 #00FF44 버튼 한 개가 행동을 맡는다.

flex는 검정 지면 위에 국문 제목을 52~72px로 세우는 HR SaaS 랜딩입니다. 액션은 라임색 버튼 하나로 몰되 버튼 규격은 그대로 두고 페이지마다 배경색만 갈아 끼웁니다. 국문 제목 자간이 −2~−4% 구간에서 실측으로 남아 있고, 홈 히어로는 한 줄 안에서 영문 약어만 조금 키우고 한 단계 가볍게 해 국영문을 섞습니다. 제품 페이지가 다크 히어로에서 라이트 본문으로 뒤집히는 B2B 랜딩 골격도 함께 볼 만합니다.

https://flex.team

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 400 / 450 / 500 / 600 / 700 / 800display·heading·body·ui·caption — 한글 99.9%, 라틴 100%

Apple Color Emoji · 400이모지 (블로그 콜아웃 ✅💡)

PingFang SC · 400기호 폴백 (5글리프)

Type Scale43 스타일(raw 1920) 중 11단

display-about96px · 600 · 1

다람쥐 헌 쳇바퀴

display-product72px · 700 · 1.2

다람쥐 헌 쳇바퀴

hero-home-en58px · 500 · 1.08

다람쥐 헌 쳇바퀴

hero-home-ko52px · 600 · 1.2

다람쥐 헌 쳇바퀴

h2-product52px · 700 · 1.3

다람쥐 헌 쳇바퀴

h1-blog44px · 700 · 1.4

다람쥐 헌 쳇바퀴

h2-home32px · 700 · 1.2

다람쥐 헌 쳇바퀴

h3-product28px · 700 · 1

다람쥐 헌 쳇바퀴

body-product21px · 500 · 1.3

다람쥐 헌 쳇바퀴

body-blog17px · 400 · 1.7

다람쥐 헌 쳇바퀴

nav14px · 500 · 1.38

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable (27,734/27,754글리프, 99.9%) — 선언 1순위와 일치, self-hosted subset woff2
hangulWeights	400 12,515 · 500 6,219 · 600 5,021 · 700 3,895 · 800 58 · 450 26 — 본문 400 주력, 제목 700, 히어로 600
body	제품 21px w500 lh1.30 ls0 (×7) · 블로그 17px w400 lh1.70 ls−0.14px (×2) · 홈 카드 16px w400 lh1.50 (×1)
sub	홈 문제 제기 19px w500 lh1.55 (×1, 537×29 행 6개) · 제품 강조 21px w700 lh1.19 (×12)
label	nav 14px w500 lh1.38 (×29) · nav CTA 13px w700 (×14) · 배지 12px w700 uppercase (×7) · 캡션 12px w450 lh1.3 (×1)
mixing	단일 서체 혼용 — 국영문 모두 Pretendard Variable. 홈 h1은 국문 52/600 + 영문 'AI' 58/500을 한 줄에 두어 영문 약어를 키우고 가볍게 한다. 제품 h1 '구성원 · 조직 관리'의 중점은 PingFang SC 5글리프(추정, 미확인). About만 영문 디스플레이 96/600 'Relations Driven AX'
hangulHeadings	있음 — 홈 h1 '조직을 제대로 아는' 52/600 ls−1.12 · 제품 h1 '구성원 · 조직 관리'·'근태 관리'·'워크플로우'·'채용' 72/700 ls−2.16 · 제품 h2 52/700 ls−1.56 ×8('구성원의 모든 것이 한 눈에 보이는 프로필') · 홈 h2 32/700 ×3 · 블로그 h1 44/700 ×2. 국문이 사이트 전체 제목 위계를 맡는다
verdict	국문 히어로·대형 제목 레퍼런스로 강함 — 52~72px 국문 제목이 다크·라이트 지면 양쪽에 있고 자간 −3%·700 웨이트·lh1.2~1.3 값이 실측된다. 국영문 혼용 히어로(52+58)와 B2B 제품 랜딩 골격(다크 히어로→라이트 피처→인용 밴드→FAQ)의 레퍼런스로도 유효. About 영문 96px는 별도
rendered	Pretendard Variable ×33323

영문 · Latin국문과 동일

latinFont	Pretendard 17,310글리프(99.9%) · Apple Color Emoji 16글리프(0.1%) · PingFang SC 5글리프(0.0%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 17,331글리프 / 한글 33,323글리프 — 지면의 34.2%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display-about 96px/600 · display-product 72px/700 · hero-home-en 58px/500 · hero-home-ko 52px/600 · h2-product 52px/700 · h1-blog 44px/700 · h2-home 32px/700 · h3-product 28px/700 · body-product 21px/500 · body-blog 17px/400 · nav 14px/500
mixing	국영문 혼용 노드 784개(전체 2,166개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 34.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.9%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×17310 · Apple Color Emoji ×16 · PingFang SC ×5

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1024px
Docs width	720px
Section gap	제품 h2 섹션 pad 240/240(240px 45회)
Header	117px fixed
Grid Home	3열 325px, 거터 24 (325×3+24×2=1023) — 홈 카드 sec8·14
Grid Product	3열 312px, 거터 44 (312×3+44×2=1024) — 제품 카드 9×3·6×3 / 근태 대시보드 3열 333 거터 12 / 워크플로우 양식 3열 333×485 거터 12
Grid About	3열 328px, 거터 20 (328×3+20×2=1024) r24 · 파트너 로고 8×4 140×50 거터 12 · About 본문 1320 후보 8회
Grid Hero Marquee	홈 히어로 로고 띠 72개 49×40, 거터 60, 이미지 152장
Card Padding	홈 카드 325×248 / 제품 카드 312×149 / 온·오프보딩 카드 552×421 r10 / 조직도 카드 306×269 r12.76
Button Padding	24×28 (CTA·보조 r16) / 0×12 (칩 r8) / 0×8 (배지 r18)
List Row	FAQ 행 1024×75 ×4~5 · 제품 앵커 행 1024×66 ×4~5 · 홈 문제 제기 행 537×29 ×6 · About 연혁 행 673×75 r24 ×6
Header Note	117px는 공지 띠('NOTICE 조직을 제대로 아는 AI, 웨이팅' 14/500 + NEW 배지) + nav(Products·Partners·Blog·Resources·Company·Careers + 로그인·도입 문의하기 13/700) 합산. OmD(2026-07)는 공지 띠 48px 보고 → nav 69px 추정, 분할 미확인. About 페이지 헤더는 rgb(255,255,255) 라이트 변형. 폼 페이지(inquiry·lead-form)는 header none·footer 50, 콘텐츠 500

Border Radius

Role	Value	Preview
img-xs	4px	7회 · 작은 이미지 (5px ×11, 7px ×6도 img)
small	6px	39회 · 링크 칩
nav	8px	100회 · nav 링크·버튼·'회사명' 칩(pad 0 12) — 최다
media	10px	32회 · 이미지·온보딩 카드 552×421·블로그 공유 버튼 40×40
media-md	12px	14회 · 이미지 (12.76px ×2는 조직도 카드)
standard	16px	99회 · CTA 버튼(pad 24×28)·홈 카드 325×248·채용 오퍼레이션 행 893×76
badge	18px	14회 · NEW 배지 (12/700 pad 0 8)
large	24px	35회 · About 카드 328×440·연혁 행 673×75·링크
circle	50%	20회 · 아이콘 버튼·아바타
pill	999px	3회 · 소수 알약

Guidelines

국문 대형 제목은 Pretendard 700, 52px에 −3%(−1.56px)·72px에 −3%(−2.16px)·28px에 −4%(−1.12px) — 크기가 클수록 자간을 더 깊게 준다
홈 히어로처럼 국영문을 한 줄에 섞을 때 영문 약어는 6px 크게(58 vs 52)·한 단계 가볍게(500 vs 600), 자간 절대값(−1.12px)은 같게
다크 지면(#000/#111)에선 카드를 rgba(255,255,255,.04) 채움 + 1px rgba(255,255,255,.08) 보더로, 그림자 없이 구분한다(홈 카드 ×6, 그림자 none)
라이트 지면(#fff)에선 카드를 0.5px rgba(0,0,0,.1) 링 + rgba(0,0,0,.06) 0 9px 22px −4px 그림자로 띄운다(×102, 최다 조합)
CTA는 한 규격(pad 24×28, r16, 17/700, 텍스트 #111)을 고정하고 배경색만 라임 rgb(14,229,9)·#DC9BFF·#FF6523·#00FFD4로 바꾼다
제품 랜딩은 다크 히어로(712) → 라이트 본문으로 뒤집고, h2 섹션은 pad 240/240, 인용 밴드 #F5F5F7은 pad 96/96
콘텐츠 폭 1024 안에서 3열은 325/24(홈)·312/44(제품)·328/20(About) — 거터를 카드 성격에 맞춰 바꾸되 합은 1024
라운드는 8(nav)·16(CTA·카드)·24(대형) 8배수 3단, 배지만 18

Don't

#96999C를 라이트 지면 본문에 쓰지 않는다 — 2.86:1 AA 미달 ×38. 본문은 #5C5C5D(6.68:1) 이상
#333333을 다크 지면 텍스트로 쓰지 않는다 — 1.49:1 ×35
다크 지면 카드에 외부 그림자를 넣지 않는다 — 홈 카드 6개·About 카드 그림자 none. 그림자는 라이트 지면 전용(rgb(0,0,0) 0 10px 120px ×4는 예외적 글로우)
라임 #00FF44/rgb(14,229,9)를 상태색(성공)으로 전용하지 않는다 — 실측 15회 전부 CTA·강조. 오렌지 #FF4D00도 배지 7회뿐
블로그 h1(44px −0.3%)의 자간을 랜딩 제목에 옮기지 않는다 — 랜딩 52px는 −3%
정적 'Pretendard'·system-ui 폴백을 별도 서체 역할로 잡지 않는다 — 렌더 99.9%가 Pretendard Variable 하나
About의 96/80px 영문 디스플레이를 제품 랜딩 스케일로 쓰지 않는다 — 제품 최대는 국문 72px(×4)
300ms 초과 전환을 기본으로 두지 않는다 — 0.4s 6회·0.5s 6회뿐, 주력은 0.3s(90)·0.2s(54)·0.15s(42)