Design System

Design System 은 프로젝트 전체에서 재사용하는 색상·타이포그래피 토큰(token) 의 모음입니다. 색과 폰트를 토큰으로 정의해 두면, 컴포넌트마다 값을 일일이 지정하는 대신 토큰에 연결하고, 토큰 하나만 바꾸면 그 토큰을 쓰는 모든 곳이 함께 바뀝니다. 기존의 Colors 탭을 대체합니다.

토큰과 테마 (Theme)

• 토큰(Token) — 색상(Color) 또는 타이포그래피(Typography) 하나. 예: color.brand.primary, typography.title.
• 테마(Theme) — 토큰 값들의 한 벌입니다. 브랜드/모드 변형을 여러 개 만들 수 있고, 활성 테마(Active Theme) 를 전환하면 프로젝트 전체가 한 번에 리스킨됩니다.

각 토큰은 테마별로 값을 가지므로, 같은 color.brand.primary 라도 테마 A 와 테마 B 에서 서로 다른 색을 가질 수 있습니다.

토큰 추가하기

Design System 탭의 + 메뉴에서 추가합니다.

• Add New Theme — 새 테마 추가 (마지막 테마를 기준으로 시작)
• Add Color — 색상 토큰 추가
• Add Typography — 타이포그래피 토큰 추가

색상 토큰은 Light / Dark 값을 함께 지정할 수 있고, 목록의 미리보기 스와치는 위=Light, 아래=Dark 로 표시됩니다.

컴포넌트에 토큰 연결하기

Inspector 에서 컴포넌트의 색상·폰트를 토큰에 연결합니다. 연결한 컴포넌트는 활성 테마를 따라가므로, 테마를 바꾸면 자동으로 반영됩니다.

테마 복제

특정 테마를 기준으로 변형을 만들려면, 테마 목록에서 항목 메뉴 → Duplicate 로 값을 통째로 복사한 새 테마를 만들 수 있습니다. 이름은 상세 화면에서 바로 편집합니다.