App Foundations

재스킨 — 토큰 · 컴포넌트

제품 앱을 External UI(화이트·퍼플 #6B3FF6·NanumSquare)로 재스킨하기 위한 토큰 브리지 + 핵심 컴포넌트 시범 전환. 현재 다크 가이드(app-components 등)는 as-is 인벤토리로 보존하고, 여기서 라이트 룩을 확정한 뒤 실제 앱에 롤아웃합니다. 마케팅보다 조밀한 스페이싱으로 제품 밀도에 적응시켰습니다.

토큰 브리지

현재 다크 토큰 → External Light 목표값. app.css의 .shell 토큰을 이 값으로 치환하는 단일 소스가 1순위.

#FFFFFF

Bg / Card

#F7F7F7

Stage

#E5E5E5

Line

#1A1A1A

Ink

#6B3FF6

Accent

#8B6BF9

Accent-2

#6B6B6B

Muted

#D4FF00

Lime

토큰	다크 (현재 · as-is)	External Light (목표)
베이스 · bg	#0F0F11 (다크)	#FFFFFF · 스테이지 #F7F7F7
서피스	#18181B	#FFFFFF (카드)
라인	#2A2A30	#E5E5E5
액센트	Red #E5484D	Purple #6B3FF6
하이라이트	—	Lime #D4FF00 (다크 위 강조)
텍스트	#F4F4F5	Ink #1A1A1A
보조 텍스트	#A1A1AA · #71717A	#6B6B6B · #9A9A9A
폰트	Noto Sans KR	NanumSquare (Bold/ExtraBold)
라운드	Ant 6 · 8px	카드 14 · 컨트롤 10 · pill 9999
포커스 링	레드 링	퍼플 링 rgba(107,63,246,.16)
아이콘	uicons fi-rr-*	icon() 라인 SVG

버튼

1차 액션 = 퍼블 솔리드. radius 10(또는 pill). 한 화면 primary 하나. 라운드는 마케팅(pill)과 제품(10) 사이 절충 — 두 옵션 노출.

primary #6B3FF6 · radius 10 / pill · 보조=화이트+라인 · danger=레드 텍스트

폼 · 입력 · 토글

포커스는 퍼플 보더 + 링. 토글 on = 퍼플. 필드 배경 화이트, 라인 #D9D9DE.

스마트링크 제목 상태

자동 게시 켜짐

미리보기 비공개

카드 · 표

화이트 카드 + 옅은 그림자 + radius 14. 표 헤더는 mist 배경 대문자 muted, 행 호버 #FAFAFB.

최근 스마트링크 LIVE

제목	클릭	상태
Golden Hour	12,480	live
Supernova	8,210	draft
Neon City	3,905	archived

뱃지 · 스탯 · 알림

상태 pill(그린=live), KPI 숫자 30/800 tabular-nums, 알림은 옅은 틴트 배경 + 동계열 텍스트(퍼플 info).

live draft archived PRO

총 클릭

128,940

▲ 8%

스마트링크

이번 주 CTR

38.2%

활성 캠페인

정보 — 캠페인이 곧 시작됩니다.

성공 — 스마트링크가 게시되었습니다.

주의 — 미발매 스토어가 2곳 있습니다.

오류 — URL을 인식하지 못했습니다.

재스킨 규칙

권장

· 액센트는 퍼플 #6B3FF6 단일 — 레드는 제거(시맨틱 danger만)
· 화이트 카드 + 옅은 라인/그림자, 라임은 다크 배너 강조에만
· 폰트 NanumSquare, 아이콘 icon() SVG(uicons 제거)
· 제품 밀도 위해 마케팅보다 조밀한 스페이싱·radius 10~14
· 포커스·선택 상태는 항상 퍼플 링

금지

· 다크 서피스/레드 액센트 잔존(.shell 다크 토큰)
· 마케팅 그대로의 큰 라운드(24)·넓은 여백을 표/폼에 적용
· 순백 위 저대비 텍스트(가독성) — muted는 #6B6B6B 이상
· uicons fi-rr-* 잔존 · 이모지
· 한 화면 위계 없는 primary 다수

pilot: External Light 재스킨 · 토큰 브리지 + 핵심 컴포넌트 — 확정 후 inc/header·footer + app.css .shell 토큰부터 롤아웃