fanuzu/design/design-tokens.md

디자인 토큰 — FANUZU

위치: design/design-tokens.md · 계약: 디자인 kit CONTRACT §6 색·타이포·간격·반경·사이징은 토큰으로만 참조한다(브리프에 raw hex/px 하드코딩 금지). web-*(Shadcn)은 고객 web + 관리자 admin 공용, color-*(MD3)은 네이티브 app surface용.

컬러 시드 선정 근거

• 입력 시드: #FF85D9
• 근거: 발주사가 인수 자산으로 제공한 데모(고객사 준비 데모/FANUZU_landing_page.tsx)의 로고 SVG에 실제로 쓰인 브랜드 핑크다. 새 색을 발명하는 대신 이미 존재하는 브랜드 자산에서 시드를 가져와 로고·앱아이콘·UI가 하나의 브랜드로 읽히게 했다.
• 가독성 보정(라이트 한정): #ff85d9 → #ac5992. 흰 배경에 얹을 때만 필요한 보정이다. 2026-08-02 전 surface를 코스믹 다크로 통일하면서 화면에서는 원 시드 #FF85D9 를 그대로 쓴다 — 검정 배경 위 대비가 9.61:1 로 보정 없이 AA를 넘긴다. #ac5992 는 라이트 대체 경로용으로만 남긴다. 색을 깎을 필요가 없어진 덕에 인수 데모의 네온 채도가 살아났다.
• 세컨더리 민트 #C1FFED 도 같은 데모 로고(아이싱)에서 왔다. 성장·회복 지표(행성 성장률·방어 회복량) 한 곳에만 쓰고 그 외에는 쓰지 않는다.

로고 결정

• 발주사 공식 자산 고객사 준비 데모/LOGO/fanuzu logo only.png를 수령했고, PNG의 알파 채널도 확인했다.
• 공식 앱 아이콘 원천도 같은 심볼이며 app/assets/brand/app-icon.png와 app/assets/brand/app-icon-foreground.png에 반영돼 있다.
• 따라서 현재 로고는 AI 생성 제안본이나 임시 Fancake 브랜드가 아니다. 별도 제안 로고 승인 대기도 없다.
• 서비스명은 FANUZU, 국문 병행 표기는 팬우주로 확정됐다. 발주사 공식 검토 회신서의 표지 지시에 따라 종전 CD-01(Fancake 확정)은 철회·대체했다(W-01).

디자인 언어 — 「포카 온 스테이지」 (2026-08-17 전면 재설계)

• 은유: 암전한 공연장(꺼진 LED 전광판) 위에 놓인 실물 팬 굿즈. 종전 코스믹(성운·별밭·유리·발광) 언어를 전면 폐기했다 — "검정 + 네온 + 글래스"는 AI 다크 템플릿의 전형이었고, mobbin 리서치 결과 K-POP 팬덤이 실제로 열광하는 건 분위기가 아니라 물성(포토카드·홀로 포일·전광판·다이컷 스티커)이다.
• 리서치 근거(mobbin MCP, 2026-08-17): Weverse 팬레터의 Y2K 팬시 물성 / Alan 의 홀로그램 수집품 리빌 / Tolan 의 LED 도트 전광판 무대 / Lapse 의 순흑+앰버 tabular 카운트다운 / TikTok LIVE 랭킹 문법.
• 4대 재료: ① 캔버스 = 중성 콜드 블랙 + 26px LED 도트 그리드 ② 콘텐츠 = 불투명 순백 포토카드 (다크 프레임 안의 라이트 아일랜드) ③ 프리미엄 = 홀로 포일(--foil, 2px 라인·노브 전용) ④ 숫자 신호 = 전광판 앰버(color-gold, 카운트다운·재화 스코어 전용).

컬러 운용 규율 (60-30-10)

