JenniferSoft Design Docs

Appearance

Color (컬러) ​

제니퍼 디자인 시스템의 컬러 시스템 가이드입니다. 제니퍼 개발팀은 일관된 사용자 경험(UX)과 다크 모드의 원활한 전환을 위해 의미론적 컬러(Semantic Color) 모델을 사용합니다.

1. 개요 (Overview) ​

컬러 토큰은 절대적인 색상 값(Hex code) 대신 **역할과 목적(Semantic Meaning)**에 따라 정의됩니다. 이를 통해 테마가 전환될 때 코드의 변경 없이 UI 요소가 어울리는 색상으로 자동 전환됩니다.

테마에 따라 다음의 CSS 파일이 동적으로 로드되어 테마를 제공합니다.

  • 클래식(라이트) 테마: colors.classic.css
  • 다크 테마: colors.dark.css

IMPORTANT

인라인 스타일이나 개별 CSS에 #FFFFFF나 #121212 같은 하드코딩된 Hex 값을 직접 사용하지 마세요. 다크 모드 전환 시 색상이 변경되지 않아 UI가 깨지게 됩니다. 대신 제공되는 CSS 변수(var(--gray-50), var(--surface-100) 등)를 사용해야 합니다.

2. 서페이스 컬러 계층 구조 (Surface Colors) ​

화면의 깊이감과 시각적 위계를 표현하기 위해 레이어 구조(Surface Hierarchy)를 제공합니다.

body → surface-100 → surface-200 → surface-300 순서로 위로 쌓이는 계층 구조를 가집니다.

Body Background (var(--surface-50))
Base Surface (var(--surface-100))
Card / Nested (var(--surface-200))기본 컨텐츠 카드 영역
Popover / Dropdown (var(--surface-300))화면 위에 떠 있는 플로팅 영역

서페이스 토큰 상세 ​

토큰명설명클래식 테마 값다크 테마 값
--surface-50전체 화면의 기본 배경색 (Body)#F8F8F8#211F24
--surface-100모듈, 레이아웃 등 가장 기본이 되는 서페이스 배경색#FFFFFF#18171C
--surface-200서페이스 내부 카드나 이중 중첩 구조에 사용되는 배경색#FFFFFF#211F24
--surface-300툴팁, 팝오버, 드롭다운 메뉴 등 최상위 플로팅 요소의 배경색#FFFFFF#2C2A30

3. 색상 팔레트 (Color Palette) ​

총 17가지 계열의 색상 팔레트가 제공되며, 각 계열마다 명도/채도 단계를 50부터 900까지 세분화하여 제공합니다.

NOTE

  • 클래식 모드: 낮은 숫자(50~200)가 밝은 톤이고, 높은 숫자(800~900)가 어두운 톤입니다.
  • 다크 모드: 이 관계가 반대로 작용하여, 낮은 숫자(50~200)가 매우 어두운 배경용 색상이고, 높은 숫자(800~900)가 밝은 강조/텍스트 색상입니다.
gray
50
100
200
300
400
500
600
700
800
900
purple
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
orange
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900
pink
50
100
200
300
400
500
600
700
800
900
plum
50
100
200
300
400
500
600
700
800
900
lavender
50
100
200
300
400
500
600
700
800
900
indigo
50
100
200
300
400
500
600
700
800
900
skyblue
50
100
200
300
400
500
600
700
800
900
cyan
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
grass
50
100
200
300
400
500
600
700
800
900
lime
50
100
200
300
400
500
600
700
800
900
brown
50
100
200
300
400
500
600
700
800
900

WARNING

스펠링 주의 사항 (Spelling Discrepancy) 팔레트의 라벤더 색상은 --lavender (e)로 스펠링이 선언되어 있으나, 후술할 오버레이 변수에서는 --overlay-lavendar (a)로 선언되어 있습니다. 개발 시 착오 없으시기 바랍니다.

4. 오버레이 토큰 (Overlay Tokens) ​

오버레이 토큰은 반투명 레이어나 상태 변화(Hover, Pressed 등), 배경 마스킹 처리에 사용되는 알파 채널(RGBA) 컬러입니다.

4.1 기본 오버레이 ​

  • --overlay-50 ~ --overlay-900: 일반적인 반투명 검정(클래식)/반투명 흰색(다크) 단계입니다. 호버, 프레스 등 상호작용 피드백에 유용합니다.
  • --overlay-inverse-50 ~ --overlay-inverse-900: 현재 테마와 반대되는 톤의 투명도를 제공합니다.
--overlay-50
--overlay-100
--overlay-300
--overlay-500
--overlay-800

4.2 컬러 오버레이 ​

각 색상별로 어울리는 반투명 농도를 제공하여 카드 배지 배경이나 소프트 하이라이트에 사용합니다. 예: --overlay-blue-50부터 --overlay-blue-900까지 제공됩니다.

5. 그림자 효과 (Box Shadows) ​

그림자는 계층(Elevation) 간의 높낮이를 시각적으로 인지할 수 있게 해줍니다. 다크 모드에서는 빛의 물리적 한계로 인해 어두운 그림자가 보이지 않으므로, 밝은 테두리(White Glow)와 투명도가 조정된 이중 그림자가 자동으로 적용됩니다.

  • --box-shadow-100: 아주 얕은 높이 (예: 일반 카드)
  • --box-shadow-200: 보통 높이
  • --box-shadow-300: 드롭다운 메뉴, 팝오버
  • --box-shadow-500: 중형 모달 창
  • --box-shadow-700: 대형 다이얼로그 및 플로팅 시트
Shadow 100
Shadow 300
Shadow 600

6. 권장 및 금지 사항 (Best Practices) ​

Do (권장사항) ​

  • 의미론적 토큰(Semantic Token) 우선 사용: 텍스트에는 var(--gray-900)나 강조색 텍스트 등에 알맞은 팔레트 토큰을 우선적으로 적용하세요.
  • 레이어 계층(Surface Hierarchy) 준수: 레이아웃 구성 시 body → surface-100 → surface-200 계층을 순서대로 따르고 건너뛰지 마세요.
  • 상태 컬러의 일관된 사용: 에러 관련 안내에는 오직 red 또는 error 계열의 컬러만 사용하고, 일반 데코레이션에 이를 남용하지 마세요.

Don't (금지사항) ​

  • 하드코딩 금지: color: #222229와 같은 직접 선언을 절대 피하세요.
  • 다크 모드 가독성 훼손 금지: 텍스트와 배경의 대비율을 고려하세요. 클래식 테마 기준 고대비 텍스트가 다크 모드에서도 충분한 가독성을 제공하도록 팔레트 단계를 알맞게 뒤집거나 적절한 변수를 적용해야 합니다.