/* ══════════════════════════════════════════════════════════════════════ finance-hub · 디자인 토큰 v1.0 · 2026-09-22 ────────────────────────────────────────────────────────────────────── 단일 진실원. 명세는 guide/finance-unified-design-system.md. ★ 리터럴 색·치수는 이 디렉터리(design/) 밖에 존재할 수 없다. harness 의 ai_smell 검증기가 강제한다. 구조 [1] 팔레트 층 색 원자 · --veil 테마 기법 · 카테고리 틴트 [2] 치수 층 여백 · 반경 · 선 · 그림자 · 모션 [3] 프로파일 층 p-brief(임원) / p-console(실무) / p-dense(대사) 컴포넌트 층은 components.css 가 가지며, 여기 토큰만 참조한다. 테마 원리 — --veil 삼중항 (finance-simulator 승계) 오버레이를 rgba(var(--veil), α) 로 쓴다. 삼중항만 뒤집으면 알파 계조를 유지한 채 라이트/다크가 동시에 성립한다. 라이트 퍼스트인 이유 주 사용자층이 40~50대다. 재무앱은 작은 숫자를 오래 본다. 다크의 저대비 회색 본문은 노안에 특히 불리하다. ⚠ OKLCH 상대색 문법(oklch(from …))을 쓰지 않는다 Impeccable 은 OKLCH 를 권하지만, relative color syntax 는 구형 브라우저에서 조용히 무시되고 그러면 색이 '없어진다'. 사내 단말이 균질하지 않다. 대신 --brand-rgb 삼중항 + rgba() 로 같은 목적을 달성한다 — --veil 과 동일한 기법이라 학습 비용도 0 이다. ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── [1] 팔레트 층 — 라이트 ───────────────────────────────────────────────────────────── */ :root{ /* 오버레이 기준색. 라이트에선 잉크. */ --veil:15,23,42; --line:rgba(var(--veil),.10); --line-2:rgba(var(--veil),.15); --line-3:rgba(var(--veil),.26); /* ── 브랜드 — 단일 액센트 ────────────────────────────────────── #FF5E27 은 dcamp 로고(dcamp_Logo_RGB_Orange.png) 픽셀 실측값이다. 임의로 고른 색이 아니다. ★ 면적이 아니라 '1선' 으로 쓴다 — 활성·포커스·현재기간. ⛔ 폐기: --grad(보라→파랑→시안 그라디언트) · #7C5CFF(아이리스). 둘 다 "AI가 만든 티" 안티패턴이고, 사내 4갈래 액센트를 이 한 색으로 수렴시킨다. */ --brand-rgb:255,94,39; --brand:#FF5E27; --brand-ink:#C7431A; --brand-soft:rgba(var(--brand-rgb),.08); --brand-soft-2:rgba(var(--brand-rgb),.16); /* validator:allow pure-bw — 주황 위의 글자다. 흰색이 아니면 대비가 떨어진다 */ --brand-fg:#FFFFFF; /* ── 잉크 ── 순수 검정을 쓰지 않는다. 브랜드 톤이 미세하게 섞여 있다. */ --ink:#12161F; /* 제목 · KPI 값 */ --body:#3D4759; /* 본문 */ --muted:#5F6B80; /* 라벨 · 보조 */ --faint:#8792A4; /* 캡션. 본문으로 쓰지 않는다 (대비 미달) */ /* ── 서피스 ── warm white. 이 미세한 따뜻함이 '장부'의 인상을 만든다. */ --bg:#FDFCFB; /* 카드 면은 순백이다. 여기서 warm 을 한 번 더 섞으면 --bg(#FDFCFB) 와 구분되지 않아 카드 경계가 사라진다. validator:allow pure-bw */ --surface:#FFFFFF; --surface-2:#F7F6F4; /* 표 헤더 · 패널 헤더 */ --surface-3:#EFEDEA; /* 강조 배경 */ /* ── 시맨틱 — 수치와 뱃지 전용. 배경·버튼에 쓰지 않는다. ── */ --danger:#B91C1C; --danger-soft:rgba(185,28,28,.10); --success:#15803D; --success-soft:rgba(21,128,61,.10); --warning:#B45309; --warning-soft:rgba(180,83,9,.12); --info:#1D4ED8; --info-soft:rgba(29,78,216,.10); /* ── 증감 방향 — 한국 재무·증시 관행 ──────────────────────────── ⚠ 서구 회계(초록=플러스)와 정반대다. 사내 표준은 아래가 맞다. finance-portal/public/finance-loader.js 실측값 승계. */ --delta-up:#EF4444; /* △ 증가 */ --delta-down:#3B82F6; /* ▽ 감소 */ --delta-flat:#8792A4; /* - 보합 */ /* 값의 부호 — '증감 방향'과는 다른 축이다. 음수는 색이 아니라 괄호로 표기하는 것이 회계 관행이다: (286) */ --neg:#B91C1C; /* ── 차트 계열색 — finance-portal 팔레트 승계 ────────────────── 규칙: 크롬(사이드바·버튼·칩)은 브랜드 1색, 데이터는 여기. --chart-5(보라)는 **데이터 계열에서만** 허용된다. */ --chart-1:#60A5FA; /* 파랑 — 1순위 / cash-in */ --chart-2:#34D399; /* 에메랄드 — net · 잔액 */ --chart-3:#F59E0B; /* 앰버 — 3순위 */ --chart-4:#F87171; /* 연빨강 — cash-out */ --chart-5:#8B5CF6; /* 보라 — 5순위 */ --chart-6:#22D3EE; /* 시안 — 6순위 */ --chart-neutral:#CBD5E1; --chart-past:#93C5FD; --chart-now:#EF4444; /* ── 카테고리 틴트 — 의미 없는 구분색 ────────────────────────── 사이드바 아이콘 · 투자유형 · 계열 구분에만. 상태를 뜻하지 않는다. */ --c-iris:#7C5CFF; --c-azure:#4A73FF; --c-cyan:#22D3EE; --c-violet:#A855F7; --c-tang:#FF9E57; --c-pink:#FF5C8A; --c-green:#34D399; --c-lime:#A3E635; --c-rose:#F0526B; --c-amber:#F5B841; --c-blue:#3B82F6; --c-slate:#8B95B0; /* ── 폰트 ────────────────────────────────────────────────────── ★ 선언만으로는 적용되지 않는다. 문서 에서 Pretendard 를 반드시 로드한다 — 구 프로젝트 공통 결함이었고, "폰트가 촌스럽다" 의 단일 원인이었다(맑은고딕 폴백). 모노스페이스를 쓰지 않는다: 한글이 섞이면 Latin→한글 폴백으로 세로 메트릭이 어긋난다. 데이터 느낌은 tabular-nums 로 낸다. */ --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont, system-ui,Roboto,"Helvetica Neue","Segoe UI", "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic", "Apple Color Emoji","Segoe UI Emoji",sans-serif; --font-num:var(--font); } /* ───────────────────────────────────────────────────────────── [1'] 팔레트 층 — 다크 --veil 만 뒤집으면 선·오버레이는 자동으로 성립한다. 나머지는 '같은 역할의 다른 값' 이라 명시한다. ───────────────────────────────────────────────────────────── */ :root[data-theme="dark"]{ --veil:255,255,255; --brand-rgb:255,122,77; --brand:#FF7A4D; --brand-ink:#FF9470; --brand-soft:rgba(var(--brand-rgb),.14); --brand-soft-2:rgba(var(--brand-rgb),.24); --brand-fg:#1A0E08; --ink:#F5F8FF; --body:#C4CDE2; --muted:#8B95B0; --faint:#5C6684; --bg:#0A0C12; --surface:#12161F; --surface-2:#171C28; --surface-3:#1E2432; --danger:#F87171; --danger-soft:rgba(248,113,113,.14); --success:#4ADE80; --success-soft:rgba(74,222,128,.14); --warning:#FB923C; --warning-soft:rgba(251,146,60,.16); --info:#60A5FA; --info-soft:rgba(96,165,250,.14); --delta-up:#F87171; --delta-down:#60A5FA; --delta-flat:#5C6684; --neg:#FCA5A5; --chart-1:#7DB4FF; --chart-2:#4ADE80; --chart-3:#FBBF24; --chart-4:#FB8A8A; --chart-5:#A78BFA; --chart-6:#5EEAD4; --chart-neutral:#475569; --chart-past:#3B5580; --chart-now:#F87171; } /* ───────────────────────────────────────────────────────────── [2] 치수 층 — 프로파일과 무관하게 고정 ───────────────────────────────────────────────────────────── */ :root{ /* 여백은 8px 그리드 배수로만 쓴다. 임의 값 금지. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --r-1:3px; --r-2:6px; --r-3:10px; --r-4:14px; --r-pill:999px; /* 그림자는 한 단계뿐이다. 분리는 1px 괘선과 여백으로 한다. */ --shadow:0 1px 2px rgba(var(--veil),.04); --shadow-pop:0 8px 24px rgba(var(--veil),.10); /* 모션 — transform/opacity 만 애니메이션한다. */ --ease:cubic-bezier(.2,.8,.2,1); --dur-1:120ms; /* 상태 전환 */ --dur-2:180ms; /* 패널 · 시트 */ /* 셸 치수 */ --sidebar-w:236px; --topbar-h:52px; --z-scrim:40; --z-drawer:50; --z-dock:60; --z-modal:70; --z-toast:80; /* 본문 가독 폭 — measure 를 ch 로 제어한다(Impeccable) */ --measure:72ch; } @media (prefers-reduced-motion: reduce){ :root{ --dur-1:0ms; --dur-2:0ms; } } /* ───────────────────────────────────────────────────────────── [3] 프로파일 층 — 밀도 3단 body 에 클래스 하나를 걸어 전환한다. 컴포넌트는 이 토큰만 본다. ⓘ p-console 의 본문 14px 은 Impeccable 의 "16px 이상" 권고를 **알고 택한 예외**다. 한 화면에 들어가야 하는 열 수가 정해져 있다. 대신 행높이 1.6 과 ch 기반 measure 로 보상한다. 브리핑 화면(p-brief)에서는 16px 을 지킨다. ───────────────────────────────────────────────────────────── */ body{ --fs-body:14px; --fs-table:13px; --fs-kpi:28px; --sp:var(--sp-4); --row-h:34px; } body.p-brief{ --fs-body:16px; --fs-table:14px; --fs-kpi:40px; --sp:var(--sp-5); --row-h:42px; } body.p-console{ --fs-body:14px; --fs-table:13px; --fs-kpi:28px; --sp:var(--sp-4); --row-h:34px; } body.p-dense{ --fs-body:13px; --fs-table:12.5px; --fs-kpi:24px; --sp:var(--sp-3); --row-h:28px; } /* 유동 타이포 — 페이지 제목과 KPI 값에만. 본문·표에는 쓰지 않는다 (밀도가 흔들린다). */ :root{ --fs-page:clamp(1.375rem,1.2vw + .9rem,1.875rem); --fs-h2:15px; --fs-h3:13.5px; --fs-label:11.5px; --fs-eyebrow:10.5px; --fs-caption:11.5px; }