headlessui 게시글을 읽고

• 디자인x, 인터렉션과 상태값 잇음
• 디자인 토큰: 디자인 시스템의 가장 작은 부분, 디자인 시스템 내에서 특정 시각적 디자인 속성(색상, 타이포그래피, 간격 등)을 저장하는 명명된 엔터티
  • 색상 토큰
  • 글꼴 크기
  • 글꼴 패밀리
  • 줄높이 
  • 간격
• 글로벌 디자인 토큰 : 맥락에 관계없이 다양한 부분에서 재사용 가능
  • 시각적 속성의 본질과 관련이 있음(특정 맥락 제공 x)
• alias 디자인 토큰 : 글로벌 디자인 토큰보다 구체적, 용도를 암시 가능하게 명명 필요
• 컴포넌트별 디자인 토큰 : 특정 컴포넌트에 직접 연결되어 색상, 테두리, 고유한 타이포그래피 같은 속성 정의
• 애플리케이션별 디자인 토큰 
• 3단계 토큰 구조
  • primative 토큰 : 색상(크기) - 위계
  • semantic 토큰 : 컴포넌트 구조 - 위계
  • component - sementic 토큰 : 컴포넌트 명칭 - 위계 - 컴포넌트 구조 - 상태값

출처

https://techblog.lycorp.co.jp/ko/a-flexible-design-system-using-3-tier-tokens?ref=codenary