클래스101

흰 지면에 검정 텍스트, 오렌지는 살 때 한 번 — 카드 격자로 6,396개를 늘어놓는 커머스 조판.

클래스101은 강의를 카드 격자로 늘어놓는 구독 커머스입니다. 색은 흰 지면과 검정 글씨가 사실상 전부이고, 유채색은 오렌지 하나를 구매 버튼 배경에만 씁니다 — 흰 배경 위 글자색으로는 대비가 모자랍니다. 이 사이트의 서명은 자간으로, 40px에서 −2.8%였다가 크기가 줄수록 완만해지고 11px 아래에서는 0이 되는 규칙을 끝까지 지킵니다. 국문 히어로는 40px에 그쳐 브랜드 선언형 참고로는 약하지만, 촘촘한 카드·목록 조판 표본으로는 이 라이브러리에서 가장 빽빽합니다.

https://class101.net/ko

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 400 / 500 / 600 / 700 / 800 / 900display·heading·body·ui·caption — 한글과 라틴 전부

Apple Color Emoji · 400emoji

PingFang SC · Zapf Dingbats · Apple SD Gothic Neo · Lucida Grande · 400fallback (잔여)

Type Scale1440 기준

display40px · 800 · 1.25

다람쥐 헌 쳇바퀴

h132px · 700 · 1.25

다람쥐 헌 쳇바퀴

h228px · 700 · 1.29

다람쥐 헌 쳇바퀴

h320px · 700 · 1.3

다람쥐 헌 쳇바퀴

h418px · 700 · 1.22

다람쥐 헌 쳇바퀴

body-doc18px · 400 · 1.67

다람쥐 헌 쳇바퀴

body16px · 500 · 1.25

다람쥐 헌 쳇바퀴

card-title14px · 500 · 1.29

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.33

다람쥐 헌 쳇바퀴

