Color

색상은 고정된 색상 값(hex)이 아니라 역할(role) 기반 토큰으로 지정합니다. 색상을 직접 지정하는 대신 역할을 선택하면, 테마나 브랜드가 바뀌어도 코드를 수정하지 않고 알맞은 색상을 유지할 수 있습니다.

개요

색상 토큰은 세 축으로 구성됩니다.

• role(역할): neutral · primary · brand · inverse · positive · critical · warning · info
• slot(용도): surface · fill · border · icon · text · ghostBg. 적용하는 CSS 속성에 따라 선택합니다(inverse는 배경 slot 으로 surface 대신 bg를 사용합니다)
• level(강도): 같은 role 과 slot 내에서의 단계. low → base → high → highest 순으로 강해지며, 더 낮은 lowest도 드물게 있습니다

예를 들어 neutral.text.base는 기본 본문 색상, primary.fill.base는 강조 버튼의 배경 색상입니다.

slot 선택

같은 색상이라도 적용하는 CSS 속성에 따라 선택하는 slot 이 달라집니다.

팔레트

mildang 테마 기준 값입니다. 이름과 구조는 모든 테마에서 동일하며, 값은 테마마다 다릅니다. 각 행은 라이트 / 다크 모드 값을 함께 보여줍니다.

neutral

primary

brand

inverse

positive

critical

warning

info

그라디언트

그라디언트는 gradient.{계열}.{변형} 합성 토큰으로 지정합니다. 각 토큰은 두 정지점(stop)을 이은 linear-gradient이며, 계열에 따라 방향 변형을 함께 제공합니다. 팔레트와 마찬가지로 값은 mildang 테마 기준이며, 테마마다 다릅니다.

• primary는 기본(default, 135°) 외에 가로(horizontal, 90°)·세로(vertical, 180°) 방향을 제공합니다.
• secondary · tertiary는 단일 방향(default)만 있습니다.
• dim은 한쪽 끝이 서서히 투명해지는 페이드 마스크로, 네 방향(fadeOutLeft · fadeOutRight · fadeOutTop · fadeOutBottom)을 제공합니다. 스크롤 영역 가장자리를 배경에 자연스럽게 흐리는 데 사용합니다. 불투명한 끝은 라이트/다크 모드에서 흰색↔검정으로 자동 분기되며, 다크 모드 분기가 없는 테마(goes)는 흰색으로 고정됩니다.

Stop 토큰

합성 그라디언트가 참조하는 정지점(stop1 · stop2)입니다. 단일 색상으로도 노출되어, 그라디언트 외에 그림자(box-shadow)나 텍스트 글로우 같은 표현에 재사용할 수 있습니다. glow는 합성 토큰 없이 정지점만 제공하며, 강조 버튼의 글로우 링에 쓰입니다.

사용법

DS 컴포넌트는 색상을 role 토큰으로 적용합니다. 앱에서 색상을 직접 지정할 때는 CSS 변수로 참조합니다.

.banner {
  color: var(--ids-colors-neutral-text-base);
  background: var(--ids-colors-brand-surface-low);
  border: 1px solid var(--ids-colors-neutral-border-base);
}
/* 완성형 그라디언트는 배경으로 */
.hero {
  background: var(--ids-colors-gradient-primary-default);
}
/* stop 은 단색이라 색이 필요한 자리 어디에나 */
.impact {
  box-shadow: 0 0 24px var(--ids-colors-gradient-glow-stop1);
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 color="neutral.text.base" · bg="gradient.primary.default"처럼 토큰 이름을 그대로 사용할 수 있습니다.

권장 사항