si-sm/fanuzu
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

디자인 토큰을 Figma 실측값으로 교체 · 42dot Sans · ABeeZee 폰트 동봉

Browse Source
This commit is contained in:
Sn-Kinos
2026-09-02 19:16:27 +09:00
parent 4543503c70
commit 166b2a0e99
7 changed files with 131 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design-tokens.md
+54 -35
View File
@@ -92,29 +92,35 @@ colors:
web-muted: "#f6f0f4"
web-muted-foreground: "#6e6878"
web-border: "#e9e2e8"
# --- LED 스테이지 (전 surface 기본 · 2026-08-17 「포카 온 스테이지」 재설계) ---
# 보랏빛 웜 블랙을 폐기하고 꺼진 LED 패널의 중성 콜드 블랙으로 통일. 흰 포토카드가 서는 바닥.
color-cosmic-void: "#050508"
color-cosmic-surface: "#0A0A0E"
color-cosmic-surface-container: "#101016"
color-cosmic-surface-raised: "#16161D"
color-on-cosmic: "#F4F4F6"
color-on-cosmic-variant: "#A6A4B0"
# 악센트 — 공식 로고 실측 핑크 하나. 시안·에메랄드·마젠타는 상태 의미(실시간·온에어·이클립스) 전용.
# 바이올렛은 홀로 라일락(포일 스펙트럼 추출색)으로 재정의, 골드는 전광판 앰버(신호색)로 전환.
color-cosmic-accent: "#FF98D7"
color-on-cosmic-accent: "#2B0E1F"
color-neon-cyan: "#6FE8FF"
color-on-neon-cyan: "#05070F"
color-neon-emerald: "#3DDC97"
color-on-neon-emerald: "#05070F"
color-neon-magenta: "#FF2E7E"
color-on-neon-magenta: "#05070F"
color-neon-violet: "#C9A7FF"
color-on-neon-violet: "#05070F"
color-cosmic-mint: "#A9FFE0"
color-on-cosmic-mint: "#05070F"
color-cosmic-outline: "#26262E"
# --- 코스믹 서피스 · 발주사 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"
color-cosmic-outline: "#2C2C2E"
color-gold: "#FFD34D"
color-on-gold: "#241A02"
cosmic_fx:
@@ -148,29 +154,41 @@ brand:
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:
font-display: "'Gmarket Sans', 'Pretendard Variable', sans-serif"
font-body: "'Pretendard Variable', system-ui, sans-serif"
font-mono: "'Pretendard Variable', ui-monospace, monospace"
# 발주사 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: "Gmarket Sans = projectnoonnu woff 동봉 · Pretendard Variable = woff2 동봉 (시안/assets/ · file:// 오프라인 렌더용, 2026-08-14)"
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.01em, leading: 1.11}
type-title-l: {family: font-display, size: 24, weight: 700, tracking: -0.01em, leading: 1.2}
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-eyebrow: {family: font-body, size: 12, weight: 600, tracking: 0.06em, transform: uppercase}
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: 14
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
@@ -190,10 +208,11 @@ space:
gutter-mobile: 16
measure-ch: 70
radius:
corner-xs: 8
corner-sm: 10
corner-md: 14
corner-lg: 18
# 발주사 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)"