/* * tokens.css — NOISE → SIGNAL 발표자료 디자인 토큰 (단일 원본) * * 구조는 계획/Design.md(SEED) 2절 네이밍을 따른다: --ns-{type}-{category}-{name} * 모노톤: 무채색 회색 사다리(#F7F7F8 · #C8CCD2 · #5B616B · #2A2E35 · #121417). 유채색은 시세 방향(up 빨강·down 파랑)뿐이다. * 연결된 정보(signal)는 잉크의 무게로, 위험·근거 상태는 형태와 깊이로 구분한다. * 단일 모드. 어두운 화면은 모드 전환이 아니라 --ns-color-bg-night 배경 섹션이다. * 1920×1080 고정 스테이지라 모든 길이는 px. rem/clamp 없음. * * 규칙 (Design.md 4.6): 컴포넌트는 palette를 직접 쓰지 않고 fg / bg / stroke 역할 토큰만 쓴다. */ :root { /* ───────── 1. Palette ───────── */ /* gray — 무채색 모노톤. 200 paper · 400 외곽선 · 700 캡션 · 900 반전 표면 · 1000 ink 는 지정값, 나머지는 oklab 보간 */ --ns-color-palette-gray-00: #FFFFFF; --ns-color-palette-gray-100: #FBFBFB; --ns-color-palette-gray-200: #F7F7F8; --ns-color-palette-gray-300: #DFE1E5; --ns-color-palette-gray-400: #C8CCD2; --ns-color-palette-gray-500: #A8ADB4; --ns-color-palette-gray-600: #8A8F98; --ns-color-palette-gray-700: #5B616B; --ns-color-palette-gray-800: #42474F; --ns-color-palette-gray-900: #2A2E35; --ns-color-palette-gray-1000: #121417; /* up — 상승. 시세 방향 표현 전용 (국내 관습: 빨강=상승). 600이 원색 */ --ns-color-palette-up-100: #FEF0EE; --ns-color-palette-up-200: #FFD9D4; --ns-color-palette-up-300: #FEC1BA; --ns-color-palette-up-400: #FB9C91; --ns-color-palette-up-500: #F17166; --ns-color-palette-up-600: #E6443D; --ns-color-palette-up-700: #A01015; --ns-color-palette-up-800: #81020A; --ns-color-palette-up-900: #610005; --ns-color-palette-up-1000: #500003; /* down — 하락. 시세 방향 표현 전용 (파랑=하락). 600이 원색 */ --ns-color-palette-down-100: #EDF4FF; --ns-color-palette-down-200: #D3E2FE; --ns-color-palette-down-300: #B8D0FA; --ns-color-palette-down-400: #90B3F2; --ns-color-palette-down-500: #6693E8; --ns-color-palette-down-600: #3F75DD; --ns-color-palette-down-700: #234FA6; --ns-color-palette-down-800: #183D86; --ns-color-palette-down-900: #0C2B69; --ns-color-palette-down-1000: #072257; /* static — 알파는 8자리 hex */ --ns-color-palette-static-black: #000000; --ns-color-palette-static-white: #FFFFFF; --ns-color-palette-static-black-alpha-100: #00000007; --ns-color-palette-static-black-alpha-200: #0000000C; --ns-color-palette-static-black-alpha-300: #00000010; --ns-color-palette-static-black-alpha-400: #00000021; --ns-color-palette-static-black-alpha-500: #0000002C; --ns-color-palette-static-black-alpha-600: #0000004C; --ns-color-palette-static-black-alpha-700: #00000074; --ns-color-palette-static-black-alpha-800: #000000A2; --ns-color-palette-static-black-alpha-900: #000000D0; --ns-color-palette-static-black-alpha-1000: #000000E3; --ns-color-palette-static-white-alpha-50: #FFFFFF0D; --ns-color-palette-static-white-alpha-100: #FFFFFF17; --ns-color-palette-static-white-alpha-200: #FFFFFF20; --ns-color-palette-static-white-alpha-300: #FFFFFF2E; --ns-color-palette-static-white-alpha-400: #FFFFFF3D; --ns-color-palette-static-white-alpha-500: #FFFFFF60; --ns-color-palette-static-white-alpha-600: #FFFFFF8B; --ns-color-palette-static-white-alpha-700: #FFFFFFB3; --ns-color-palette-static-white-alpha-800: #FFFFFFDE; --ns-color-palette-static-white-alpha-900: #FFFFFFEA; --ns-color-palette-static-white-alpha-1000: #FFFFFFF4; /* ───────── 2. 발표 도메인 색 ───────── */ --ns-color-bg-night: #121417; /* 챕터 전환·강조 장면 배경 */ --ns-color-fg-noise: var(--ns-color-palette-gray-600); /* 포트폴리오와 무관한 정보, "시연용 예시" 라벨 */ /* night 배경 위 본문 크기 글자 */ --ns-color-fg-brand-on-night: var(--ns-color-palette-gray-200); --ns-color-fg-critical-on-night: var(--ns-color-palette-gray-200); --ns-color-fg-informative-on-night: var(--ns-color-palette-gray-300); /* ───────── 2b. 시세 방향 — 유일한 유채색. 등락 숫자·캔들·화살표에만 쓴다 ───────── */ --ns-color-fg-up: var(--ns-color-palette-up-700); /* 본문·데이터 크기 */ --ns-color-fg-up-vivid: var(--ns-color-palette-up-600); /* display 이상 크기 */ --ns-color-fg-up-on-night: var(--ns-color-palette-up-300); --ns-color-bg-up-solid: var(--ns-color-palette-up-600); --ns-color-bg-up-weak: var(--ns-color-palette-up-100); --ns-color-stroke-up-solid: var(--ns-color-palette-up-700); --ns-color-stroke-up-weak: var(--ns-color-palette-up-300); --ns-color-fg-down: var(--ns-color-palette-down-700); --ns-color-fg-down-vivid: var(--ns-color-palette-down-600); --ns-color-fg-down-on-night: var(--ns-color-palette-down-300); --ns-color-bg-down-solid: var(--ns-color-palette-down-600); --ns-color-bg-down-weak: var(--ns-color-palette-down-100); --ns-color-stroke-down-solid: var(--ns-color-palette-down-700); --ns-color-stroke-down-weak: var(--ns-color-palette-down-300); /* ───────── 3. Foreground (텍스트·아이콘) ───────── */ --ns-color-fg-neutral: var(--ns-color-palette-gray-1000); --ns-color-fg-neutral-muted: var(--ns-color-palette-gray-800); --ns-color-fg-neutral-subtle: var(--ns-color-palette-gray-700); --ns-color-fg-neutral-inverted: var(--ns-color-palette-gray-200); /* night 위 글자 = paper */ --ns-color-fg-neutral-muted-on-night: var(--ns-color-palette-gray-400); /* night 위 보조 문장 — title 이상 크기 */ --ns-color-fg-placeholder: var(--ns-color-palette-gray-600); --ns-color-fg-disabled: var(--ns-color-palette-gray-500); --ns-color-fg-brand: var(--ns-color-palette-gray-1000); /* signal = 잉크의 무게. 색이 아니다 */ --ns-color-fg-brand-contrast: var(--ns-color-palette-gray-1000); --ns-color-fg-critical-vivid: var(--ns-color-palette-gray-1000); /* hero/display 전용 원색 */ --ns-color-fg-informative-vivid: var(--ns-color-palette-gray-800); --ns-color-fg-positive: var(--ns-color-palette-gray-1000); --ns-color-fg-positive-contrast: var(--ns-color-palette-gray-1000); /* 모노톤: 위험(critical)은 잉크 채움과 굵기로, 근거(informative)는 잉크 밑줄과 출처 칩으로 구분한다. 유채색은 signal뿐 */ --ns-color-fg-critical: var(--ns-color-palette-gray-1000); --ns-color-fg-critical-contrast: var(--ns-color-palette-gray-1000); --ns-color-fg-informative: var(--ns-color-palette-gray-800); --ns-color-fg-informative-contrast: var(--ns-color-palette-gray-1000); /* ───────── 4. Background ───────── */ --ns-color-bg-layer-basement: var(--ns-color-palette-gray-200); /* paper — 화면 배경 */ --ns-color-bg-layer-default: var(--ns-color-palette-gray-00); /* 카드·UI 목업 표면 */ --ns-color-bg-layer-default-pressed: var(--ns-color-palette-gray-100); --ns-color-bg-layer-floating: var(--ns-color-palette-gray-00); --ns-color-bg-layer-floating-pressed: var(--ns-color-palette-gray-100); --ns-color-bg-neutral-solid: var(--ns-color-palette-gray-1000); --ns-color-bg-neutral-solid-muted: var(--ns-color-palette-gray-800); --ns-color-bg-neutral-solid-muted-pressed: var(--ns-color-palette-gray-900); --ns-color-bg-neutral-weak: var(--ns-color-palette-gray-200); --ns-color-bg-neutral-weak-pressed: var(--ns-color-palette-gray-300); --ns-color-bg-neutral-weak-alpha: var(--ns-color-palette-static-black-alpha-200); /* paper 위 회색 면 */ --ns-color-bg-neutral-weak-alpha-pressed: var(--ns-color-palette-static-black-alpha-300); --ns-color-bg-neutral-inverted: var(--ns-color-bg-night); --ns-color-bg-neutral-inverted-pressed: var(--ns-color-palette-gray-800); --ns-color-bg-brand-solid: var(--ns-color-palette-gray-1000); /* 위 글자는 fg-neutral(ink) */ --ns-color-bg-brand-solid-pressed: var(--ns-color-palette-gray-900); --ns-color-bg-brand-weak: var(--ns-color-palette-gray-300); --ns-color-bg-brand-weak-pressed: var(--ns-color-palette-gray-400); --ns-color-bg-positive-solid: var(--ns-color-palette-gray-1000); --ns-color-bg-positive-solid-pressed: var(--ns-color-palette-gray-900); --ns-color-bg-positive-weak: var(--ns-color-palette-gray-300); --ns-color-bg-positive-weak-pressed: var(--ns-color-palette-gray-400); --ns-color-bg-critical-solid: var(--ns-color-palette-gray-1000); --ns-color-bg-critical-solid-pressed: var(--ns-color-palette-gray-900); --ns-color-bg-critical-weak: var(--ns-color-palette-gray-300); --ns-color-bg-critical-weak-pressed: var(--ns-color-palette-gray-400); --ns-color-bg-informative-solid: var(--ns-color-palette-gray-800); --ns-color-bg-informative-solid-pressed: var(--ns-color-palette-gray-900); --ns-color-bg-informative-weak: var(--ns-color-palette-gray-200); --ns-color-bg-informative-weak-pressed: var(--ns-color-palette-gray-300); --ns-color-bg-disabled: var(--ns-color-palette-gray-200); --ns-color-bg-transparent: #00000000; --ns-color-bg-transparent-pressed: var(--ns-color-palette-static-black-alpha-100); --ns-color-bg-transparent-selected: var(--ns-color-palette-static-black-alpha-200); --ns-color-bg-transparent-selected-pressed: var(--ns-color-palette-static-black-alpha-300); --ns-color-bg-overlay: var(--ns-color-palette-static-black-alpha-700); --ns-color-bg-overlay-muted: var(--ns-color-palette-static-black-alpha-500); /* ───────── 5. Stroke ───────── */ --ns-color-stroke-neutral-weak: var(--ns-color-palette-gray-400); /* 카드·인풋 외곽선 */ --ns-color-stroke-neutral-subtle: var(--ns-color-palette-static-black-alpha-200); /* 반복 항목 구분선 */ --ns-color-stroke-neutral-muted: var(--ns-color-palette-static-black-alpha-300); /* 섹션 경계선 */ --ns-color-stroke-neutral-solid: var(--ns-color-palette-gray-800); --ns-color-stroke-neutral-contrast: var(--ns-color-palette-gray-1000); --ns-color-stroke-focus-ring: var(--ns-color-palette-down-600); --ns-color-stroke-brand-solid: var(--ns-color-palette-gray-1000); --ns-color-stroke-brand-weak: var(--ns-color-palette-gray-400); --ns-color-stroke-positive-solid: var(--ns-color-palette-gray-1000); --ns-color-stroke-positive-weak: var(--ns-color-palette-gray-400); --ns-color-stroke-critical-solid: var(--ns-color-palette-gray-1000); --ns-color-stroke-critical-weak: var(--ns-color-palette-gray-500); --ns-color-stroke-informative-solid: var(--ns-color-palette-gray-1000); --ns-color-stroke-informative-weak: var(--ns-color-palette-gray-400); /* ───────── 6. Dimension (4px 그리드) ───────── */ --ns-dimension-x0_5: 2px; --ns-dimension-x1: 4px; --ns-dimension-x1_5: 6px; --ns-dimension-x2: 8px; --ns-dimension-x2_5: 10px; --ns-dimension-x3: 12px; --ns-dimension-x3_5: 14px; --ns-dimension-x4: 16px; --ns-dimension-x4_5: 18px; --ns-dimension-x5: 20px; --ns-dimension-x6: 24px; --ns-dimension-x7: 28px; --ns-dimension-x8: 32px; --ns-dimension-x9: 36px; --ns-dimension-x10: 40px; --ns-dimension-x12: 48px; --ns-dimension-x13: 52px; --ns-dimension-x14: 56px; --ns-dimension-x16: 64px; --ns-dimension-x20: 80px; --ns-dimension-x24: 96px; --ns-dimension-x30: 120px; --ns-dimension-spacing-y-between-text: var(--ns-dimension-x1_5); --ns-dimension-spacing-y-component-default: var(--ns-dimension-x3); --ns-stage-width: 1920px; --ns-stage-height: 1080px; --ns-stage-inset: var(--ns-dimension-x30); /* ───────── 7. Radius ───────── */ --ns-radius-r0_5: 2px; --ns-radius-r1: 4px; --ns-radius-r1_5: 6px; --ns-radius-r2: 8px; --ns-radius-r2_5: 10px; --ns-radius-r3: 12px; --ns-radius-r3_5: 14px; --ns-radius-r4: 16px; --ns-radius-r5: 20px; --ns-radius-r6: 24px; --ns-radius-full: 9999px; /* ───────── 8. Shadow ───────── */ --ns-shadow-s1: 0 1px 4px 0 #00000014; --ns-shadow-s2: 0 2px 10px 0 #0000001A; --ns-shadow-s3: 0 4px 16px 0 #0000001F; /* ───────── 9. Motion (마이크로 모션. 장면 타이밍은 GSAP 쪽) ───────── */ --ns-duration-d1: 50ms; --ns-duration-d2: 100ms; --ns-duration-d3: 150ms; --ns-duration-d4: 200ms; --ns-duration-d5: 250ms; --ns-duration-d6: 300ms; --ns-duration-color-transition: var(--ns-duration-d3); --ns-timing-function-linear: cubic-bezier(0, 0, 1, 1); --ns-timing-function-easing: cubic-bezier(0.35, 0, 0.35, 1); --ns-timing-function-enter: cubic-bezier(0, 0, 0.15, 1); --ns-timing-function-exit: cubic-bezier(0.35, 0, 1, 1); --ns-timing-function-enter-expressive: cubic-bezier(0.03, 0.4, 0.1, 1); --ns-timing-function-exit-expressive: cubic-bezier(0.35, 0, 0.95, 0.55); /* ───────── 10. Elevation (z-index 4단계) ───────── */ --ns-z-basement: 0; --ns-z-default: 1; --ns-z-floating: 2; --ns-z-dialog: 3; /* ───────── 11. Typography ───────── */ --ns-font-family-sans: "Gmarket Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; --ns-font-weight-light: 300; /* Gmarket Sans Light — 보조 문장 */ --ns-font-family-mono: "Gmarket Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; --ns-font-weight-regular: 400; --ns-font-weight-medium: 500; --ns-font-weight-bold: 700; --ns-font-weight-heavy: 800; /* SEED 스케일 t1~t14 — 서비스 UI 목업(브리핑 카드 등) 텍스트 */ --ns-font-size-t1: 11px; --ns-line-height-t1: 15px; --ns-font-size-t2: 12px; --ns-line-height-t2: 16px; --ns-font-size-t3: 13px; --ns-line-height-t3: 18px; --ns-font-size-t4: 14px; --ns-line-height-t4: 19px; --ns-font-size-t5: 16px; --ns-line-height-t5: 22px; --ns-font-size-t6: 18px; --ns-line-height-t6: 24px; --ns-font-size-t7: 20px; --ns-line-height-t7: 27px; --ns-font-size-t8: 22px; --ns-line-height-t8: 30px; --ns-font-size-t9: 24px; --ns-line-height-t9: 32px; --ns-font-size-t10: 26px; --ns-line-height-t10: 35px; --ns-font-size-t11: 28px; --ns-line-height-t11: 38px; --ns-font-size-t12: 32px; --ns-line-height-t12: 42px; --ns-font-size-t13: 40px; --ns-line-height-t13: 52px; --ns-font-size-t14: 48px; --ns-line-height-t14: 60px; /* 발표 스케일 — 기획서 5.2 clamp를 1920 기준 px로 환산 */ --ns-font-size-hero: 208px; --ns-line-height-hero: 0.95; --ns-letter-spacing-hero: -0.03em; --ns-font-size-display: 144px; --ns-line-height-display: 1.0; --ns-letter-spacing-display: -0.02em; --ns-font-size-title: 88px; --ns-line-height-title: 1.1; --ns-letter-spacing-title: -0.015em; --ns-font-size-body: 32px; --ns-line-height-body: 1.4; --ns-letter-spacing-body: 0; --ns-font-size-data: 20px; --ns-line-height-data: 1.3; --ns-letter-spacing-data: 0; --ns-font-size-section-title: 70px; --ns-line-height-section-title: 1.14; --ns-letter-spacing-section-title: -0.055em; }