Colors

SPI 디자인 시스템은 3단계 색상 아키텍처를 사용합니다. Primitive(원시 팔레트) → Semantic(역할 매핑) → Component(컴포넌트 전용) 순서로 참조하며, 테마(Light/Dark) 전환은 Semantic 레이어에서 자동으로 처리됩니다.

Primitive Palette

직접 사용하기보다 Semantic 토큰을 정의하는 데 쓰이는 기초 색상 팔레트입니다. 50이 가장 밝고 950이 가장 어둡습니다.

Brand (브랜드 메인)

Accent (브랜드 보조)

Gray (중립색)

텍스트, 배경, 테두리 등 UI 전반에 가장 많이 사용되는 색상입니다.

Status Colors (상태색)

Semantic Colors

특정 역할(용도)에 매핑된 색상입니다. 개발 시에는 반드시 Semantic 토큰을 사용해야 합니다. 테마가 전환되면 같은 토큰 이름에 다른 Primitive 값이 자동으로 매핑됩니다.

Light / Dark 비교

테마 전환 전략

Light 테마에서는 팔레트의 600 단계(어두운 쪽)를, Dark 테마에서는 300~400 단계(밝은 쪽)를 사용합니다. 이렇게 하면 배경과의 명도 대비(Contrast Ratio)가 충분히 확보됩니다.

shadcn/ui 호환 변수

SPI는 shadcn/ui 컴포넌트와 호환되도록 다음 CSS Variable을 자동 생성합니다. 모든 shadcn 변수는 우리 Primitive 팔레트를 참조합니다.

사용법

Tailwind 클래스 (권장)

// 배경색
<div className="bg-background" />
<div className="bg-primary" />

// 텍스트
<p className="text-foreground" />
<p className="text-muted-foreground" />

// 테두리
<div className="border border-border" />

CSS Variable 직접 사용

.my-custom-card {
  background-color: var(--color-background-neutral);
  color: var(--color-foreground-strong);
  border: 1px solid var(--color-border-normal);
}

하지 말아야 할 것

/* ❌ HEX 하드코딩 금지 */
.card {
  background: #f6f8fa;
  color: #1b2127;
}

/* ✅ 토큰 사용 */
.card {
  background: var(--color-background-normal);
  color: var(--color-foreground-strong);
}