토큰 한 벌로,
라이트와 다크를 동시에.

디자인 토큰은 단순한 디자인 자산이 아닙니다. 토큰은 프론트엔드와 디자인 도구 사이의 계약이며, 라이트/다크/브랜드 모드를 단일 소스에서 다루기 위한 가장 안정적인 어딘가에 있습니다.

왜 토큰인가

단일 소스, 세 표면

/* 색상 — 의미 단위로 묶고, 모드는 변수만 덮어쓴다 */
:root {
  --bg:      #FBFAF6;   /* paper-warm */
  --surface: #FFFFFF;
  --fg:      #1A1A1A;
  --muted:   #6B6A66;
  --border:  #E6E3DB;
  --accent:  #3D4F8C;   /* quiet indigo */
}

/* 다크 — 같은 이름, 다른 값. 컴포넌트는 그대로. */
:root[data-theme="dark"] {
  --bg:      #0F1115;
  --surface: #1A1D24;
  --fg:      #E4E6EB;
  --muted:   #8E9099;
  --border:  #2A2E37;
  --accent:  #8C9DD6;   /* 같은 hue, chroma만 낮춤 */
}

의미 이름이 곧 인터페이스

세 가지 원칙

Tokens 팀이 모드 전환 시스템을 운영하면서 정착시킨 세 가지 원칙을 공유합니다. 이 원칙들은 토큰을 정의하는 규칙이며, 동시에 컴포넌트가 토큰을 참조하는 규칙이기도 합니다.

토큰은 시각적 외양이 아니라 의미의 단위다. 외양은 모드에 따라 바뀌지만, 의미는 바뀌면 안 된다.

타이포와 스페이싱은 모드를 가로질러야 한다

브랜드와 함께 배포한다

이 구조 덕분에 Tokens는 같은 컴포넌트 라이브러리를 12개 브랜드에 동시에 배포하고 있습니다. 새 브랜드가 추가될 때마다 작성하는 컴포넌트 코드는 단 한 줄도 없습니다 — 토큰 정의만 교체하면 끝입니다. 결국 토큰은 시각적 외양이 아니라, 프로덕트 표면이 어떤 의미 단위로 구성돼 있는지를 코드와 디자인 도구 양쪽에 동시에 선언하는 작업이며, 한 번 잘 정의해두면 라이트/다크/브랜드는 더 이상 별도의 작업이 아니라 같은 시스템 위의 서로 다른 표면이 됩니다.