탬버린즈

흰 지면에 사진을 풀블리드로 깔고, 글자는 13~16px로 물러선다. 크게 쓰는 건 영문 세리프 한 줄뿐.

향 브랜드가 직접 운영하는 커머스입니다. 사진을 화면 끝까지 채워 깔고 글자는 13~16px로 물러서게 하는 구성이라, 크게 쓰는 것은 전시 페이지의 영문 세리프 한 줄뿐입니다. 국문 제목의 최대가 22px여서 국문 히어로 참고로는 맞지 않고, 대신 사진이 주도하는 커머스에서 작은 국문 제목과 본문을 어디에 앉히는지의 표본입니다. 상품 목록이 4열에 거터 1px로 화면 끝까지 붙는 그리드와, 좌측 갤러리 + 우측 정보 패널로 나눈 상세 화면이 가져갈 만한 골격입니다.

https://www.tamburins.com/kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 300 / 400 / 500 / 600 / 700한글 전부 + 영문 UI·홈 히어로 (99.9%)

Rosarivo · 400display — 영문 세리프 제목 전용 (전시 페이지)

Apple SD Gothic Neo · 400 / 500폴백 잔재 (OS 시스템 폰트)

Type ScaleDS 문서 없음 — 실측 기반

display46px · 400 · 1.2

Handgloves 123

display-236px · 400 · 1.2

Handgloves 123

hero-title24px · 500 · 1

다람쥐 헌 쳇바퀴

h1-product22px · 500 · 1.5

다람쥐 헌 쳇바퀴

h3-section20px · 400 · 1.5

다람쥐 헌 쳇바퀴

nav18px · 400 · 1

다람쥐 헌 쳇바퀴

card-title16px · 500 · 1.5

다람쥐 헌 쳇바퀴

body15px · 400 · 1.47

다람쥐 헌 쳇바퀴

ui-caps14px · 500 · 1.35

다람쥐 헌 쳇바퀴

label13px · 400 · 1.2

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable (19,465글리프, 99.9%) — 선언 1순위 'pretendard'(next/font)와 일치. 잔재: Apple SD Gothic Neo 8·HelveticaNeueLT Pro 65 Md 1(OS 폰트, 0.05%)·Rosarivo 9(집계 잡음 추정, 미확인)
hangulWeights	400 주력(17,260, 88.6%) · 500 제목·UI(1,303) · 700 강조(460) · 300 경량 본문(300) · 600 소제목(142)
body	15px w400 lh1.47 ls0 (상세·전시 bodyPx 15) · 약관 13px w400 행 21px · 고객센터 13px
sub	16px w500 lh1.5 (상품 카드 h2 ×4·혜택 날짜 span) · 18px w500 lh1.57 capitalize (홈 타일 제목 ×1)
label	13px w400 ×18 (링크·버튼) · 13px w600 ×9 · 12px w500 ×9 · 11px w400 capitalize ×24 · 10px w400 lh1.5 ×25
mixing	이원화 — 영문 세리프(Rosarivo 46/36/26, 전시 전용)와 국문·UI 전부(Pretendard)를 페이지·층으로 분리. 국영문 한 줄 혼용('헤어 퍼퓸 썸머테일스 - 80mL', '쉘 퍼퓸 핸드 듀오 세트 (썸머테일스&카모)')은 Pretendard 단일. 컬렉션명은 국문 음차('썸머테일스' nav 18/400)와 영문('SUMMER TAILS' 24/500)을 나란히 씀
hangulHeadings	있으나 작다 — 최대 22px w500(상품 상세 h1 '헤어 퍼퓸 썸머테일스' ×1), 다음 18px w500('새로운 헤어 퍼퓸 컬렉션' 홈 타일), 16px w500 상품명(×4, 목록 전체). 24px 이상 제목 4건은 전부 영문(24 Pretendard uppercase, 46·36 Rosarivo). 국문 히어로 카피 0 — 홈 히어로 텍스트 23자 중 제목은 'SUMMER TAILS'
verdict	국문 히어로·대형 제목 레퍼런스로는 부적합(국문 최대 22px). 사진 주도 커머스의 소형 국문 제목 조판(16/500 카드명·22/500 상세명·15/400 본문·13/400 버튼, 자간 0) 레퍼런스로 유효. 골격 자산은 4열 359/1 풀블리드 상품 그리드와 889×4 + 427 상세 분할
rendered	Pretendard Variable ×25743 · Apple SD Gothic Neo ×14

영문 · Latin영문 전용

