Color
Exem UI 디자인 시스템의 색상 팔레트입니다. 270개의 디자인 토큰으로 구성되어 있으며, Tailwind CSS 유틸리티 클래스와 CSS 변수로 사용할 수 있습니다.
Primitive
기본 색상 팔레트입니다. 각 색상은 00~10까지 11단계로 구성됩니다.
클릭하면 CSS 변수를 복사합니다. Shift+클릭으로 HEX 값을 복사합니다.
Mono
mono-light, mono-darkGray
gray-00 ~ gray-10Red
red-00 ~ red-10Orange
orange-00 ~ orange-10Amber
amber-00 ~ amber-10Yellow
yellow-00 ~ yellow-10Lime
lime-00 ~ lime-10Green
green-00 ~ green-10Emerald
emerald-00 ~ emerald-10Teal
teal-00 ~ teal-10Cyan
cyan-00 ~ cyan-10Sky
sky-00 ~ sky-10Blue
blue-00 ~ blue-10Indigo
indigo-00 ~ indigo-10Violet
violet-00 ~ violet-10Purple
purple-00 ~ purple-10Fuchsia
fuchsia-00 ~ fuchsia-10Pink
pink-00 ~ pink-10Rose
rose-00 ~ rose-10Semantic
용도별로 분류된 시맨틱 토큰입니다. 라이트/다크 테마에 따라 자동으로 적절한 Primitive 색상을 참조합니다.
클릭하면 var(--color-...) 형태로 복사됩니다.
Text10
텍스트 색상. 본문, 보조 텍스트, 상태별 텍스트에 사용됩니다.
Border9
테두리 색상. 입력 필드, 카드, 구분선에 사용됩니다.
Icon8
아이콘 색상. 버튼 아이콘, 상태 아이콘에 사용됩니다.
Solid10
채워진 배경색. 버튼, 뱃지 등 강조 요소에 사용됩니다.
Elevation11
깊이감 표현. 레이어, 오버레이, 상태별 배경에 사용됩니다.
Background3
페이지 및 영역 배경색.
Component6
특정 컴포넌트 전용 색상.
Tint10
반투명 배경과 전경색. Tag, Badge 등에 사용됩니다.
Chart3
차트 전용 색상. 축, 눈금, 라벨에 사용됩니다.
Usage
Tailwind 유틸리티 클래스 및 CSS 변수로 색상을 적용하는 방법입니다. 자세한 내용은 Tailwind CSS - Colors를 참고하세요.
Semantic vs Primitive
색상 토큰은 Primitive(원색)과 Semantic(의미) 두 계층으로 구성됩니다. 용도에 맞는 계층을 선택하세요.
Semantic 토큰 사용
다크모드 자동 대응, 일관된 UI를 위해 Semantic 토큰을 우선 사용하세요.
text-text-primary — 본문 텍스트
bg-background-primary — 페이지 배경
border-border-primary — 기본 테두리
text-text-accent — 강조 텍스트
Primitive 토큰 사용
특정 색상이 테마에 관계없이 고정되어야 하거나, Semantic 토큰이 없는 경우에 사용하세요.
bg-sky-05 — 고정된 브랜드 컬러
text-red-06 — 커스텀 강조 색상
bg-gray-01 — 특수한 배경
border-amber-04 — 커스텀 테두리
Dark Mode
Semantic 토큰은 라이트/다크 테마에 따라 참조하는 Primitive 색상이 자동으로 전환됩니다.
text-primarybackground-primaryborder-primarytext-accentHTML의 <html class="dark"> 클래스를 토글하면 Semantic 토큰이 참조하는 Primitive 색상이 자동 전환됩니다. Primitive 토큰은 테마에 관계없이 항상 동일한 값을 유지합니다.
Semantic Categories
Semantic 토큰은 용도별로 9개 카테고리로 분류됩니다. 각 카테고리의 용도와 예시를 확인하세요.
Token
@exem-ui/core에서 제공하는 TypeScript 토큰 객체입니다. 타입 안전하게 색상을 참조할 수 있습니다.
color
Primitive + Semantic 전체 색상 — camelCase 키
import { color } from '@exem-ui/core';
color.sky05 // 'var(--color-sky-05)'
color.textPrimary // 'var(--color-text-primary)'
color.red06 // 'var(--color-red-06)'
// 인라인 스타일에서 바로 사용 가능
<div style={{ color: color.textPrimary, background: color.sky05 }} />colorKebab
kebab-case 키 — Tailwind 플러그인 전용
import { colorKebab } from '@exem-ui/core';
colorKebab['sky-05'] // color.sky05와 동일한 값
colorKebab['text-primary'] // Tailwind theme.extend.colors에 사용colorPrimitives
Primitive 색상만
import { colorPrimitives } from '@exem-ui/core';
colorPrimitives['sky-05'] // rgb(from var(--color-sky-05) ...) — 테마 불변colorSemanticRefs
Semantic 토큰의 Light/Dark 참조값
import { colorSemanticRefs } from '@exem-ui/core';
colorSemanticRefs['text-primary'] // { light: 'gray-10', dark: 'gray-00' }
colorSemanticRefs['border-accent'] // { light: 'sky-05', dark: 'sky-05' }Setup
프로젝트에서 Exem UI 색상 토큰을 사용하기 위한 설정 방법입니다.
Tailwind CSS v3
@exem-ui/tailwindcss3 플러그인을 사용합니다. 플러그인이 색상 토큰을 자동 등록하므로 별도 CSS import가 필요 없습니다.
import type { Config } from 'tailwindcss';
import exemPlugin from '@exem-ui/tailwindcss3';
export default {
plugins: [exemPlugin],
content: ['./src/**/*.{ts,tsx}'],
} satisfies Config;Tailwind CSS v4
CSS-first 설정 방식입니다. core/css → tailwindcss4 순서로 import해야 합니다.
@import 'tailwindcss'; @import '@exem-ui/core/css'; @import '@exem-ui/tailwindcss4';
CSS Variable / TypeScript
Tailwind 없이 CSS 변수를 직접 사용하거나, TypeScript에서 토큰을 참조하는 방법입니다.
@import '@exem-ui/core/css';
.my-element {
color: var(--color-text-primary);
background: var(--color-background-secondary);
border: 1px solid var(--color-border-primary);
}import { color } from '@exem-ui/core';
// 토큰 객체로 인라인 스타일 적용
<div style={{ color: color.textAccent }} />
<div style={{ background: color.sky05 }} />
// CSS 변수를 직접 사용해도 동일
<div style={{ color: 'var(--color-text-accent)' }} />