• 60 암전 블랙 캔버스 · 30 흰 포토카드 면 · 10 공식 로고 핑크(행동·선택·포커스 전용).
• 프레임 위 주 버튼 = 핑크 필, 포토카드 안 주 버튼 = 잉크 스탬프 필(#201826) — 흰 면에 흰 필 금지.
• 앰버는 색이 아니라 신호다: 대표 지표·재화 잔액·카운트다운 숫자에만. 장식 사용 금지.
• 홀로 포일은 면에 풀지 않는다 — 2px 라인(모달 상단 박·KPI 모서리·섹션 바·아이브로 틱)과 부스터 노브까지만. 시안·에메랄드·마젠타는 상태 의미(실시간·온에어·이클립스) 전용, 글로우는 온에어 도트 한 곳뿐(--glow-live).

서피스 전략 — 왜 두 벌인가

surface	기본 서피스	근거
app (네이티브)	LED 스테이지(콜드 블랙 #0A0A0E + 도트 그리드 + 상단 핑크 스포트라이트), 콘텐츠는 흰 포토카드	화면 자체가 공연장 전광판이라는 은유. 굿즈(카드·스티커 행성)가 주인공이 되려면 바닥이 무채색이어야 한다.
web (마케팅·사전예약)	LED 스테이지 동일	랜딩에서 앱으로 넘어갈 때 브랜드가 끊기지 않게 같은 캔버스를 쓴다.
admin (운영 콘솔)	그라파이트 콘솔 (도트 더 옅게·스포트라이트 제외·굿즈 연출 제외)	색면이 표·수치와 경쟁하지 않게. 포토카드 반전도 admin 에는 적용하지 않는다 — 데이터가 주인공.

세 surface 모두 다크로 통일한 이유는 아트디렉션-예외.md 에 적었다. PRD-13 「Non-Verbal Cinematic UI」가 계약 요건이다. 2026-08-17 재설계는 다크 시네마틱을 유지하되 표현을 "분위기(성운·발광)"에서 "물성(굿즈)"으로 옮긴 것이다.

타이포 — 디스플레이 페어링

• 본문·UI: Pretendard Variable (한글 가독성) 고정.
• 디스플레이(제목): Gmarket Sans — 타입 디렉션 geometric.
• 근거: 팬덤 서비스의 제목은 또렷하고 젊은 기하학적 인상이 맞고, 국내 사용자에게 익숙한 리테일·커머스 톤(배달의민족·올리브영 계열)과 붙는다. 제목과 본문이 모두 Pretendard이면 모든 화면이 똑같아진다.
• 숫자(POP·FPI·달성률·표)는 type-mono-num 으로 tabular 고정 — 실시간으로 값이 바뀌는 화면에서 자릿수가 흔들리지 않아야 한다.

사용 규칙

• 앱 터치 타깃 touch-min-app 48 이상, 웹 클릭 타깃 touch-min-web 36 이상.
• 여백은 space-* 스케일에서만 고른다(임의값 금지). 섹션은 크게, 요소는 작게.
• 깊이는 elev-border(헤어라인)가 1순위. 떠 있는 요소만 elev-1~3.
• 오버레이 순서는 z-* 토큰을 따른다.

ℹ primary 가독성 보정(라이트 면 한정): 로고 핑크 #ff98d7 → 딥핑크 #b93074 (흰 면 위 대비 5.6:1 · AA)

ℹ 타입 디렉션: geometric — 디스플레이='Gmarket Sans' / 본문=Pretendard (예: 배달의민족 · 쿠팡 · 올리브영). 다른 디렉션: neutral, editorial, technical, warm

colors:
  # --- app (MD3 라이트 대체 경로) ---
  color-primary: "#b93074"
  color-on-primary: "#ffffff"
  color-primary-container: "#ffe3f3"
  color-on-primary-container: "#8a2e62"
  color-surface: "#faf7f9"
  color-surface-container: "#f0eaee"
  color-on-surface: "#201826"
  color-on-surface-variant: "#55495a"
  color-outline: "#7d7383"
  color-error: "#c53030"
  color-on-error: "#ffffff"
  # --- web (Shadcn) · 고객 web + 관리자 admin 공용 · 포토카드(라이트 아일랜드)의 기본값 ---
  web-background: "#ffffff"
  web-foreground: "#201826"
  web-primary: "#b93074"
  web-primary-foreground: "#ffffff"
  web-muted: "#f6f0f4"
  web-muted-foreground: "#6e6878"
  web-border: "#e9e2e8"
  # --- 코스믹 서피스 · 발주사 Figma 실측 (2026-09-02, figma-cli 로 03_Wireframe 1차 6화면 집계) ---
  # 공통 기준 2항: Figma 가 화면·UI·디자인의 기준이다. 종전 「포카 온 스테이지」 자체 재설계값은
  # 기준 제외 산출물에서 온 것이라 폐기하고 시안이 실제로 쓰는 값으로 바꾼다.
  # 시안은 남색 기운이 없는 중립 회색 계열이다 — 화면 #141414 · 시트 #101010 · 카드 #1a1a1c.
  color-cosmic-void: "#141414"
  color-cosmic-surface: "#101010"
  color-cosmic-surface-container: "#1A1A1C"
  color-cosmic-surface-raised: "#232324"
  color-on-cosmic: "#FFFFFF"
  color-on-cosmic-variant: "#A3A2A0"
  color-on-cosmic-muted: "#767676"
  # 오버레이 — Figma 실측(2026-09-26). 액션 시트 #2C2C2E(홈_초기사용자 343:212939) · 확인 팝업 #2D2D2D(차단하기 373:442417).
  color-cosmic-sheet: "#2C2C2E"
  color-cosmic-dialog: "#2D2D2D"
  # 악센트 — 시안 실측. 핑크가 선택·CTA, 초록이 POP·성공, 시안이 FPI·탭 활성, 블루가 정보 칩.
  color-cosmic-accent: "#FF7DDD"
  color-on-cosmic-accent: "#141414"
  color-neon-cyan: "#64EFF9"
  color-on-neon-cyan: "#141414"
  color-neon-emerald: "#00C60C"
  color-on-neon-emerald: "#141414"
  color-neon-magenta: "#FF4141"
  color-on-neon-magenta: "#FFFFFF"
  color-neon-violet: "#6866F3"
  color-on-neon-violet: "#FFFFFF"
  color-cosmic-mint: "#56CD9E"
  color-on-cosmic-mint: "#141414"
  color-cosmic-blue: "#52C1F9"
  color-on-cosmic-blue: "#141414"
  color-cosmic-orange: "#E4975D"
  color-on-cosmic-orange: "#141414"
  # FPI 탭·레이더 차트의 청록. 시안 행성 상세(373:441117) 실측.
  color-cosmic-teal: "#4BC2AE"
  color-on-cosmic-teal: "#141414"
  color-cosmic-outline: "#2C2C2E"
  color-gold: "#FFD34D"
  color-on-gold: "#241A02"
cosmic_fx:
  # 「포카 온 스테이지」 FX 그룹 (2026-08-17). 유리 블러는 상단바 한 곳, 발광은 온에어 도트 한 곳.
  # PRD-13 다크 시네마틱 계약 요건은 캔버스(암전 무대)로 충족한다(근거: design/아트디렉션-예외.md).
  glass-fill: "rgba(255,255,255,.06)"
  glass-fill-strong: "rgba(255,255,255,.09)"
  glass-stroke: "rgba(255,255,255,.10)"
  glass-blur: "16px"
  glow-live: "0 0 12px rgba(61,220,151,.45)"
  grad-action: "linear-gradient(135deg,#FF98D7 0%,#E24FA5 100%)"
  grad-brand: "linear-gradient(135deg,#FF98D7 0%,#C9A7FF 100%)"
  grad-gold: "linear-gradient(135deg,#FFE08A 0%,#FFC93C 100%)"
  grad-eclipse: "linear-gradient(135deg,#FF2E7E 0%,#701A38 100%)"
  grad-veil: "linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 100%)"
  # 무대 조명 — 프레임 상단 홑 핑크 스포트라이트(성운 수프의 후임, 단일 레이어).
  nebula: "radial-gradient(1200px 540px at 50% -20%, rgba(255,152,215,.09), transparent 62%)"
  # LED 도트 그리드 — 별밭의 후임. 이 레이어만은 타일이 맞다: size 26px 26px + repeat.
  starfield: "radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px)"
  orbit-stroke: "rgba(255,255,255,.10)"
  # 홀로 포일 — 포토카드 홀로그램. 프리미엄·위계 라인 전용(2px 라인·부스터 노브, 넓은 면 금지).
  foil: "linear-gradient(90deg,#FF98D7 0%,#C9A7FF 28%,#8FE8FF 52%,#A9FFE0 74%,#FFD9EC 100%)"
brand:
  brand-kakao: "#FEE500"
  brand-kakao-label: "#000000"
  brand-naver: "#03C75A"
  brand-naver-label: "#FFFFFF"
  brand-apple: "#000000"
  brand-apple-label: "#FFFFFF"
  brand-apple-onlight: "#FFFFFF"
  brand-google-fill: "#FFFFFF"
  brand-google-stroke: "#747775"
  brand-google-label: "#1F1F1F"
  # LINE 은 답변서 Q7 확정 5종에 들어왔다(네이버 대체). 이메일은 자체 제공자라 코스믹 악센트를 쓴다.
  brand-line: "#06C755"
  brand-line-label: "#FFFFFF"
  brand-email: "#FF7DDD"
  brand-email-label: "#141414"
font:
  # 발주사 Figma 실측 (2026-09-02). 42dot Sans Medium/SemiBold 가 본문·라벨 전량, ABeeZee 가 숫자·영문 표시.
  font-display: "'ABeeZee', '42dot Sans', sans-serif"
  font-body: "'42dot Sans', 'Pretendard Variable', system-ui, sans-serif"
  font-mono: "'ABeeZee', ui-monospace, monospace"
  font-direction: "geometric"
  font-source: "42dot Sans = Google Fonts OFL 가변 ttf · ABeeZee = Google Fonts OFL (app/assets/fonts/, 2026-09-02)"
type:
  # --- 발주사 Figma 계약 시점 사본 실측 (2026-09-26, 앱 93화면 텍스트 1,868건 집계) ---
  # 42dot Sans 가 81%, ABeeZee 가 14%(Regular 한 벌뿐이라 굵기는 400). 본문 자간은 -2.5% 가 표준이다.
  # 종전 값(Gmarket/포카 온 스테이지 재설계 — 44·32 Bold, 본문 400·행간 1.6)은 Figma 와 맞지 않아 교체한다.
  type-display-l: {family: font-display, size: 46, weight: 400, leading: 1.0}
  type-display-m: {family: font-display, size: 32, weight: 400, tracking: -0.025em, leading: 1.4}
  type-title-l: {family: font-body, size: 20, weight: 600, tracking: -0.025em, leading: 1.4}
  type-title-m: {family: font-body, size: 16, weight: 600, tracking: -0.025em, leading: 1.4}
  type-body-l: {family: font-body, size: 16, weight: 500, tracking: -0.025em, leading: 1.4}
  type-body-m: {family: font-body, size: 14, weight: 500, tracking: -0.025em, leading: 1.3}
  type-body-s: {family: font-body, size: 12, weight: 500, tracking: -0.025em, leading: 1.3}
  type-label-l: {family: font-body, size: 14, weight: 600, tracking: -0.025em, leading: 1.3}
  type-label-mobile: {family: font-body, size: 16, weight: 700, leading: 1.4}
  type-meta-mobile: {family: font-body, size: 13, weight: 600, leading: 1.4}
  type-eyebrow: {family: font-body, size: 12, weight: 600, tracking: -0.025em, leading: 1.0}
  type-caption: {family: font-body, size: 12, weight: 500, tracking: -0.025em, leading: 1.3}
  type-meta: {family: font-body, size: 10, weight: 500, tracking: -0.025em, leading: 1.3}
  # 공통 크롬 — Top Navigation 제목(229:12006 등 39화면) · 탭 루트 제목(MY/GALAXY/INSIDE) · Bottom Navigation 라벨(350:215853)
  type-nav-title: {family: font-body, size: 16, weight: 600, leading: 1.5}
  type-tab-title: {family: font-display, size: 20, weight: 400, leading: 1.4}
  type-nav-label: {family: font-display, size: 10, weight: 400, leading: 1.6}
  type-mono-num: {family: font-mono, feature: 'tnum', note: '가격·지표·표는 tabular'}
sizing:
  touch-min-app: 48
  touch-min-web: 36
  body-min-app: 16
  body-min-web: 16
  ui-min-desktop: 14
  ui-min-mobile: 16
  meta-min-desktop: 12
  meta-min-mobile: 13
space:
  space-0: 0
  space-1: 4
  space-2: 8
  space-3: 12
  space-4: 16
  space-5: 24
  space-6: 32
  space-7: 48
  space-8: 64
  space-9: 96
  space-card: 24
  space-section-desktop: 96
  space-section-mobile: 56
  container-max: 1200
  gutter-desktop: 32
  gutter-mobile: 16
  measure-ch: 70
radius:
  # 발주사 Figma 실측 (2026-09-02). 카드 12 · 칩·배지 8 · 큰 카드 16 · 알약 9999.
  corner-xs: 4
  corner-sm: 8
  corner-md: 12
  corner-lg: 16
  corner-full: 9999
elevation:
  elev-border: "0 0 0 1px rgba(16,18,29,.08)"
  elev-1: "0 1px 2px rgba(16,18,29,.06), 0 1px 1px rgba(16,18,29,.04)"
  elev-2: "0 4px 12px rgba(16,18,29,.08), 0 2px 4px rgba(16,18,29,.06)"
  elev-3: "0 12px 32px rgba(16,18,29,.14)"
motion:
  motion-fast: "120ms"
  motion-base: "180ms"
  motion-slow: "260ms"
  motion-ease: "cubic-bezier(.2,.8,.2,1)"
  motion-ease-in-out: "cubic-bezier(.4,0,.2,1)"
z:
  z-base: 0
  z-sticky: 1100
  z-dropdown: 1200
  z-popover: 1300
  z-overlay: 1400
  z-modal: 1500
  z-toast: 1700
contrast_checks:
  - [color-on-primary, color-primary]
  - [color-on-primary-container, color-primary-container]
  - [color-on-surface, color-surface]
  - [color-on-error, color-error]
  - [web-foreground, web-background]
  - [color-on-cosmic, color-cosmic-surface]
  - [color-on-cosmic-variant, color-cosmic-surface]
  - [color-on-cosmic, color-cosmic-surface-container]
  - [color-on-cosmic-accent, color-cosmic-accent]
  - [color-on-cosmic-mint, color-cosmic-mint]
  - [color-on-cosmic, color-cosmic-void]
  - [color-on-cosmic-variant, color-cosmic-void]
  - [color-cosmic-accent, color-cosmic-void]
  - [color-neon-cyan, color-cosmic-void]
  - [color-neon-emerald, color-cosmic-void]
  - [color-neon-magenta, color-cosmic-void]
  - [color-neon-violet, color-cosmic-void]
  - [color-on-neon-cyan, color-neon-cyan]
  - [color-on-neon-emerald, color-neon-emerald]
  - [color-on-neon-magenta, color-neon-magenta]
  - [color-on-neon-violet, color-neon-violet]
  - [color-on-cosmic, color-cosmic-surface-raised]
  # 앱 테마 조립이 새로 만드는 조합 (app/lib/core/theme/app_theme.dart navigationBarTheme).
  # 토큰 자체의 쌍이 아니라 '위젯 테마가 실제로 겹치는' 쌍이라 여기 없으면 회귀 게이트가 없다.
  - [color-cosmic-accent, color-cosmic-surface]          # 선택된 탭 라벨
  - [color-cosmic-accent, color-cosmic-surface-raised]   # 인디케이터 위 선택 라벨
  - [color-on-cosmic-variant, color-cosmic-surface-raised] # 인디케이터 위 비선택 라벨

---

정정 이력

일자	내용
2026-08-17	「포카 온 스테이지」 전면 재설계. 사용자 지시로 2주차 코스믹 언어(성운·별밭·유리·발광·보랏빛 웜 블랙·골드 프리미엄)를 폐기하고, mobbin 리서치 기반의 굿즈 물성 언어(LED 도트 캔버스·흰 포토카드 반전·홀로 포일·전광판 앰버)로 교체했다. 공식 로고 핑크·5탭·다크 시네마틱(PRD-13)·동봉 폰트는 유지
2026-08-13	공식 자산 반영. 고객사 준비 데모/LOGO/fanuzu logo only.png를 공식 FANUZU 심볼 원천으로 확정하고 시안 로고·앱 아이콘에 반영했다. 제안 로고/Q6 대기는 종료했다
2026-08-11	W-01 브랜드 정정. 발주사 공식 검토 회신서 표지에 따라 서비스명을 FANUZU(국문 팬우주)로 교체하고, 종전 CD-01(Fancake 확정)을 철회했다
2026-08-08	당시 CD-01 기준 정리. 인수 데모를 근거로 Fancake를 확정값으로 보아 서비스명 확인 질문을 삭제했다. 이후 발주사 공식 회신으로 이 판단이 철회됐으며 위 2026-08-11 행이 현재값이다