디자인과 코드 사이의 정밀한 계약.
하나의 DTCG 토큰 소스에서 Web, Figma, SwiftUI, Compose, Android XML 산출물을 생성합니다. 첫 13개 React 프리미티브는 상태, 콘텐츠 규칙, 접근성 동작, Storybook 예시를 갖추며 아직 구현되지 않은 네이티브 컴포넌트는 완료로 표시하지 않습니다.
- DTCG 토큰
- 131
- Primitive, Semantic, Component 3계층
- React 프리미티브
- 13
- 상태, 콘텐츠, 접근성, Storybook
- 플랫폼 대상
- 5
- Web, Figma, SwiftUI, Compose, Android XML
- 언어 픽스처
- 3 + RTL
- 한국어, 영어, 중국어와 RTL 테스트
- 01Primitive
컬러, 타입, 간격, 반경, 모션의 원시 값.
- 02Semantic
전경, 표면, 경계, 상태 같은 안정적인 의미 역할.
- 03Component
컴포넌트와 플랫폼 패키지가 소비하는 범위화된 결정.
- Web CSS
- TypeScript
- Figma Variables
- SwiftUI
- Compose
- Android XML
네이티브 토큰 파일은 실제 생성 산출물입니다. 네이티브 UI 컴포넌트는 다음 구현 단계로 명확히 표시합니다.
세 가지 브랜드 기둥
디자인 방향은 최소 하나의 기둥과 연결되어야 합니다. 연결되지 않는 경우 이 페이지로 돌아와 방향을 다시 맞춥니다.
하나의 아키텍처, 네 개의 프로덕트
통합은 단일 아이덴티티, 고정 그리드, 공통 컴포넌트, 일관된 제품명 규칙으로 표현됩니다. 제품 라인은 별도 로고를 만들지 않습니다.
명확하고, 확인 가능하고, 실행 가능한 기준
확실성은 명확한 비율, 재사용 가능한 레이아웃, 고정폭 숫자, 명시적 상태, 추적 가능한 승인 흐름으로 표현됩니다.
시장과 언어를 고려한 체계
컬러, 서체, 기능 상태는 여러 시장에서 작동해야 합니다. 등락색은 시장 관례에 따라 전환하고, 브랜드 식별은 레드나 그린에 의존하지 않습니다.
아홉 개의 챕터. 하나의 기준.
각 챕터는 브랜드 판단, 기본 비주얼, 컴포넌트, 적용 사례, 문장, 거버넌스 등 하나의 작업 영역을 다룹니다.
브랜드 코어
브랜드 판단의 기준: 포지셔닝, 기둥, 퍼스낼리티 범위.
아이덴티티
컨버지 스타, 워드마크, 록업 — 비율은 마스터 파일이 고정하고, 마침표는 하나뿐입니다.
컬러
블루가 이끄는 글로벌 체계: 코어 블루, 모노크롬 폴백, 확장 팔레트, 시장별 등락색.
타이포그래피
헤드라인, 본문, 숫자, 다국어 조판의 기본 규칙.
그래픽 언어
Dot Path, Dot Grid, Aperture 모티프와 사용 범위.
적용 사례
카드, 명함, 대시보드, KV, 소셜 포맷의 기준 예시.
UI 킷 & 커버리지
DTCG 테마 토큰, 프로덕션 프리미티브, 인터랙션 상태, 플랫폼 경계.
보이스 & 톤
내부, 제품, 대외 자료에 적용하는 문장 원칙과 어휘 기준.
거버넌스
표준이 실행되는 방식: 소싱 · 승인 · 서드파티 플로우와 버전 기록.
표준 자산 다운로드
로고 팩, 컬러 토큰, UI 킷 익스포트는 리소스 센터에서 받습니다. 스크린샷, 오래된 파일, 채팅 기록에서 아이덴티티를 복사하지 마세요.
리소스 센터로 이동