디자인 토큰 — 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의 알파 채널도 확인했다.
시안은 이 공식 심볼을 시안/assets/logo.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"
  # 악센트 — 시안 실측. 핑크가 선택·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:
  type-display-l: {family: font-display, size: 44, weight: 700, tracking: -0.01em, leading: 1.06}
  type-display-m: {family: font-display, size: 32, weight: 700, tracking: -0.007em, leading: 1.2}
  type-title-l: {family: font-display, size: 24, weight: 700, tracking: 0, leading: 1.3}
  type-title-m: {family: font-body, size: 18, weight: 600, leading: 1.3}
  type-body-l: {family: font-body, size: 18, weight: 400, leading: 1.6}
  type-body-m: {family: font-body, size: 16, weight: 400, leading: 1.6}
  type-body-s: {family: font-body, size: 14, weight: 400, leading: 1.55}
  type-label-l: {family: font-body, size: 14, weight: 500, leading: 1.2}
  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.04em}
  type-caption: {family: font-body, size: 12, weight: 500, leading: 1.4}
  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 행이 현재값이다

16 KiB Raw Blame History Unescape Escape

디자인 토큰 — FANUZU

컬러 시드 선정 근거

로고 결정

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

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

서피스 전략 — 왜 두 벌인가

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

사용 규칙

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

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

정정 이력

16 KiB

Raw Blame History