latinFont	Pretendard 7,643글리프(99.1%) · Rosarivo 67글리프(0.9%) · HelveticaNeueLT Pro 65 Md 1글리프(0.0%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 7,711글리프 / 한글 25,757글리프 — 지면의 23.0%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: hero-title 24px/500 · h1-product 22px/500 · h3-section 20px/400 · nav 18px/400 · card-title 16px/500 · body 15px/400 · ui-caps 14px/500 · label 13px/400
mixing	국영문 혼용 노드 493개(전체 1,270개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Rosarivo 영문 전용(0.9% · 선언됨 · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Rosarivo 라틴 0.9% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 46px)
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×7643 · Rosarivo ×67 · HelveticaNeueLT Pro 65 Md ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact(타입) × spacious(이미지)
Base unit	8px
Max width	1320px
Docs width	612px
Section gap	홈 0px(히어로 y0 h900 → 타일 y900 h810 → 캐러셀 y1710, 여백 없이 접합)
Header	70px fixed (목록 페이지) / relative (혜택·고객센터·약관) / 홈·상세·전시는 탐지 0 — absolute 투명 오버레이 추정, 미확인
Grid Products	4열 359px, 거터 1px (359×4+1×3=1439 ≈ 1440 풀블리드), 카드 높이 580
Grid Home	3열 480px, 거터 0 (480×3=1440), 타일 높이 810 — 홈 contentWidth 후보 480×3이 이 타일
Grid Exhibition	6×2 510px, 거터 16 (510×2+16=1036, 중앙 정렬 미확인)
Carousel	홈 54장 254×450 gap 109(step 363 → 뷰포트당 약 4장, 미확인) · 혜택 상세 9장 431×578 gap 1
Detail Split	좌 갤러리 이미지 889px ×4 세로 적층(y 0/891/1781/2672, 간격 1~2px) · 우 정보 패널 427px(아코디언 행 427×50 ×4)
Card Padding	상품 카드 359×580 radius 0 bg transparent · 혜택 카드 612×236 ×4 세로
Button Padding	칩 0×20 (r50) · 용량 알약 0×32 (r50) · CTA 0 (r5, 폭은 컨테이너)

Border Radius

Role	Value	Preview
small	4px	3회 · div 소형(위치 미확인) · img 4.992px ×4·a 7.9872px ×4는 계산값
button	5px	21회 · CTA·보조 버튼('쇼핑백에 추가'·'자세히 보기')
outline	30px	4회 · '전체보기' 아웃라인 버튼
pill	50px	15회 · 카테고리 칩·용량 선택 알약
circle	50%	54회 · 원형 버튼·이미지(색상 스와치·도트) — 최다
—	9999px	1회 · 관측만 (92px·143.347px 각 1 포함)

Guidelines

잉크는 #1D1D1D 하나로 통일한다 (4,118회, 16.86:1). 보조 회색은 #A4A4A4·#767676 두 단계까지만
국문 제목은 16~22px w500(카드 16/500 ×4, 상세 h1 22/500)에 머물고 크기 대신 사진(카드 580px·히어로 900px)이 위계를 만든다
큰 글자(46·36·26)는 영문 세리프 Rosarivo w400 capitalize로만, 캠페인(전시) 페이지에 한정한다
상품 그리드는 4열 359px 거터 1px 풀블리드, 카드 radius 0·배경 투명·그림자 0으로 사진이 곧 카드다
섹션 사이 여백을 두지 않는다 — 홈은 900/810/849px 블록이 0px로 접합, 전시 텍스트 섹션만 pad 172
경계는 1px 헤어라인 #EFEFEF(81회)·#E2E2E2(25회)로만, 면을 띄우지 않는다(box-shadow 1회)
버튼은 13px w400 단일 크기. 액션은 r5 검정 채움, 선택·필터는 r50 알약
letter-spacing은 건드리지 않는다 (30스타일 전부 normal)

Don't

채도 색을 UI에 들이지 않는다 — 관측된 유색은 #D12B2B 9쌍(배지 추정)뿐, 링크·버튼·배경 전부 무채색
국문 대형 제목을 만들지 않는다 — 국문 최대 22px, 24px 이상 제목 4건 전부 영문(24 'SUMMER TAILS'·46 'Summer Tails'·36 'new collection'·'Fragrance')
#767676을 #EFEFEF 위에 본문으로 쓰지 않는다 (3.95:1 AA 미달 ×11) · #B4B4B4는 #fff 위 2.07:1로 텍스트 금지
카드·이미지에 radius·그림자·보더를 주지 않는다 (상품 카드 radius 0px, border 0, shadow none, box-shadow 전체 1회)
다크·유색 배경 섹션을 만들지 않는다 (10페이지 51섹션 전부 rgb(255,255,255))
모션에 transform·keyframe을 넣지 않는다 (animations 0, 전환은 color·background-color 0.3s linear ×221)
세리프를 한글에 쓰지 않는다 — Rosarivo는 한글 글리프가 없어 한글은 Pretendard로 폴백된다(한글 99.9% Pretendard Variable)
본문 15px를 300 웨이트로 얇게 쓰는 걸 기본으로 삼지 않는다 (15/300은 2스타일, 15/400 lh1.47이 본문 기준)