Design Token

디자인 토큰은 디자인 결정을 사람과 기계가 함께 이해할 수 있는 방식으로 인코딩하는 방법이에요.

디자인 토큰이 무엇인가요?

디자인 토큰은 디자인 결정을 데이터로 번역한 것이에요. UI의 세부 사항을 디자인과 엔지니어링 사이에 전달하는 커뮤니케이션 도구이자 공통 언어예요.

디자인 토큰은 색상, 타이포그래피, 간격, 애니메이션 등 디자인 시스템을 구성하고 유지하는 데 필요한 값들에 이름을 붙이는 것으로 구성돼요. 16진수로 표현한 색상, 숫자와 단위로 표현한 간격, cubic-bezier 로 표현한 모션처럼 디자인 정의를 가진 모든 값을 디자인 토큰으로 표현할 수 있어요.

토큰의 구성

Raw value

#ff6600

화면에 그릴 수 있는 실제 값

Scale (Palette)

$color.palette.orange-600

값의 범위를 제한하고 이름을 붙인 토큰

Semantic

$color.bg.brand-solid

디자인 의도를 표현하는 토큰

버튼Component

action-button · brandSolid

컴포넌트 스펙이 시맨틱 토큰을 참조

Raw value는 디스플레이 장치에 그릴 수 있는 실제 값이에요. 1px, 1rem 처럼 크기를 나타내는 값, #fff 처럼 색상을 나타내는 값, "Pretendard" 같은 폰트 값이 모두 해당돼요.

사실상 무한한 값 중에서 실제로 쓸 값을 제한하고 고유한 이름을 붙이면 디자인의 일관성과 재사용성을 얻을 수 있어요. 반대로 유연성과 창의성은 크게 제한될 수 있어서, Clay는 SEED Design과 같이 토큰을 단계별로 계층화해서 사용해요.

Scale Token (Palette) 은 Raw value 스케일 하나에 이름을 붙인 것이에요. $color.palette.gray-600, $dimension.x4, $radius.r2 처럼 스케일의 이름으로 전체 디자인에 쓰이는 값을 유한하게 유지해요. 미리 정의한 단위가 출력 장치의 세부 사항을 숨겨서, 특정 플랫폼에 얽매이지 않는 디자인을 유지할 수 있어요.

Semantic Token은 Scale Token을 조합해 디자인 의도를 표현한 단위예요. $color.bg.brand-solid, $dimension.spacing-x.global-gutter 처럼 실제 디자인과 개발 과정에서 주요 빌딩 블록으로 사용해요.

Component Token은 컴포넌트 스펙이 시맨틱 토큰을 참조하는 단계예요. 예를 들어 Action Button 의 brandSolid variant 는 배경으로 $color.bg.brand-solid, 눌린 상태로 $color.bg.brand-solid-pressed 를 참조해요.

시스템에 있는 Scale과 Semantic 정의가 전체 디자인의 스킴을 결정해요. 브랜드·테마·플랫폼에 맞게 Scale에 다른 값을 주입하면, 스키마를 바꾸지 않고도 유연하게 스킴을 재정의할 수 있어요.

이름 규칙

토큰 하나는 세 가지 형태로 쓰여요. 디자인 문서와 스펙에서는 $ 로 시작하는 토큰 이름, 런타임에서는 --rb- 접두어가 붙은 CSS 변수, 코드에서는 Tailwind 유틸을 사용해요.

형태	규칙	예시
토큰 이름	`$<group>.<path>`	`$color.bg.brand-solid`
CSS 변수	`--rb-<group>-<path>` (점은 `-` 로)	`--rb-color-bg-brand-solid`
Tailwind 유틸	`<utility>-<path>`	`bg-bg-brand-solid`

Tailwind 유틸은 토큰 그룹에 따라 접두어가 정해져요.

토큰 그룹	Tailwind 유틸	예시
`$color.fg.*`	`text-fg-*`	`text-fg-neutral-muted`
`$color.bg.*`	`bg-bg-*`	`bg-bg-brand-solid`
`$color.stroke.*`	`border-stroke-`, `outline-stroke-`	`border-stroke-neutral-muted`
`$color.palette.*`	`bg-palette-`, `text-palette-`	`bg-palette-gray-200`
`$dimension.*`	간격·크기 유틸 (`p-`, `gap-`, `size-` …)	`p-x4`, `gap-x1_5`
`$radius.*`	`rounded-*`	`rounded-r2`
`$font-size.` + `$line-height.`	`text-*` (크기와 행간을 함께)	`text-t4`
`$font-weight.*`	`font-*`	`font-bold`
`$shadow.*`	`shadow-*`	`shadow-s2`
`$timing-function.*`	`ease-*`	`ease-enter`
`$duration.*`	`duration-(--rb-duration-*)`	`duration-(--rb-duration-d3)`

아래 표는 현재 브랜드의 실제 값이에요. 셀을 누르면 복사돼요.

토큰	CSS 변수	Tailwind 유틸	값
			`#ff6600`
			`#555d6d`
			`#00000010`
			`#f3f4f5`
			`16px`
			`16px`
			`8px`
			`0.875rem`
			`700`
			`0px 2px 10px 0px #0000001a`
			`cubic-bezier(0, 0, 0.15, 1)`
			`150ms`

// 토큰 Tailwind 유틸로 스타일을 작성해요
<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>

임의 값은 쓰지 않아요

