디자인 토큰은 디자인 시스템에서 재사용 가능한 값들을 정의하고 관리하는 기본 단위이다. 하지만 단순히 값을 이름으로 매핑하는 것을 넘어, 토큰의 계층 구조를 어떻게 설계하느냐가 디자인 시스템의 유연성과 유지보수성을 결정한다.
가장 기본적인 계층 구조는 Primitive Token과 Semantic Token의 2단계로 구성된다. Primitive Token은 실제 값(예: color-blue-500: #0066FF)을 정의하고, Semantic Token은 이러한 primitive 값에 의미를 부여한다(예: color-primary: {color-blue-500}). 이러한 2단계 구조는 디자인의 일관성을 유지하면서도 테마 변경이나 디자인 업데이트에 유연하게 대응할 수 있게 해준다. 예를 들어 primary color를 변경할 때 모든 사용처를 수정할 필요 없이 semantic token의 참조만 수정하면 된다.
더 나아가 Component-specific Token을 추가하여 3단계 구조를 구성할 수 있다. 이는 특정 컴포넌트에 특화된 디자인 값을 정의함으로써 더 정교한 제어가 가능하지만, Adobe Spectrum의 사례에서 보듯 토큰의 수가 기하급수적으로 증가하여(21만개 이상) 관리 비용이 크게 증가할 수 있다. 따라서 대부분의 경우 2단계 구조를 기본으로 하고, 컴포넌트 레벨의 토큰은 반드시 필요한 경우에만 제한적으로 도입하는 것이 바람직하다.
효과적인 디자인 토큰 계층 구조를 위해서는 “골디락스 존(Goldilocks Zone)“을 찾는 것이 중요하다. 너무 일반적인 토큰(예: ‘element-spacing-small’)은 의도가 불명확하여 예측하지 못한 부작용을 초래할 수 있고, 너무 구체적인 토큰(예: ‘button-padding-top’)은 재사용성이 떨어져 유지보수 비용을 증가시킨다. 적절한 수준의 추상화와 명확한 의미 전달이 균형을 이루어야 한다.