micro11px · 400 · 1.27

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable — 한글 58,304글리프 중 58,236(99.9%). 선언 1순위와 실제 렌더 일치, class101.net 자체 호스팅 92 서브셋
hangulWeights	400 41,962 · 500 11,272 · 700 3,965 · 600 611 · 900 411 · 800 15 — 본문 400, 카드 제목 500, 소제목 700, 히어로만 800
body	약관 18px w400 lh1.67 자간 0(1232px 폭) · 카드·목록 14px w400~500 lh1.29 자간 −0.168px
sub	미확인 — 히어로 섹션에서 본문 크기가 측정되지 않았다(bodyPx null)
label	12px w400 lh1.33 −0.12px · 11px w400 lh1.27 자간 0(푸터 링크) · 10px w400 lh1.20 자간 0
mixing	이원 체계 없음. 한글도 라틴(1,271글리프)도 Pretendard Variable 하나가 그린다. 'CLASS101 약관' 28/700처럼 한 줄 국영문 혼용도 같은 폰트·같은 자간(−0.616px)으로 처리
hangulHeadings	있음. 홈 히어로 h1 40px/800 lh1.25 ls−1.12px 국문 2행 '무제한 구독으로 더하는 가능성'(y116, 섹션 718px, CTA 2개 동반) · 신고센터 h1 48px/700 lh1.21 '지식재산권 침해 신고 센터'(다크 #0C0C0C 지면) · 홈 섹션 제목 32/700 '클래스는 무궁무진합니다' · 28/700 '10만 구독자 분들의 진짜 후기'
verdict	국문 히어로 레퍼런스로 유효 — 단 브랜드 선언형이 아니라 커머스형이다. 40px/800은 시드 상단(토스 80/700 · 카카오뱅크 90/800 · 우아한형제들 78/900)의 절반이고, 제목 아래 CTA 2개와 240×147 카드 레일 26장이 같은 화면에 접혀 있다. 국문 목록·카드 조판(14/500 −1.2%, 6열 181px 썸네일)과 음수 자간 스케일 레퍼런스로는 시드 안에서 가장 촘촘한 표본이다.
rendered	Pretendard Variable ×45779

영문 · Latin국문과 동일

latinFont	Pretendard 14,470글리프(99.5%) · Apple Color Emoji 38글리프(0.3%) · PingFang SC 16글리프(0.1%) · Zapf Dingbats 10글리프(0.1%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 14,537글리프 / 한글 45,779글리프 — 지면의 24.1%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 40px/800 · h1 32px/700 · h2 28px/700 · h3 20px/700 · h4 18px/700 · body-doc 18px/400 · body 16px/500 · card-title 14px/500 · caption 12px/400 · micro 11px/400
mixing	국영문 혼용 노드 1,283개(전체 3,254개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 24.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.5%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×14468 · Apple Color Emoji ×38 · PingFang SC ×16 · Zapf Dingbats ×10 · Pretendard ×2 · Lucida Grande ×2 · Apple SD Gothic Neo ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	8px
Max width	1232px
Docs width	1232px
Section gap	0 — 홈 13섹션 전부 padding-y 0이고 y+height가 다음 y와 정확히 맞물린다(116+718=834, 834+501=1335, 1335+834=2169). 섹션 여백은 컨테이너 패딩이 아니라 내부 요소 마진으로 처리된다. 예외는 카테고리 목록 페이지로 27섹션 대부분이 padding 12/12
Header	116px sticky
Grid Home4	4열 296×233 거터 16 (296×4+16×3=1232) — '구독 인기 클래스' 8카드
Grid Home5	5열 234×219 거터 16 (234×5+16×4=1234) — '6,396개 강의' 20카드
Grid Hero	가로 레일 240×147 거터 12 ×26 (히어로 y116~834 안)
Grid Category	6열 181×138 거터 0 — 카테고리 목록 21개 행(6·9·10·13열 변주)
Grid Review	18열 320×584 거터 20 — 홈 후기 캐러셀 y4346
Grid Product	상품 상세 본문 728(갤러리 728×410, 거터 12) 안에 1232 컨테이너
Card Padding	미확인 — 섹션 추출기가 잡은 반복 아이템의 bg가 transparent·radius 0px이라 카드 내부 패딩이 측정되지 않았다
Button Padding	로그인 10px · 한국어 7×8 · 구독 시작하기 14×13 · 구매하기 15×14

Border Radius

Role	Value	Preview
micro	2px	27회 · 배지
standard	4px	1135회 · 카드·링크 기본값 — 전체 1위
control	8px	590회 · 버튼·링크 블록
thumb-top	8px 8px 0px 0px	104회 · 카드 썸네일 상단만 라운드
cta	12px	116회 · 구매하기·구독 시작하기 버튼
panel	16px	70회 · 신고센터 카드 277×266
sheet	30px	18회 · iframe·모달 시트
circle	50%	10회 · 아바타·아이콘 버튼
pill	10000px	178회 · 필터 알약·언어 선택

Guidelines

국문 제목에 크기 비례 음수 자간을 건다: 40px −1.12px(−2.8%) · 32px −0.768px(−2.4%) · 28px −0.616px(−2.2%) · 20px −0.36px(−1.8%)
11px·10px 이하에는 자간을 주지 않는다(0). 자간을 거는 하한이 12px −0.12px
오렌지 #FF5D00은 CTA 배경으로만 — 흰 배경 위 텍스트는 3.08:1로 AA 미달이다
카드 격자는 1232 안에서 4열 296/거터 16 또는 5열 234/거터 16, 카테고리 썸네일은 6열 181/거터 0
면 분리는 1px solid rgba(0,0,0,.05)(375회) 헤어라인 먼저, 그림자는 카드 rgba(0,0,0,.06) 0 5px 8px −1px(57회)까지만
radius는 4(1,135)·8(590)·12(116) 3단으로 쓰고 썸네일 상단만 8px 8px 0 0(104회)
모션은 0.16s(866)·0.2s(503)에 cubic-bezier(0.5,1,0.89,1)(1,187), 속성은 opacity·transform만
한글·라틴 모두 Pretendard Variable 하나로 — 92개 유니코드 서브셋을 자체 호스팅해 섞어 써도 획 굵기가 어긋나지 않는다

Don't

본문에 #949494(3.03:1, 41쌍)·#E6E6E6(1.25:1, 135쌍)를 쓰지 않는다 — 둘 다 AA 미달
다크 섹션 위에 #000000을 얹지 않는다: #000 on #181818 1.18:1이 11쌍 실재한다(측정된 결함)
16px 이하 국문에 양수 자간을 주지 않는다 — 이 사이트는 전 단계 음수이거나 0이다
CSS 변수 팔레트(6색상 × soft/vibrant/muted/contrast, 20종)를 다 꺼내 쓰지 않는다 — 실사용은 red 54·blue 11·green 4·violet 2회뿐이다
0.4s를 넘는 전환을 만들지 않는다(0.4s 19회가 상한, 5s 1회는 배너 자동재생)
섹션마다 컨테이너 padding-y를 주지 않는다 — 홈 13섹션 전부 0이고 여백은 내부 요소가 만든다
구독 히어로를 텍스트만으로 만들지 않는다 — 40px 제목 아래 CTA 2 + 240×147 카드 26장이 함께 접혀 있다