개요 컬러 · 토큰 타이포그래피 아이콘 레이아웃 · 셸 재스킨 브리지 기본 컴포넌트 폼 · 입력 내비게이션 오버레이 카드 · 리스트 칩 · 태그 · 뱃지 대시보드 데이터 시각화 분석 차트 애널리틱스 콘솔 RADAR 인텔리전스 시뮬레이터 · 모델 패턴 유통 모듈 생산성 도구 인증 · 온보딩 온보딩 팀 · 권한 · 감사 빌링 · 잔액

App Foundations

타이포그래피

제품 UI는 NanumSquare 본문(Pretendard 폴백)에 숫자·코드는 JetBrains Mono를 씁니다. 재스킨으로 마케팅/External과 본문 폰트가 통일됐습니다. 헤딩은 600으로 차분하게, 데이터 숫자만 800 + tabular-nums.

타입 스케일

.shell 스코프 실효값. 데이터 밀도가 높은 화면이라 본문 14px·헤딩 600으로 운용합니다.

H1 · 20 / 600
캠페인 대시보드
H2 · 16 / 600
스마트링크 성과
Body · 14 / 400
발매 첫 주, 흩어진 팬을 한 링크로 모읍니다. 데이터는 실시간으로 집계됩니다.
Eyebrow · 11 / 700 · .16em
Performance
Data · 30 / 800 · tabular
12,480 ▲ 8%
Mono · JetBrains
@aurora_official · USRC1.7000.245
H1 · 페이지
20px
600
H2 · 섹션
16px
600
H3 · H4
14–15px
600
Body
14px
400
Small
12–13px
400
Eyebrow
11px · .16em
700
Data
24–30px
800
Mono
.92em
500

웨이트

NanumSquare 패밀리. 5단계로 운용합니다.

Ag가
Regular
400
본문
Ag가
Medium
500
버튼·라벨
Ag가
Semibold
600
헤딩·강조
Ag가
Bold
700
라벨·뱃지
Ag가
Extrabold
800
데이터 숫자

운용 규칙

권장
  • · 헤딩은 600으로 차분하게 — 데이터 숫자만 800
  • · 숫자·KPI·핸들·ID는 tabular-nums + JetBrains Mono
  • · 본문 14px, 줄높이 1.5 (정보 밀도 우선)
  • · 섹션 라벨은 11px .eyebrow uppercase
금지
  • · 다른 본문 폰트 혼용 (Noto Sans KR 등 레거시) — NanumSquare로 통일
  • · 헤딩에 ExtraBold(800) 남발 — 화면이 시끄러워짐
  • · 본문 16px↑ (앱은 14px 밀도)
  • · 비례폭 숫자로 표·KPI 정렬 (자릿수 흔들림)