Color

OverviewCopy Anchor Link

Clay의 색상 시스템은 역할 기반 색상과 팔레트 색상으로 구성돼 있으며, 모두를 위한 접근성 충족을 목표로 설계됐어요. 이를 통해 인터페이스 안에서 충분한 명도 대비를 보장하고, 명확성과 가시성을 확보할 수 있어요.

Role Based ColorCopy Anchor Link

역할 기반 색상 시스템은 디자이너와 개발자 모두를 위한 구조화된 색상 구현 방식을 제공해요. 색상 역할은 인터페이스의 시각적 요소와 기능 사이의 관계를 명확히 해서, 사용자에게 더 직관적이고 예측 가능한 UI를 제공해요. 임의의 색상값 대신 각 색상이 인터페이스 안에서 특정한 목적과 의미를 가져요.

• 접근성 — 모든 역할 기반 색상은 의도된 전경/배경 조합에서 충분한 대비를 갖도록 설계돼요. 자세한 기준은 Inclusive Design 을 참고해요.
• 빈틈없는 업데이트 — 색상을 바꿀 때 값이 아닌 의미를 기준으로 업데이트할 수 있어요. 같은 값을 가져도 의미가 다르면 따로 바꿀 수 있어요.
• 테마 적응성 — 특정 색상 대신 역할을 정의하기 때문에, 라이트·다크 모드와 여러 브랜드에 자동으로 적응해요.

이름 체계Copy Anchor Link

역할 기반 색상은 Property(속성) · Role(역할) · Variant(변형) · State(상태) 순서로 이름을 지어요.

예를 들어 $color.bg.positive-solid-pressed 는 배경 · 긍정 · 강한 강조 · 눌림 을 뜻해요.

PropertyCopy Anchor Link

• Background — 전체 화면 또는 UI의 배경에 사용하는 색상이에요.
• Foreground — 텍스트, 아이콘 등 UI의 전경 요소에 사용하는 색상이에요.
• Stroke — 경계를 구분하는 선 또는 UI 요소의 윤곽선에 사용하는 색상이에요.

RoleCopy Anchor Link

• Brand — 브랜드와 관련된 요소가 즉각적으로 인식될 수 있도록 도와요. 화면에서 가장 중요한 액션을 강조하는 데 사용할 수 있어요.
• Neutral — 일반적인 콘텐츠에 사용하는 기본 색상이에요. 주목도가 가장 높지는 않지만 여전히 가시성이 필요한 요소에 사용해요.
• Positive — 성공적인 작업, 확인, 긍정적인 상태를 나타내요.
• Warning — 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달해요.
• Critical — 오류나 중요한 문제를 나타내요. 부정적인 상태를 명확히 전달해 즉각적인 주의를 끌어요.
• Informative — 유용한 정보를 제공하거나 상태를 설명할 때 사용해요.

LayerCopy Anchor Link

레이어 색상은 인터페이스의 깊이와 계층 구조를 나타내요. layer-basement → layer-default → layer-floating 순서로 쌓이며, 다크 모드에서는 높이 올라갈수록 더 밝아져요. 자세한 내용은 Elevation 을 참고해요.

VariantCopy Anchor Link

같은 역할이라도 의도에 따라 여러 변형이 필요해요. Positive 배경은 낮은 강조의 $color.bg.positive-weak 와 높은 강조의 $color.bg.positive-solid 를 가져요. solid 배경 위의 전경은 fg.on-*-solid 를, weak 배경 위의 전경은 fg.*-contrast 를 짝으로 사용해요.

StateCopy Anchor Link

UI 요소의 상태에 따라 색상이 바뀔 수 있어요. 버튼을 누르면 -pressed 토큰으로 배경이 바뀌어 상호작용이 일어났음을 표현해요.

Semantic TokensCopy Anchor Link

모든 값은 현재 브랜드 기준이에요. 이름이나 값을 누르면 복사돼요.

ForegroundCopy Anchor Link

BackgroundCopy Anchor Link

StrokeCopy Anchor Link

Palette ColorCopy Anchor Link

팔레트 색상은 역할 기반 색상으로 표현하기 어려운 예외적인 경우에 사용해요. 팔레트는 적응형이라서 화면 모드(라이트/다크)에 따라 알맞은 명도의 색상이 배정돼요. 특정 화면 모드를 기준으로 디자인해도 다른 모드에서 충분히 알아보기 쉬운 색상을 보장해요.

스와치를 누르면 Light/Dark 값, CSS 변수, Tailwind 유틸을 확인하고 복사할 수 있어요.

GrayCopy Anchor Link

ChromaticCopy Anchor Link

StaticCopy Anchor Link

static-* 색상은 화면 모드와 관계없이 항상 같은 값을 가져요. 이미지 위 오버레이처럼 배경이 고정된 경우에 사용해요.

BannerCopy Anchor Link

배너·일러스트 배경처럼 장식적인 영역에 쓰는 색상이에요.

ContrastCopy Anchor Link

주요 전경/배경 조합의 WCAG 명도 대비예요. 토큰을 빌드할 때 자동으로 계산돼요. 본문 텍스트는 AA(4.5:1) 이상, 큰 텍스트와 굵은 라벨은 AA-large(3:1) 이상을 목표로 해요.

사용 예Copy Anchor Link

<div className="rounded-r3 bg-bg-critical-weak p-x3 text-t4 text-fg-critical-contrast">
  결제에 실패했어요.
</div>

<button className="rounded-r2 bg-bg-brand-solid px-x4 py-x2_5 text-t4 font-bold text-fg-on-brand-solid active:bg-bg-brand-solid-pressed">
  채팅하기
</button>