bg-[#ff6600] 처럼 값을 직접 쓰면 브랜드나 다크 모드가 바뀌어도 따라가지 않아요. 항상 토큰 유틸을 사용해요.

shadcn/ui 별칭

Clay 컴포넌트는 shadcn/ui 관례를 따라요. 그래서 shadcn 테마 변수(--primary, --background …)도 SEED 시맨틱 토큰을 가리키도록 함께 정의돼요. 기존 shadcn 컴포넌트를 그대로 가져와도 브랜드 색상과 다크 모드가 적용돼요.

Tailwind	Light	Dark
`rounded-lg`	`10px`	`10px`
`bg-background`	`#ffffff`	`#16171b`
`text-foreground`	`#1a1c20`	`#f3f4f5`
`bg-card`	`#ffffff`	`#16171b`
`text-card-foreground`	`#1a1c20`	`#f3f4f5`
`bg-popover`	`#ffffff`	`#1d2025`
`text-popover-foreground`	`#1a1c20`	`#f3f4f5`
`bg-primary`	`#ff6600`	`#ff6600`
`text-primary-foreground`	`#ffffff`	`#ffffff`
`bg-secondary`	`#f3f4f5`	`#2b2e35`
`text-secondary-foreground`	`#1a1c20`	`#f3f4f5`
`bg-muted`	`#f3f4f5`	`#2b2e35`
`text-muted-foreground`	`#868b94`	`#b0b3ba`
`bg-accent`	`#f7f8f9`	`#2b2e35`
`text-accent-foreground`	`#1a1c20`	`#f3f4f5`
`bg-destructive`	`#fa342c`	`#f73526`
`text-destructive-foreground`	`#ffffff`	`#ffffff`
`bg-success`	`#079171`	`#117956`
`text-success-foreground`	`#ffffff`	`#ffffff`
`bg-warning`	`#fbdc65`	`#dab156`
`text-warning-foreground`	`#000000d0`	`#000000d0`
`bg-info`	`#217cf9`	`#1e82eb`
`text-info-foreground`	`#ffffff`	`#ffffff`
`border-border`	`#00000010`	`#ffffff17`
`border-input`	`#dcdee3`	`#393d46`
`ring-ring`	`#5e98fe`	`#1e82eb`
`bg-chart-1`	`#ff6600`	`#e65200`
`bg-chart-2`	`#5e98fe`	`#1e82eb`
`bg-chart-3`	`#10ab7d`	`#1b946d`
`bg-chart-4`	`#c49725`	`#b6720d`
`bg-chart-5`	`#9f84fb`	`#8e6bee`
`bg-sidebar`	`#f3f4f5`	`#000000`
`text-sidebar-foreground`	`#1a1c20`	`#f3f4f5`
`bg-sidebar-primary`	`#ff6600`	`#ff6600`
`text-sidebar-primary-foreground`	`#ffffff`	`#ffffff`
`bg-sidebar-accent`	`#f7f8f9`	`#2b2e35`
`text-sidebar-accent-foreground`	`#1a1c20`	`#f3f4f5`
`border-sidebar-border`	`#00000010`	`#ffffff17`
`ring-sidebar-ring`	`#5e98fe`	`#1e82eb`

멀티 브랜드

Rebar는 여러 제품이 함께 쓰는 디자인 시스템 모음이에요. 같은 계열(SEED 계열)의 모든 브랜드는 같은 토큰 이름을 쓰고 값만 달라요. 그래서 컴포넌트 코드는 하나로 유지하고, 브랜드는 <html data-brand="..."> 속성으로 전환해요.

Claydata-brand="clay"현재

콘마켓 고객 앱을 위한 디자인 시스템이에요. SEED Design 의 토큰 체계를 바탕으로 따뜻한 오렌지와 둥근 모서리를 써요.

토큰 300개

Forgedata-brand="forge"

콘마켓 사내·업무 도구를 위한 디자인 시스템이에요. Steel 의 컴포넌트에 콘마켓 오렌지를 브랜드 색으로 입혔어요.

토큰 797개

Glassdata-brand="glass"

결제·금융 제품을 위한 디자인 시스템이에요. 차분한 쿨 그레이 대시보드와, 가는 글자·격자 안내선·그라디언트로 만든 마케팅 화면을 한 토큰으로 만들어요.

토큰 259개

Slatedata-brand="slate"

가볍고 빠른 협업 워크스페이스를 위한 디자인 시스템이에요. 폰·폴더블·데스크톱에서 한 코드로 화면 구성과 밀도가 맞춰져요.

토큰 435개

Steeldata-brand="steel"

협업 도구를 위한 디자인 시스템이에요. Atlassian Design System 의 최신 토큰·컴포넌트 체계를 따라요.

토큰 785개

<!-- 브랜드 지정 -->
<html data-brand="clay">
  <!-- 다크 모드는 .dark 클래스로 -->
  <body class="dark">…</body>
</html>

토큰 값은 브랜드 YAML에서 빌드돼요. 빌드 결과물은 CSS 변수(scoped.css), Tailwind 테마(theme.css), React Native 객체로 제공돼요.

Color

색상 토큰을 역할별로 살펴봐요.

Spacing

간격 토큰을 살펴봐요.

Design Token

디자인 토큰이 무엇인가요?Copy Anchor Link

토큰의 구성Copy Anchor Link

이름 규칙Copy Anchor Link

shadcn/ui 별칭Copy Anchor Link

멀티 브랜드Copy Anchor Link