Colors

Jayh 디자인 시스템의 컬러 팔레트와 시맨틱 컬러 토큰을 소개합니다. 모든 색상은 CSS 변수로 제공되며, 다크 모드에서 자동으로 전환됩니다.

Introducing the color palette and semantic color tokens of the Jayh Design System. All colors are provided as CSS variables and automatically switch in dark mode.

Primitive Color Palette

기본 색상 스케일입니다. 시맨틱 토큰의 기반이 되며, 직접 사용하기보다 시맨틱 토큰을 통해 참조하는 것을 권장합니다.

The base color scale. These form the foundation of semantic tokens, and it is recommended to reference them through semantic tokens rather than using them directly.

Gray

50 #f9fafb
100 #f3f4f6
200 #e5e7eb
300 #d1d5db
400 #9ca3af
500 #6b7280
600 #4b5563
700 #374151
800 #1f2937
900 #111827
950 #030712

Blue

50 #eff6ff
100 #dbeafe
200 #bfdbfe
300 #93c5fd
400 #60a5fa
500 #3b82f6
600 #2b80ff
700 #1d4ed8
800 #1e40af
900 #1e3a8a

Red

50 #fef2f2
100 #fee2e2
200 #fecaca
300 #fca5a5
400 #f87171
500 #ef4444
600 #dc2626
700 #b91c1c
800 #991b1b
900 #7f1d1d

Green

50 #f0fdf4
100 #dcfce7
200 #bbf7d0
300 #86efac
400 #4ade80
500 #22c55e
600 #16a34a
700 #15803d
800 #166534
900 #14532d

Yellow

50 #fefce8
100 #fef9c3
200 #fef08a
300 #fde047
400 #facc15
500 #eab308
600 #ca8a04
700 #a16207
800 #854d0e
900 #713f12

Semantic Colors

시맨틱 컬러는 용도에 따라 이름이 지정된 토큰입니다. 다크 모드 전환 시 자동으로 적절한 값으로 변경됩니다. 아래 색상 블록은 실제 CSS 변수 값을 반영합니다.

Semantic colors are tokens named by purpose. They automatically change to appropriate values when switching to dark mode. The color blocks below reflect the actual CSS variable values.

Surface

배경 및 표면에 사용되는 색상입니다.

Colors used for backgrounds and surfaces.

primary
secondary
tertiary
inverse
overlay

Text

텍스트에 사용되는 색상입니다.

Colors used for text.

primary
secondary
tertiary
inverse
link

Border

보더 및 구분선에 사용되는 색상입니다.

Colors used for borders and dividers.

default
strong
subtle
focus
error

Interactive

버튼, 링크 등 인터랙티브 요소에 사용되는 색상입니다.

Colors used for interactive elements such as buttons and links.

primary
hover
active
destructive

Status

상태를 나타내는 색상입니다. 각 상태에는 텍스트용 색상과 배경용(-bg) 색상이 있습니다.

Colors that indicate status. Each status has a text color and a background (-bg) color.

success
error
warning
info
success-bg
error-bg
warning-bg
info-bg

Using Colors in CSS

시맨틱 컬러 토큰은 CSS 변수로 제공됩니다. 하드코딩된 색상 값 대신 항상 CSS 변수를 사용하세요. 다크 모드에서 자동으로 적절한 값으로 전환됩니다.

Semantic color tokens are provided as CSS variables. Always use CSS variables instead of hardcoded color values. They automatically switch to appropriate values in dark mode.

CSS
/* Surface colors */
.card {
  background: var(--jayh-surface-primary);
  border: 1px solid var(--jayh-border-default);
}

/* Text colors */
.title {
  color: var(--jayh-text-primary);
}
.description {
  color: var(--jayh-text-secondary);
}
.hint {
  color: var(--jayh-text-tertiary);
}

/* Interactive colors */
.link {
  color: var(--jayh-text-link);
}
.link:hover {
  color: var(--jayh-interactive-hover);
}

/* Status colors */
.success-message {
  color: var(--jayh-status-success);
  background: var(--jayh-status-success-bg);
}
.error-message {
  color: var(--jayh-status-error);
  background: var(--jayh-status-error-bg);
}

Token Naming Convention

모든 컬러 토큰은 --jayh-{category}-{name} 패턴을 따릅니다.

All color tokens follow the --jayh-{category}-{name} pattern.

Pattern
--jayh-surface-primary      /* 배경: 기본 표면 */
--jayh-surface-secondary    /* 배경: 보조 표면 */
--jayh-text-primary         /* 텍스트: 기본 */
--jayh-text-secondary       /* 텍스트: 보조 */
--jayh-border-default       /* 보더: 기본 */
--jayh-interactive-primary  /* 인터랙티브: 기본 */
--jayh-status-success       /* 상태: 성공 */
--jayh-status-error-bg      /* 상태: 에러 배경 */