Overview
Overview
Allegro NX 디자인 시스템의 진단 현황, 로드맵, 그리고 "작고 베이직하게"라는 원칙이 들어가는 자리입니다.
전체 진행도
0%
임포트 완료
토큰 변수 4종 Figma 임포트
1차 컴포넌트 4종
토큰 정의 완료 · 빌드 전 (modal·input 2차)
전체 ≈ 54%
가중 평균 진행도
성과 목표
80%
DS 품질 목표 점수 (Before 22%)
Search Panel
1차 적용·측정 대상 (패널 단위)
1차 = 완성도
2차부터 Before/After · NX는 참조만
단계별 진행
최근 작업
전체 로그 보기 →Summary
Summary
작성 예정 — 프로젝트 요약 정보가 들어올 자리입니다.
Direction · Strategy
Strategy
CDS 2.0의 목적 · 핵심 원칙 · 5대 전략 과제 · 성과 측정 · 리스크 대응 · 기대효과. 전략 보고서 v3.3(2026-07-07) 기반.
한눈 요약
Executive Summary
CDS 2.0은 신규 서비스용 UI 표준을 새로 구축하는 프로젝트입니다(기존 NX 통합 아님). 화면마다 디자인이 제각각이고 변경이 코드에 자동 반영되지 않는 현재 상태를, 사람과 AI가 모두 정확히 읽을 수 있는 AI-Native 토큰 구조로 바꾸는 것이 핵심입니다. 완벽한 대형 시스템 대신 작게 시작해 신규 서비스에서 성과를 증명한 뒤 확산하는 전략을 택했으며, 신규 서비스 적용 완성은 2027년 7월, 전사 확산·정착은 2027년 하반기 이후를 목표로 합니다.
803개 · 5컬렉션
토큰 구조 v0.2.4 · 자기참조 0건
22점 → 80%
자체 품질 점수 Before → 목표
2027-07
신규 서비스 적용 완성 마감
프로젝트 정체성
무엇을 — 사내 신규 서비스를 위한 UI 표준(디자인시스템) 신규 구축. 기존 제품(Allegro NX)은 토큰이 평면적이고 값이 거꾸로 참조돼 도구·AI가 연결을 놓치는 상태.
- 왜 지금 — 해운·항만 물류는 정보 밀도가 높아 화면 일관성이 운영 안정성과 직결. AI가 토큰을 읽어 코드를 생성하는 시대로 접어들며 DS의 사용자가 사람에서 AI까지 확장됨.
- 누구를 위해 — 1차: 신규 서비스 팀(디자이너·개발자·AI 도구) / 2차 이후: 기존 서비스로 단계적 확산.
- AI-First의 의미 — 보기 좋은 라이브러리를 넘어, AI가 토큰·정책을 정확히 이해해 코드 생성에 활용할 수 있는 "기계가 읽을 수 있는" 시스템을 우선.
핵심 원칙
최우선 원칙
"배포 가능한 평범한 디자인시스템이, 배포되지 못한 완벽한 디자인시스템을 이긴다."
- 작게, 신규 먼저, 성과 후 확산 — 1차는 핵심 4종만 완성, 신규 서비스에서 증명 후 확산
- 구조로 기본값 만들기 — 강제 권한이 없으므로 라이브러리 기본값화·자동 검사로 채택 유도
- 단일 출처, 한 방향 참조 — 토큰 정의서(엑셀)가 정본, 값은 한 방향으로만 흐름
- 접근성 우선 — WCAG 2.2 AA(색 대비 등)를 설계 단계에서 반영·자동 검사
5대 전략 과제
1순위3-1. AI가 읽을 수 있는 토큰 구조
기계가 정확히 읽고 따라갈 수 있는 데이터 구조를 만든다 — 단방향 참조·단일 출처(5컬렉션 분리, 자기참조 0), 역할·타입 명시, 국제 표준(DTCG) 호환 지향(표준 형식 전환은 2027 2차), 네이밍 6규칙으로 코드 변환 예외 0.
현재토큰 구조 v0.2.4 완성(803개) · 브랜드 색·네이밍·px·빌드 타깃 2종 확정 · 색 대비 자동 검사는 기준 확정, 실행은 파이프라인 Phase A 대기
3-2. 컴포넌트 · 배포 · 운영
가장 많이 쓰는 4종(button·chip·radio·checkbox)만 1차 완성 — 아이콘 버튼(4,539회 사용)은 button에 포함. 정보 밀도 높은 기존 제품(NX) 기준으로 설계, 배경 채움 색은 4.5:1 자동 검사. 구버전(381회 혼용)은 EUT가 단계적 폐기. 코드 반영은 디자인 산출물 완성 후 개발 협조 시점에 단계적으로.
현재토큰 기반 완성 · 컴포넌트 토큰 수정 중 · 주 색상 엑셀 반영(P-1) 대기
3-3. 거버넌스 (1차에는 최소한만)
사람 설득보다 구조로, 사람 관리보다 자동화로 — 구축기에는 팀 주간회의에서 짧게, 구축 후 운영 미팅 정식화. 라이브러리 기본값화, 색상 요청 양식 + WCAG 게이트, 네이밍 자동 검수.
현재노출 정책(디자이너에겐 typography·base·component만) 등 구조 설계 완료 · 최소 항목 가동 준비
3-4. 도입 로드맵 · 우선순위
신규 서비스에서 성과를 보인 뒤 기존 서비스로 확산 — 26Q3 토큰 검증+4종 완성 → 26Q4 나머지 컴포넌트·파일럿 시연·테마 확장 → 27Q1 신규 서비스 적용·채택률 측정 → 27Q2 적용 완성(마감 7월) → 27H2 확산. 채택률 60%는 업계 참고 분기점(편차 큰 2차 자료).
현재착수 전 준비 — 색 확정 반영 → 토큰 검증 → 4종 설계 순서로 진행 예정
3-5. 성과 측정
적용 전에는 완성도로, 적용 후에는 채택률과 효과로 측정한다. 측정 기준 정의는 완료, 1차 완성도 진단 보고서는 2026 Q3 예정.
참고사내 개별 연구(검증용 DS 실측)에서 "수정 없이 사용 가능" 평가·공수 절감(세팅 ~2h, 변경 ~1h) 확보 — 단, CDS 2.0 자체 수치가 아니며 코드 적용 단계에서 같은 방식으로 재실측 예정
성과 측정 체계
단기 · 완성도
토큰 품질 점수(자동) · 색 대비 통과 · 자체 품질 점수 상승폭 · 4종 완성도
중기 · 채택률
DS 연결 인스턴스 ÷ 전체 인스턴스 (Figma 집계, 적용 대상 확보 후)
장기 · 팀 성과
적용률 80%+ · 편차율 20%↓ · 재작업 10%↓
리스크 & 대응
리스크방대한 범위 설정
1차를 4종으로 작게 고정하고, 별도 문서 없이 피그마 컴포넌트 설명만으로 운영해 부담을 줄임.
리스크강제 권한 부재(지원팀)
라이브러리 기본값화 + 자동 검사로 기본값을 만들고, 완성도 수치·사내 지지자로 끌고 감.
리스크잦은 개발자 교체 · 온보딩 비용
사람에 의한 핸드오프에 의존하지 않고 일관된 규칙을 정립·구조화.
리스크사업부의 잦은 색상 요청 (테마 비대화)
접근성 검사를 기반으로 요청을 검수·필터링하는 기준 수립.
리스크적용 대상 서비스 부재
개선 전후 시연(파일럿)으로 최소한의 성과 확보.
기대효과
AI 친화 구조의 디자인시스템은 사람뿐 아니라 AI 에이전트에게도 신뢰할 수 있는 입력이 됩니다 — 효과가 직군별·경영 관점에서 다르게 나타납니다. 업계에서도 "AI가 읽지 못하는 디자인시스템은 기술 부채, 읽을 수 있는 디자인시스템은 AI 전환기의 경쟁력"으로 봅니다.
직군별 효과
디자이너
새 작업을 빈 화면이 아니라 라이브러리에서 시작해 수작업이 줄고, 토큰이 자동 반영돼 화면 간 일관성 유지. 디자인을 바꾸면 코드까지 한 줄기로 이어짐.
퍼블리셔 · 프론트엔드 개발자
AI가 토큰을 추측해 엉뚱한 값(임의의 파랑 · 어긋난 여백)을 넣는 일이 줄어 AI 코드 재작업 감소. 각자 환경(CSS 변수 · Tailwind)에 맞춘 산출물을 바로 사용.
기획 · PM
화면이 일관되면 리뷰 · QA 커뮤니케이션 비용이 줄고, 접근성이 기본 확보돼 뒤늦은 수정 요청 감소.
QA · 접근성 담당
색 대비 등 접근성 검사가 검증 파이프라인에 포함돼, 출시 직전 접근성 결함이 몰리는 상황을 예방하고 회귀 검증 가능.
경영 관점
비용 · 리드타임 절감
반복 UI 구현 · 재작업 감소, 토큰 단일 기준으로 전역 변경을 한 번에 반영. 유지보수 부담 완화.
AI 전환 투자 회수
사내 AI 코딩 도구가 우리 브랜드 · 규칙대로 결과를 내야 효과가 남 — AI 친화 DS가 그 전제를 만들어 투자 효과를 실현.
리스크 관리
접근성 · 일관성 기준을 설계 단계에서 내재화해 운영 사고 · 컴플라이언스 리스크 완화.
선제적 포지셔닝
AI가 읽을 수 있는 DS 구축은 업계가 2026~2027 전략 과제로 꼽는 흐름 — 먼저 대응해 두는 것.
핵심 · AI 산출물의 공통 기반
CDS 2.0이 AI 친화 구조로 서면 사내 AI 에이전트 결과물의 품질이 근본적으로 달라집니다. AI는 토큰을 일일이 조회하지 않고 그럴듯한 값을 지어내는 성질이 있어, 닫힌 토큰 계층 · 명시적 규칙 · 자동 검사가 갖춰져야 열 번째 작업도 첫 번째와 같은 품질로 나옵니다. 그래서 CDS 2.0은 단순 UI 모음이 아니라 사내에서 바로 쓸 수 있는 'AI 산출물의 공통 기반'이 됩니다.
※ 업계 사례: 의미 기반 토큰 + AI 컨텍스트를 갖추면 AI 생성 코드 정확도 상승 · 디자인→코드 시간 단축 · AI 코드 리뷰 통과율 향상이 보고됨 (편차 큰 2차 자료, 참고 범위).
Before — 개선 전 진단
22 / 100점
자체 품질 점수 (개선 전)
381회
구버전 컴포넌트 혼용
2,250회
레거시 Label chip 오용
자기참조 다수
계층 없는 평면 구조 · 거꾸로 참조
규칙 부재
네이밍 비일관 · 오타 누적
임포트 누락
피그마 변수 임포트 시 참조 손상
용어 풀이
- CDS 2.0 — CLT 디자인시스템 2.0. 이 프로젝트의 결과물(신규 서비스용 UI 표준)
- EUT — DS를 구축·운영하는 지원 조직. 타 부서에 강제할 권한은 없음
- NX — 현재 운영 중인 레거시 제품(Allegro NX). 개선의 비교 기준
- 디자인 토큰 — 색·간격·크기 등 디자인 값의 최소 단위. 원시값→의미→컴포넌트로 흐르는 계층(현재 5컬렉션)
- 토큰 정의서(정본) — 모든 토큰의 단일 기준 원본(SSOT). 현재 엑셀 token-structure-v0.2.4
- 핵심 4종 — 1차 완성 대상: button · chip · radio · checkbox
- WCAG 2.2 AA — 웹 접근성 국제 기준. 1차는 색 대비(4.5:1 / 3:1)만 적용
- AI-Native — AI가 토큰·규칙·정책을 정확히 이해·활용할 수 있게 설계된 시스템
- DTCG — 디자인 토큰 국제 표준 사양(W3C 커뮤니티 그룹)
- 검증용 DS — 사내 개별 연구의 실험용 DS. CDS 2.0과 구조가 다른 별개 산출물
원문 · 기준 문서
출처
이 페이지는 전략 보고서 v3.3을 대시보드용으로 재구성한 요약본입니다. 불일치 시 보고서 원문이 우선합니다.
- 📊 260707_CDS 2.0 전략 보고서_v3.3 — 주 소스 · 현행본 (옵시디언 001_산출물)
- 📊 260707_CDS 2.0 전략 보고서_v3.2 · v3.0 — 이전 버전 (_archive 보관)
- 📊 260706_CDS 2.0 전략 보고서_v2.0 — 수치·근거 기준본 (_archive 보관)
Build · Foundations
Foundations
토큰 5컬렉션 구조 · 계층 그래프 · 상세 토큰 표 — 정본은 엑셀 token-structure-v0.2.4, 이 페이지는 요약·시각화본입니다.
구조 개요
정본 · 구조 개요
정본(SSOT)은 엑셀
token-structure-v0.2.4.xlsx — 이 페이지의 표는 엑셀에서 자동 생성한 요약·시각화본이며, 불일치 시 엑셀이 우선합니다. (드라이브 「토큰 구조 구축」 폴더)
- 규모 — 5컬렉션 · 803개 토큰 · 자기참조 0 · 단방향 참조(primitive → semantic → typography → base → component)
- 컬렉션 — primitive 255 · semantic 192 · typography 54 · base 148 · component 154
- 엑셀 시트 — 개요 · primitive · semantic · typography · base · component · contrast-pairs(색 대비 검증)
- 노출 정책 — primitive·semantic은 게시 시 숨김, 디자이너에겐 typography·base·component만 노출
- 버전 — 토큰 구조(token-structure-vX.Y.Z)와 이 사이트(vX.Y.Z)는 독립 버전 체계
v0.2.4 반영 완료
브랜드 컬러(primary blue · secondary grayBlue · tertiary grayNeutral) · status 8종 · stroke 네이밍 통일 · fontLineHeight 정리가 정본 v0.2.4에 모두 반영됐고, 아래 표·그래프는 그 기준입니다. tertiary는 semantic에서 삭제됨. input·modal은 정본 component에 없음(base로 제작).
네이밍 규칙
네이밍 규칙
- 모든 세그먼트 소문자사이즈·약어도 소문자, 숫자 접두 금지
xxs · xs · sm · md · lg · xl · xxl · xxxl - 숫자로 시작 금지맨 앞에 숫자를 쓰지 않음
2xl→xxl - 그룹명을 잎에서 반복하지 않음상위 그룹명을 토큰 끝에서 중복하지 않음
height/heightSm→height/sm - 여러 단어가 붙는 잎만 camelCase단일 단어는 소문자, 복합어만 camelCase
fontSize · fontLineHeight · strokeHovered - 의미 키워드 통일같은 의미는 하나의 이름으로 통일
border → stroke·fill → surface·check → icon·lineHeight → fontLineHeight - 상태 토큰은 접미사형상태는 접두사가 아닌 접미사로 표기
surfaceDisabled · strokeDisabled · strokeError · strokeFocused
토큰
참조 관계 지도
왼쪽 primitive에서 오른쪽 component로 값이 흐릅니다. 노드에 마우스를 올리면 그 그룹의 참조가 곡선으로 강조되고, 클릭하면 잠금 + 아래 상세 표로 이동합니다.
색상
치수
타이포
component
primitive · 3
palettes
number
fontFamily
semantic · 6
basic
primary
secondary
neutral
status
size
typography · 5
fontSize
fontLineHeight
fontWeight
fontFamily
fontColor
base · 14
background
surface
stroke
divider
state
shadow
type
feedback
radius
spacing
height
width
icon
control
component · 4
button
chip
checkbox
radio
primitive
원시값 · 별칭 없음number32 tokens
| 토큰 | 역할 | 값 |
|---|---|---|
| 0px | number | 0 |
| 1px | number | 1 |
| 2px | number | 2 |
| 4px | number | 4 |
| 6px | number | 6 |
| 8px | number | 8 |
| 10px | number | 10 |
| 12px | number | 12 |
| 14px | number | 14 |
| 16px | number | 16 |
| 18px | number | 18 |
| 20px | number | 20 |
| 22px | number | 22 |
| 24px | number | 24 |
| 28px | number | 28 |
| 32px | number | 32 |
| 36px | number | 36 |
| 40px | number | 40 |
| 44px | number | 44 |
| 48px | number | 48 |
| 56px | number | 56 |
| 64px | number | 64 |
| 72px | number | 72 |
| 80px | number | 80 |
| 96px | number | 96 |
| 999px | number | 999 |
| 320px | number | 320 |
| 480px | number | 480 |
| 520px | number | 520 |
| 640px | number | 640 |
| 120px | number | 120 |
| 26px | number | 26 |
fontFamily4 tokens
| 토큰 | 역할 | 값 |
|---|---|---|
| font | string | Roboto |
| weight | ||
| regular | number | 400 |
| medium | number | 500 |
| semiBold | number | 600 |
palettes219 tokens
| 토큰 | 역할 | 값 |
|---|---|---|
| solid | ||
| white | color | #FFFFFF |
| black | color | #000000 |
| gray | color | #9DA4AE |
| grayNeutral/25 | color | #FCFCFD |
| grayNeutral/50 | color | #F5F6F7 |
| grayNeutral/100 | color | #EDEEF1 |
| grayNeutral/200 | color | #DDE0E4 |
| grayNeutral/300 | color | #C4C8CE |
| grayNeutral/400 | color | #9DA4AE |
| grayNeutral/500 | color | #6C737F |
| grayNeutral/600 | color | #4D5761 |
| grayNeutral/700 | color | #384250 |
| grayNeutral/800 | color | #1F2A37 |
| grayNeutral/900 | color | #111927 |
| grayNeutral/950 | color | #0D121C |
| grayModern/25 | color | #FCFCFD |
| grayModern/50 | color | #EEF0F5 |
| grayModern/100 | color | #E7E9F0 |
| grayModern/200 | color | #CED3E1 |
| grayModern/300 | color | #B9C0D4 |
| grayModern/400 | color | #7D89B0 |
| grayModern/500 | color | #5D6B98 |
| grayModern/600 | color | #4A5578 |
| grayModern/700 | color | #404968 |
| grayModern/800 | color | #30374F |
| grayModern/900 | color | #111322 |
| grayModern/950 | color | #0E101B |
| grayBlue/25 | color | #F7F8FA |
| grayBlue/50 | color | #F0F1F5 |
| grayBlue/100 | color | #E0E3EB |
| grayBlue/200 | color | #C9CEDC |
| grayBlue/300 | color | #A3ABC3 |
| grayBlue/400 | color | #7580A6 |
| grayBlue/500 | color | #3F4F83 |
| grayBlue/600 | color | #303C63 |
| grayBlue/700 | color | #273152 |
| grayBlue/800 | color | #1D253D |
| grayBlue/900 | color | #141829 |
| grayBlue/950 | color | #020305 |
| blueLight/25 | color | #F5FAFF |
| blueLight/50 | color | #EAF7FF |
| blueLight/100 | color | #E0F2FE |
| blueLight/200 | color | #B9E6FE |
| blueLight/300 | color | #7CD4FD |
| blueLight/400 | color | #36BFFA |
| blueLight/500 | color | #0BA5EC |
| blueLight/600 | color | #0086C9 |
| blueLight/700 | color | #026AA2 |
| blueLight/800 | color | #065986 |
| blueLight/900 | color | #0B4A6F |
| blueLight/950 | color | #062C41 |
| blue/25 | color | #F5F8FF |
| blue/50 | color | #E6EEFF |
| blue/100 | color | #D1E0FF |
| blue/200 | color | #B2CCFF |
| blue/300 | color | #84ADFF |
| blue/400 | color | #528BFF |
| blue/500 | color | #2970FF |
| blue/600 | color | #004BE0 |
| blue/700 | color | #003DB8 |
| blue/800 | color | #003399 |
| blue/900 | color | #00297A |
| blue/950 | color | #002266 |
| blueDark/25 | color | #FCFCFD |
| blueDark/50 | color | #F2F4F9 |
| blueDark/100 | color | #E2E4F1 |
| blueDark/200 | color | #CACDE6 |
| blueDark/300 | color | #B3B8DB |
| blueDark/400 | color | #717BBC |
| blueDark/500 | color | #4E5BA6 |
| blueDark/600 | color | #3E4784 |
| blueDark/700 | color | #363F72 |
| blueDark/800 | color | #293056 |
| blueDark/900 | color | #101323 |
| blueDark/950 | color | #0D0F1C |
| cyan/25 | color | #F5FEFF |
| cyan/50 | color | #E4FCFF |
| cyan/100 | color | #CFF9FE |
| cyan/200 | color | #A5F0FC |
| cyan/300 | color | #67E3F9 |
| cyan/400 | color | #22CCEE |
| cyan/500 | color | #06AED4 |
| cyan/600 | color | #088AB2 |
| cyan/700 | color | #0E7090 |
| cyan/800 | color | #155B75 |
| cyan/900 | color | #164C63 |
| cyan/950 | color | #0D2D3A |
| teal/25 | color | #F6FEFC |
| teal/50 | color | #E1FFF6 |
| teal/100 | color | #CCFBEF |
| teal/200 | color | #99F6E0 |
| teal/300 | color | #5FE9D0 |
| teal/400 | color | #2ED3B7 |
| teal/500 | color | #15B79E |
| teal/600 | color | #0E9384 |
| teal/700 | color | #107569 |
| teal/800 | color | #125D56 |
| teal/900 | color | #134E48 |
| teal/950 | color | #0A2926 |
| green/25 | color | #F6FEF9 |
| green/50 | color | #E5FFF0 |
| green/100 | color | #DCFAE6 |
| green/200 | color | #ABEFC6 |
| green/300 | color | #75E0A7 |
| green/400 | color | #47CD89 |
| green/500 | color | #17B26A |
| green/600 | color | #079455 |
| green/700 | color | #067647 |
| green/800 | color | #085D3A |
| green/900 | color | #074D31 |
| green/950 | color | #053321 |
| greenLight/25 | color | #FAFEF5 |
| greenLight/50 | color | #EEFFDB |
| greenLight/100 | color | #E4FBCC |
| greenLight/200 | color | #D0F8AB |
| greenLight/300 | color | #A6EF67 |
| greenLight/400 | color | #85E13A |
| greenLight/500 | color | #66C61C |
| greenLight/600 | color | #4CA30D |
| greenLight/700 | color | #3B7C0F |
| greenLight/800 | color | #326212 |
| greenLight/900 | color | #2B5314 |
| greenLight/950 | color | #15290A |
| yellow/25 | color | #FEFDF0 |
| yellow/50 | color | #FFFADC |
| yellow/100 | color | #FEF7C3 |
| yellow/200 | color | #FEEE95 |
| yellow/300 | color | #FDE272 |
| yellow/400 | color | #FFD439 |
| yellow/500 | color | #FFC800 |
| yellow/600 | color | #D58A00 |
| yellow/700 | color | #9E6C0E |
| yellow/800 | color | #745214 |
| yellow/900 | color | #5D4009 |
| yellow/950 | color | #542C0D |
| orange/25 | color | #FFFCF5 |
| orange/50 | color | #FFF1DD |
| orange/100 | color | #FEE7C7 |
| orange/200 | color | #FECF89 |
| orange/300 | color | #FEB94B |
| orange/400 | color | #FDA222 |
| orange/500 | color | #F78409 |
| orange/600 | color | #DC6103 |
| orange/700 | color | #B54708 |
| orange/800 | color | #93370D |
| orange/900 | color | #7A2E0E |
| orange/950 | color | #4E1D09 |
| red/25 | color | #FFFBFA |
| red/50 | color | #FFF0EF |
| red/100 | color | #FEE4E2 |
| red/200 | color | #FECDCA |
| red/300 | color | #FDA29B |
| red/400 | color | #F97066 |
| red/500 | color | #F04438 |
| red/600 | color | #D92D20 |
| red/700 | color | #B42318 |
| red/800 | color | #912018 |
| red/900 | color | #7A271A |
| red/950 | color | #55160C |
| purple/25 | color | #FCFAFF |
| purple/50 | color | #F7F2FF |
| purple/100 | color | #F4EBFF |
| purple/200 | color | #E9D7FE |
| purple/300 | color | #D6BBFB |
| purple/400 | color | #B692F6 |
| purple/500 | color | #9E77ED |
| purple/600 | color | #7F56D9 |
| purple/700 | color | #6941C6 |
| purple/800 | color | #53389E |
| purple/900 | color | #42307D |
| purple/950 | color | #2C1C5F |
| fuchsia/25 | color | #FEFAFF |
| fuchsia/50 | color | #FDF4FF |
| fuchsia/100 | color | #FBE8FF |
| fuchsia/200 | color | #F6D0FE |
| fuchsia/300 | color | #EEAAFD |
| fuchsia/400 | color | #E478FA |
| fuchsia/500 | color | #D444F1 |
| fuchsia/600 | color | #BA24D5 |
| fuchsia/700 | color | #9F1AB1 |
| fuchsia/800 | color | #821890 |
| fuchsia/900 | color | #6F1877 |
| fuchsia/950 | color | #47104C |
| pink/25 | color | #FEF6FB |
| pink/50 | color | #FFF0FB |
| pink/100 | color | #FCE7F6 |
| pink/200 | color | #FCCEEE |
| pink/300 | color | #FAA7E0 |
| pink/400 | color | #F670C7 |
| pink/500 | color | #EE46BC |
| pink/600 | color | #DD2590 |
| pink/700 | color | #C11574 |
| pink/800 | color | #9E165F |
| pink/900 | color | #851651 |
| pink/950 | color | #4E0D30 |
| alpha | ||
| black/0 | color | #000000 0% |
| black/50 | color | #000000 4% |
| black/100 | color | #000000 8% |
| black/200 | color | #000000 12% |
| black/300 | color | #000000 16% |
| black/400 | color | #000000 24% |
| black/500 | color | #000000 32% |
| black/600 | color | #000000 40% |
| black/700 | color | #000000 56% |
| black/800 | color | #000000 64% |
| black/900 | color | #000000 80% |
| black/950 | color | #000000 95% |
| white/0 | color | #FFFFFF 0% |
| white/50 | color | #FFFFFF 4% |
| white/100 | color | #FFFFFF 8% |
| white/200 | color | #FFFFFF 12% |
| white/300 | color | #FFFFFF 16% |
| white/400 | color | #FFFFFF 24% |
| white/500 | color | #FFFFFF 32% |
| white/600 | color | #FFFFFF 40% |
| white/700 | color | #FFFFFF 56% |
| white/800 | color | #FFFFFF 64% |
| white/900 | color | #FFFFFF 80% |
| white/950 | color | #FFFFFF 95% |
semantic
의미 · Light/Dark 원천basic27 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| white | color | #FFFFFF | palettes/solid/white |
| black | color | #000000 | palettes/solid/black |
| gray | color | #9DA4AE | palettes/solid/gray |
| white0 | color | #FFFFFF 0% | palettes/alpha/white/0 |
| white50 | color | #FFFFFF 4% | palettes/alpha/white/50 |
| white100 | color | #FFFFFF 8% | palettes/alpha/white/100 |
| white200 | color | #FFFFFF 12% | palettes/alpha/white/200 |
| white300 | color | #FFFFFF 16% | palettes/alpha/white/300 |
| white400 | color | #FFFFFF 24% | palettes/alpha/white/400 |
| white500 | color | #FFFFFF 32% | palettes/alpha/white/500 |
| white600 | color | #FFFFFF 40% | palettes/alpha/white/600 |
| white700 | color | #FFFFFF 56% | palettes/alpha/white/700 |
| white800 | color | #FFFFFF 64% | palettes/alpha/white/800 |
| white900 | color | #FFFFFF 80% | palettes/alpha/white/900 |
| white950 | color | #FFFFFF 95% | palettes/alpha/white/950 |
| black0 | color | #000000 0% | palettes/alpha/black/0 |
| black50 | color | #000000 4% | palettes/alpha/black/50 |
| black100 | color | #000000 8% | palettes/alpha/black/100 |
| black200 | color | #000000 12% | palettes/alpha/black/200 |
| black300 | color | #000000 16% | palettes/alpha/black/300 |
| black400 | color | #000000 24% | palettes/alpha/black/400 |
| black500 | color | #000000 32% | palettes/alpha/black/500 |
| black600 | color | #000000 40% | palettes/alpha/black/600 |
| black700 | color | #000000 56% | palettes/alpha/black/700 |
| black800 | color | #000000 64% | palettes/alpha/black/800 |
| black900 | color | #000000 80% | palettes/alpha/black/900 |
| black950 | color | #000000 95% | palettes/alpha/black/950 |
primary12 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| 25 | color | #F5F8FF | palettes/solid/blue/25 |
| 50 | color | #E6EEFF | palettes/solid/blue/50 |
| 100 | color | #D1E0FF | palettes/solid/blue/100 |
| 200 | color | #B2CCFF | palettes/solid/blue/200 |
| 300 | color | #84ADFF | palettes/solid/blue/300 |
| 400 | color | #528BFF | palettes/solid/blue/400 |
| 500 | color | #2970FF | palettes/solid/blue/500 |
| 600 | color | #004BE0 | palettes/solid/blue/600 |
| 700 | color | #003DB8 | palettes/solid/blue/700 |
| 800 | color | #003399 | palettes/solid/blue/800 |
| 900 | color | #00297A | palettes/solid/blue/900 |
| 950 | color | #002266 | palettes/solid/blue/950 |
secondary12 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| 25 | color | #F7F8FA | palettes/solid/grayBlue/25 |
| 50 | color | #F0F1F5 | palettes/solid/grayBlue/50 |
| 100 | color | #E0E3EB | palettes/solid/grayBlue/100 |
| 200 | color | #C9CEDC | palettes/solid/grayBlue/200 |
| 300 | color | #A3ABC3 | palettes/solid/grayBlue/300 |
| 400 | color | #7580A6 | palettes/solid/grayBlue/400 |
| 500 | color | #3F4F83 | palettes/solid/grayBlue/500 |
| 600 | color | #303C63 | palettes/solid/grayBlue/600 |
| 700 | color | #273152 | palettes/solid/grayBlue/700 |
| 800 | color | #1D253D | palettes/solid/grayBlue/800 |
| 900 | color | #141829 | palettes/solid/grayBlue/900 |
| 950 | color | #020305 | palettes/solid/grayBlue/950 |
neutral12 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| 25 | color | #FCFCFD | palettes/solid/grayNeutral/25 |
| 50 | color | #F5F6F7 | palettes/solid/grayNeutral/50 |
| 100 | color | #EDEEF1 | palettes/solid/grayNeutral/100 |
| 200 | color | #DDE0E4 | palettes/solid/grayNeutral/200 |
| 300 | color | #C4C8CE | palettes/solid/grayNeutral/300 |
| 400 | color | #9DA4AE | palettes/solid/grayNeutral/400 |
| 500 | color | #6C737F | palettes/solid/grayNeutral/500 |
| 600 | color | #4D5761 | palettes/solid/grayNeutral/600 |
| 700 | color | #384250 | palettes/solid/grayNeutral/700 |
| 800 | color | #1F2A37 | palettes/solid/grayNeutral/800 |
| 900 | color | #111927 | palettes/solid/grayNeutral/900 |
| 950 | color | #0D121C | palettes/solid/grayNeutral/950 |
status96 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| critical | |||
| 25 | color | #FCFAFF | palettes/solid/purple/25 |
| 50 | color | #F7F2FF | palettes/solid/purple/50 |
| 100 | color | #F4EBFF | palettes/solid/purple/100 |
| 200 | color | #E9D7FE | palettes/solid/purple/200 |
| 300 | color | #D6BBFB | palettes/solid/purple/300 |
| 400 | color | #B692F6 | palettes/solid/purple/400 |
| 500 | color | #9E77ED | palettes/solid/purple/500 |
| 600 | color | #7F56D9 | palettes/solid/purple/600 |
| 700 | color | #6941C6 | palettes/solid/purple/700 |
| 800 | color | #53389E | palettes/solid/purple/800 |
| 900 | color | #42307D | palettes/solid/purple/900 |
| 950 | color | #2C1C5F | palettes/solid/purple/950 |
| urgent | |||
| 25 | color | #FEFAFF | palettes/solid/fuchsia/25 |
| 50 | color | #FDF4FF | palettes/solid/fuchsia/50 |
| 100 | color | #FBE8FF | palettes/solid/fuchsia/100 |
| 200 | color | #F6D0FE | palettes/solid/fuchsia/200 |
| 300 | color | #EEAAFD | palettes/solid/fuchsia/300 |
| 400 | color | #E478FA | palettes/solid/fuchsia/400 |
| 500 | color | #D444F1 | palettes/solid/fuchsia/500 |
| 600 | color | #BA24D5 | palettes/solid/fuchsia/600 |
| 700 | color | #9F1AB1 | palettes/solid/fuchsia/700 |
| 800 | color | #821890 | palettes/solid/fuchsia/800 |
| 900 | color | #6F1877 | palettes/solid/fuchsia/900 |
| 950 | color | #47104C | palettes/solid/fuchsia/950 |
| high | |||
| 25 | color | #FEF6FB | palettes/solid/pink/25 |
| 50 | color | #FFF0FB | palettes/solid/pink/50 |
| 100 | color | #FCE7F6 | palettes/solid/pink/100 |
| 200 | color | #FCCEEE | palettes/solid/pink/200 |
| 300 | color | #FAA7E0 | palettes/solid/pink/300 |
| 400 | color | #F670C7 | palettes/solid/pink/400 |
| 500 | color | #EE46BC | palettes/solid/pink/500 |
| 600 | color | #DD2590 | palettes/solid/pink/600 |
| 700 | color | #C11574 | palettes/solid/pink/700 |
| 800 | color | #9E165F | palettes/solid/pink/800 |
| 900 | color | #851651 | palettes/solid/pink/900 |
| 950 | color | #4E0D30 | palettes/solid/pink/950 |
| error | |||
| 25 | color | #FFFBFA | palettes/solid/red/25 |
| 50 | color | #FFF0EF | palettes/solid/red/50 |
| 100 | color | #FEE4E2 | palettes/solid/red/100 |
| 200 | color | #FECDCA | palettes/solid/red/200 |
| 300 | color | #FDA29B | palettes/solid/red/300 |
| 400 | color | #F97066 | palettes/solid/red/400 |
| 500 | color | #F04438 | palettes/solid/red/500 |
| 600 | color | #D92D20 | palettes/solid/red/600 |
| 700 | color | #B42318 | palettes/solid/red/700 |
| 800 | color | #912018 | palettes/solid/red/800 |
| 900 | color | #7A271A | palettes/solid/red/900 |
| 950 | color | #55160C | palettes/solid/red/950 |
| warning | |||
| 25 | color | #FFFCF5 | palettes/solid/orange/25 |
| 50 | color | #FFF1DD | palettes/solid/orange/50 |
| 100 | color | #FEE7C7 | palettes/solid/orange/100 |
| 200 | color | #FECF89 | palettes/solid/orange/200 |
| 300 | color | #FEB94B | palettes/solid/orange/300 |
| 400 | color | #FDA222 | palettes/solid/orange/400 |
| 500 | color | #F78409 | palettes/solid/orange/500 |
| 600 | color | #DC6103 | palettes/solid/orange/600 |
| 700 | color | #B54708 | palettes/solid/orange/700 |
| 800 | color | #93370D | palettes/solid/orange/800 |
| 900 | color | #7A2E0E | palettes/solid/orange/900 |
| 950 | color | #4E1D09 | palettes/solid/orange/950 |
| success | |||
| 25 | color | #F6FEF9 | palettes/solid/green/25 |
| 50 | color | #E5FFF0 | palettes/solid/green/50 |
| 100 | color | #DCFAE6 | palettes/solid/green/100 |
| 200 | color | #ABEFC6 | palettes/solid/green/200 |
| 300 | color | #75E0A7 | palettes/solid/green/300 |
| 400 | color | #47CD89 | palettes/solid/green/400 |
| 500 | color | #17B26A | palettes/solid/green/500 |
| 600 | color | #079455 | palettes/solid/green/600 |
| 700 | color | #067647 | palettes/solid/green/700 |
| 800 | color | #085D3A | palettes/solid/green/800 |
| 900 | color | #074D31 | palettes/solid/green/900 |
| 950 | color | #053321 | palettes/solid/green/950 |
| update | |||
| 25 | color | #F6FEFC | palettes/solid/teal/25 |
| 50 | color | #E1FFF6 | palettes/solid/teal/50 |
| 100 | color | #CCFBEF | palettes/solid/teal/100 |
| 200 | color | #99F6E0 | palettes/solid/teal/200 |
| 300 | color | #5FE9D0 | palettes/solid/teal/300 |
| 400 | color | #2ED3B7 | palettes/solid/teal/400 |
| 500 | color | #15B79E | palettes/solid/teal/500 |
| 600 | color | #0E9384 | palettes/solid/teal/600 |
| 700 | color | #107569 | palettes/solid/teal/700 |
| 800 | color | #125D56 | palettes/solid/teal/800 |
| 900 | color | #134E48 | palettes/solid/teal/900 |
| 950 | color | #0A2926 | palettes/solid/teal/950 |
| info | |||
| 25 | color | #F5FEFF | palettes/solid/cyan/25 |
| 50 | color | #E4FCFF | palettes/solid/cyan/50 |
| 100 | color | #CFF9FE | palettes/solid/cyan/100 |
| 200 | color | #A5F0FC | palettes/solid/cyan/200 |
| 300 | color | #67E3F9 | palettes/solid/cyan/300 |
| 400 | color | #22CCEE | palettes/solid/cyan/400 |
| 500 | color | #06AED4 | palettes/solid/cyan/500 |
| 600 | color | #088AB2 | palettes/solid/cyan/600 |
| 700 | color | #0E7090 | palettes/solid/cyan/700 |
| 800 | color | #155B75 | palettes/solid/cyan/800 |
| 900 | color | #164C63 | palettes/solid/cyan/900 |
| 950 | color | #0D2D3A | palettes/solid/cyan/950 |
size33 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| base | |||
| xxs | number | 4 | number/4px |
| xs | number | 8 | number/8px |
| sm | number | 12 | number/12px |
| base | number | 16 | number/16px |
| md | number | 20 | number/20px |
| lg | number | 24 | number/24px |
| xl | number | 28 | number/28px |
| xxl | number | 32 | number/32px |
| xxxl | number | 40 | number/40px |
| width | |||
| xs | number | 64 | number/64px |
| sm | number | 96 | number/96px |
| base | number | 120 | number/120px |
| md | number | 320 | number/320px |
| lg | number | 480 | number/480px |
| xl | number | 520 | number/520px |
| height | |||
| xxs | number | 16 | number/16px |
| xs | number | 20 | number/20px |
| sm | number | 24 | number/24px |
| md | number | 32 | number/32px |
| lg | number | 40 | number/40px |
| xl | number | 48 | number/48px |
| xxl | number | 56 | number/56px |
| lineWidth | |||
| sm | number | 1 | number/1px |
| md | number | 2 | number/2px |
| lg | number | 4 | number/4px |
| control | |||
| sm | number | 16 | number/16px |
| md | number | 20 | number/20px |
| lg | number | 24 | number/24px |
| icon | |||
| sm | number | 16 | number/16px |
| md | number | 20 | number/20px |
| lg | number | 24 | number/24px |
| stateLayer | |||
| sm | number | 24 | number/24px |
| md | number | 32 | number/32px |
typography
글자 토큰fontSize14 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| h1 | number | 28 | number/28px |
| h2 | number | 22 | number/22px |
| h3 | number | 20 | number/20px |
| h4 | number | 18 | number/18px |
| h5 | number | 16 | number/16px |
| h6 | number | 14 | number/14px |
| h7 | number | 12 | number/12px |
| bodyLg | number | 14 | number/14px |
| bodyMd | number | 12 | number/12px |
| bodySm | number | 10 | number/10px |
| labelMd | number | 14 | number/14px |
| labelSm | number | 12 | number/12px |
| captionMd | number | 14 | number/14px |
| captionSm | number | 12 | number/12px |
fontLineHeight14 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| h1 | number | 32 | number/32px |
| h2 | number | 26 | number/26px |
| h3 | number | 24 | number/24px |
| h4 | number | 22 | number/22px |
| h5 | number | 20 | number/20px |
| h6 | number | 18 | number/18px |
| h7 | number | 16 | number/16px |
| bodyLg | number | 18 | number/18px |
| bodyMd | number | 16 | number/16px |
| bodySm | number | 14 | number/14px |
| labelMd | number | 18 | number/18px |
| labelSm | number | 16 | number/16px |
| captionMd | number | 18 | number/18px |
| captionSm | number | 16 | number/16px |
fontWeight3 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| regular | number | 400 | fontFamily/weight/regular |
| medium | number | 500 | fontFamily/weight/medium |
| semiBold | number | 600 | fontFamily/weight/semiBold |
fontFamily1 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| base | string | Roboto | fontFamily/font |
fontColor22 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| h1 | color | #111927 | neutral/900 |
| h2 | color | #111927 | neutral/900 |
| h3 | color | #111927 | neutral/900 |
| h4 | color | #111927 | neutral/900 |
| h5 | color | #111927 | neutral/900 |
| h6 | color | #111927 | neutral/900 |
| h7 | color | #111927 | neutral/900 |
| bodyLg | color | #1F2A37 | neutral/800 |
| bodyMd | color | #1F2A37 | neutral/800 |
| bodySm | color | #1F2A37 | neutral/800 |
| labelMd | color | #1F2A37 | neutral/800 |
| labelSm | color | #1F2A37 | neutral/800 |
| captionMd | color | #9DA4AE | neutral/400 |
| captionSm | color | #9DA4AE | neutral/400 |
| inverse | color | #FFFFFF | basic/white |
| placeholder | color | #C4C8CE | neutral/300 |
| disabled | color | #9DA4AE | neutral/400 |
| link | color | #088AB2 | status/info/600 |
| linkHover | color | #0E7090 | status/info/700 |
| linkActive | color | #0E7090 | status/info/700 |
| warning | color | #DC6103 | status/warning/600 |
| error | color | #D92D20 | status/error/600 |
base
컴포넌트 공용 토대background8 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| highest | color | #FCFCFD | neutral/25 |
| high | color | #F5F6F7 | neutral/50 |
| middle | color | #EDEEF1 | neutral/100 |
| low | color | #DDE0E4 | neutral/200 |
| lowest | color | #C4C8CE | neutral/300 |
| base | color | #FFFFFF | basic/white |
| elevated | color | #F5F6F7 | neutral/50 |
| backDrop | color | #000000 32% | basic/black500 |
surface3 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| high | color | #FFFFFF | basic/white |
| middle | color | #DDE0E4 | neutral/200 |
| low | color | #FFFFFF | basic/white |
stroke8 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| lowest | color | #DDE0E4 | neutral/200 |
| low | color | #C4C8CE | neutral/300 |
| middle | color | #9DA4AE | neutral/400 |
| high | color | #6C737F | neutral/500 |
| base | number | 1 | size/lineWidth/sm |
| focus | number | 2 | size/lineWidth/md |
| error | number | 2 | size/lineWidth/md |
| bold | number | 4 | size/lineWidth/lg |
divider4 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| low | color | #DDE0E4 | neutral/200 |
| middle | color | #C4C8CE | neutral/300 |
| high | color | #9DA4AE | neutral/400 |
| lineWidth | number | 1 | size/lineWidth/sm |
state13 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| strokeDisabled | color | #DDE0E4 | neutral/200 |
| onSurfaceDisabled | color | #9DA4AE | fontColor/disabled |
| surfaceDisabled | color | #F5F6F7 | neutral/50 |
| focusedRing | color | #6C737F | neutral/500 |
| focusedRingError | color | #D92D20 | status/error/600 |
| stateLayer | |||
| enable | color | #000000 0% | basic/black0 |
| hovered | color | #000000 12% | basic/black200 |
| focused | color | #000000 24% | basic/black400 |
| pressed | color | #000000 40% | basic/black600 |
| selected | color | #000000 64% | basic/black800 |
| disabled | color | #DDE0E4 | neutral/200 |
| stateLayerSize | |||
| sm | number | 24 | size/stateLayer/sm |
| md | number | 32 | size/stateLayer/md |
shadow3 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| low | color | #000000 16% | basic/black300 |
| middle | color | #000000 32% | basic/black500 |
| high | color | #000000 56% | basic/black700 |
type18 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| primary | |||
| surfaceLight | color | #D1E0FF | primary/100 |
| surfaceDeep | color | #004BE0 | primary/600 |
| onSurfaceLight | color | #FFFFFF | basic/white |
| onSurfaceDeep | color | #004BE0 | primary/600 |
| stroke | color | #004BE0 | primary/600 |
| strokeHovered | color | #004BE0 | primary/600 |
| secondary | |||
| surfaceLight | color | #C9CEDC | secondary/200 |
| surfaceDeep | color | #303C63 | secondary/600 |
| onSurfaceLight | color | #F7F8FA | secondary/25 |
| onSurfaceDeep | color | #273152 | secondary/700 |
| stroke | color | #3F4F83 | secondary/500 |
| strokeHovered | color | #1D253D | secondary/800 |
| outline | |||
| onSurfaceLight | color | #9DA4AE | neutral/400 |
| onSurfaceDeep | color | #4D5761 | neutral/600 |
| stroke | color | #C4C8CE | neutral/300 |
| strokeHovered | color | #6C737F | neutral/500 |
| ghost | |||
| onSurfaceLight | color | #4D5761 | neutral/600 |
| onSurfaceDeep | color | #1F2A37 | neutral/800 |
feedback48 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| critical | |||
| surfaceLight | color | #E9D7FE | status/critical/200 |
| surfaceDeep | color | #53389E | status/critical/800 |
| onSurfaceLight | color | #F7F2FF | status/critical/50 |
| onSurfaceDeep | color | #53389E | status/critical/800 |
| stroke | color | #53389E | status/critical/800 |
| strokeHovered | color | #53389E | status/critical/800 |
| urgent | |||
| surfaceLight | color | #F6D0FE | status/urgent/200 |
| surfaceDeep | color | #821890 | status/urgent/800 |
| onSurfaceLight | color | #FDF4FF | status/urgent/50 |
| onSurfaceDeep | color | #821890 | status/urgent/800 |
| stroke | color | #821890 | status/urgent/800 |
| strokeHovered | color | #821890 | status/urgent/800 |
| high | |||
| surfaceLight | color | #FCE7F6 | status/high/100 |
| surfaceDeep | color | #C11574 | status/high/700 |
| onSurfaceLight | color | #FFF0FB | status/high/50 |
| onSurfaceDeep | color | #C11574 | status/high/700 |
| stroke | color | #C11574 | status/high/700 |
| strokeHovered | color | #9E165F | status/high/800 |
| error | |||
| surfaceLight | color | #FEE4E2 | status/error/100 |
| surfaceDeep | color | #B42318 | status/error/700 |
| onSurfaceLight | color | #FFF0EF | status/error/50 |
| onSurfaceDeep | color | #B42318 | status/error/700 |
| stroke | color | #B42318 | status/error/700 |
| strokeHovered | color | #912018 | status/error/800 |
| warning | |||
| surfaceLight | color | #FEE7C7 | status/warning/100 |
| surfaceDeep | color | #B54708 | status/warning/700 |
| onSurfaceLight | color | #FFF1DD | status/warning/50 |
| onSurfaceDeep | color | #B54708 | status/warning/700 |
| stroke | color | #B54708 | status/warning/700 |
| strokeHovered | color | #93370D | status/warning/800 |
| success | |||
| surfaceLight | color | #DCFAE6 | status/success/100 |
| surfaceDeep | color | #067647 | status/success/700 |
| onSurfaceLight | color | #E5FFF0 | status/success/50 |
| onSurfaceDeep | color | #067647 | status/success/700 |
| stroke | color | #067647 | status/success/700 |
| strokeHovered | color | #085D3A | status/success/800 |
| update | |||
| surfaceLight | color | #CCFBEF | status/update/100 |
| surfaceDeep | color | #107569 | status/update/700 |
| onSurfaceLight | color | #E1FFF6 | status/update/50 |
| onSurfaceDeep | color | #107569 | status/update/700 |
| stroke | color | #107569 | status/update/700 |
| strokeHovered | color | #125D56 | status/update/800 |
| info | |||
| surfaceLight | color | #CFF9FE | status/info/100 |
| surfaceDeep | color | #0E7090 | status/info/700 |
| onSurfaceLight | color | #E4FCFF | status/info/50 |
| onSurfaceDeep | color | #0E7090 | status/info/700 |
| stroke | color | #0E7090 | status/info/700 |
| strokeHovered | color | #155B75 | status/info/800 |
radius8 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| xs | number | 2 | number/2px |
| sm | number | 4 | number/4px |
| md | number | 6 | number/6px |
| lg | number | 8 | number/8px |
| xl | number | 12 | number/12px |
| xxl | number | 16 | number/16px |
| xxxl | number | 24 | number/24px |
| full | number | 999 | number/999px |
spacing16 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| margin | |||
| xs | number | 4 | size/base/xxs |
| sm | number | 8 | size/base/xs |
| md | number | 12 | size/base/sm |
| lg | number | 16 | size/base/base |
| padding | |||
| xs | number | 4 | size/base/xxs |
| sm | number | 8 | size/base/xs |
| md | number | 12 | size/base/sm |
| lg | number | 16 | size/base/base |
| xl | number | 20 | size/base/md |
| xxl | number | 24 | size/base/lg |
| gap | |||
| xxs | number | 4 | size/base/xxs |
| xs | number | 8 | size/base/xs |
| sm | number | 12 | size/base/sm |
| md | number | 16 | size/base/base |
| lg | number | 24 | size/base/lg |
| xl | number | 32 | size/base/xxl |
height7 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| xxs | number | 16 | size/height/xxs |
| xs | number | 20 | size/height/xs |
| sm | number | 24 | size/height/sm |
| md | number | 32 | size/height/md |
| lg | number | 40 | size/height/lg |
| xl | number | 48 | size/height/xl |
| xxl | number | 56 | size/height/xxl |
width6 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| xs | number | 64 | size/width/xs |
| sm | number | 96 | size/width/sm |
| base | number | 120 | size/width/base |
| md | number | 320 | size/width/md |
| lg | number | 480 | size/width/lg |
| xl | number | 520 | size/width/xl |
icon3 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| sm | number | 16 | size/icon/sm |
| md | number | 20 | size/icon/md |
| lg | number | 24 | size/icon/lg |
control3 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| sm | number | 16 | size/control/sm |
| md | number | 20 | size/control/md |
| lg | number | 24 | size/control/lg |
component
정형 컴포넌트button74 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| xs | |||
| height | number | 16 | size/height/xxs |
| paddingX | number | 4 | spacing/padding/xs |
| radius | number | 4 | radius/sm |
| fontSize | number | 10 | fontSize/bodySm |
| fontLineHeight | number | 14 | fontLineHeight/bodySm |
| lineWidth | number | 1 | size/lineWidth/sm |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 8 | spacing/gap/xs |
| sm | |||
| height | number | 20 | size/height/xs |
| paddingX | number | 8 | spacing/padding/sm |
| radius | number | 6 | radius/md |
| fontSize | number | 10 | fontSize/bodySm |
| fontLineHeight | number | 14 | fontLineHeight/bodySm |
| lineWidth | number | 1 | size/lineWidth/sm |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 8 | spacing/gap/xs |
| md | |||
| height | number | 24 | size/height/sm |
| paddingX | number | 12 | spacing/padding/md |
| radius | number | 8 | radius/lg |
| fontSize | number | 12 | fontSize/bodyMd |
| fontLineHeight | number | 16 | fontLineHeight/bodyMd |
| lineWidth | number | 2 | size/lineWidth/md |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 8 | spacing/gap/xs |
| lg | |||
| height | number | 32 | size/height/md |
| paddingX | number | 16 | spacing/padding/lg |
| radius | number | 12 | radius/xl |
| fontSize | number | 14 | fontSize/bodyLg |
| fontLineHeight | number | 18 | fontLineHeight/bodyLg |
| lineWidth | number | 2 | size/lineWidth/md |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 8 | spacing/gap/xs |
| primary | |||
| surface | color | #004BE0 | primary/600 |
| onSurface | color | #FFFFFF | basic/white |
| secondary | |||
| surface | color | #303C63 | secondary/600 |
| onSurface | color | #FFFFFF | basic/white |
| outline | |||
| onSurface | color | #384250 | neutral/700 |
| stroke | color | #C4C8CE | neutral/300 |
| strokeHovered | color | #6C737F | neutral/500 |
| ghost | |||
| onSurface | color | #384250 | neutral/700 |
| xl | |||
| height | number | 40 | size/height/lg |
| paddingX | number | 20 | spacing/padding/xl |
| radius | number | 16 | radius/xxl |
| fontSize | number | 14 | fontSize/bodyLg |
| fontLineHeight | number | 18 | fontLineHeight/bodyLg |
| lineWidth | number | 2 | size/lineWidth/md |
| iconSize | number | 20 | size/icon/md |
| gap | number | 8 | spacing/gap/xs |
| minWidth | number | 64 | size/width/xs |
| status | |||
| critical/onSurface | color | #53389E | status/critical/800 |
| critical/stroke | color | #53389E | status/critical/800 |
| critical/strokeHovered | color | #53389E | status/critical/800 |
| urgent/onSurface | color | #821890 | status/urgent/800 |
| urgent/stroke | color | #821890 | status/urgent/800 |
| urgent/strokeHovered | color | #821890 | status/urgent/800 |
| high/onSurface | color | #C11574 | status/high/700 |
| high/stroke | color | #C11574 | status/high/700 |
| high/strokeHovered | color | #9E165F | status/high/800 |
| error/onSurface | color | #B42318 | status/error/700 |
| error/stroke | color | #B42318 | status/error/700 |
| error/strokeHovered | color | #912018 | status/error/800 |
| warning/onSurface | color | #B54708 | status/warning/700 |
| warning/stroke | color | #B54708 | status/warning/700 |
| warning/strokeHovered | color | #93370D | status/warning/800 |
| success/onSurface | color | #067647 | status/success/700 |
| success/stroke | color | #067647 | status/success/700 |
| success/strokeHovered | color | #085D3A | status/success/800 |
| update/onSurface | color | #107569 | status/update/700 |
| update/stroke | color | #107569 | status/update/700 |
| update/strokeHovered | color | #125D56 | status/update/800 |
| info/onSurface | color | #0E7090 | status/info/700 |
| info/stroke | color | #0E7090 | status/info/700 |
| info/strokeHovered | color | #155B75 | status/info/800 |
| fixedWidth | |||
| base | number | 120 | size/width/base |
chip54 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| primary | |||
| surface | color | #004BE0 | primary/600 |
| onSurface | color | #FFFFFF | basic/white |
| stroke | color | #004BE0 | primary/600 |
| secondary | |||
| surface | color | #303C63 | secondary/600 |
| onSurface | color | #FFFFFF | basic/white |
| stroke | color | #303C63 | secondary/600 |
| outline | |||
| surface | color | #FFFFFF | basic/white |
| onSurface | color | #384250 | neutral/700 |
| stroke | color | #C4C8CE | neutral/300 |
| ghost | |||
| surface | color | #FFFFFF | basic/white |
| onSurface | color | #384250 | neutral/700 |
| stroke | color | #DDE0E4 | neutral/200 |
| sm | |||
| height | number | 20 | size/height/xs |
| paddingX | number | 4 | spacing/padding/xs |
| radius | number | 999 | radius/full |
| fontSize | number | 10 | fontSize/bodySm |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 4 | spacing/gap/xxs |
| md | |||
| height | number | 24 | size/height/sm |
| paddingX | number | 8 | spacing/padding/sm |
| radius | number | 999 | radius/full |
| fontSize | number | 12 | fontSize/bodyMd |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 4 | spacing/gap/xxs |
| lg | |||
| height | number | 32 | size/height/md |
| paddingX | number | 12 | spacing/padding/md |
| radius | number | 999 | radius/full |
| fontSize | number | 14 | fontSize/bodyLg |
| iconSize | number | 16 | size/icon/sm |
| gap | number | 4 | spacing/gap/xxs |
| status | |||
| critical/surface | color | #53389E | status/critical/800 |
| critical/onSurface | color | #FFFFFF | basic/white |
| critical/stroke | color | #53389E | status/critical/800 |
| urgent/surface | color | #821890 | status/urgent/800 |
| urgent/onSurface | color | #FFFFFF | basic/white |
| urgent/stroke | color | #821890 | status/urgent/800 |
| high/surface | color | #C11574 | status/high/700 |
| high/onSurface | color | #FFFFFF | basic/white |
| high/stroke | color | #C11574 | status/high/700 |
| error/surface | color | #B42318 | status/error/700 |
| error/onSurface | color | #FFFFFF | basic/white |
| error/stroke | color | #B42318 | status/error/700 |
| warning/surface | color | #B54708 | status/warning/700 |
| warning/onSurface | color | #FFFFFF | basic/white |
| warning/stroke | color | #B54708 | status/warning/700 |
| success/surface | color | #067647 | status/success/700 |
| success/onSurface | color | #FFFFFF | basic/white |
| success/stroke | color | #067647 | status/success/700 |
| update/surface | color | #107569 | status/update/700 |
| update/onSurface | color | #FFFFFF | basic/white |
| update/stroke | color | #107569 | status/update/700 |
| info/surface | color | #0E7090 | status/info/700 |
| info/onSurface | color | #FFFFFF | basic/white |
| info/stroke | color | #0E7090 | status/info/700 |
checkbox15 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| sm | |||
| size | number | 16 | size/control/sm |
| iconSize | number | 16 | size/icon/sm |
| stateLayer | number | 24 | size/stateLayer/sm |
| radius | number | 2 | radius/xs |
| stroke | color | #384250 | neutral/700 |
| surface | color | #FFFFFF | surface/high |
| surfaceChecked | color | #384250 | neutral/700 |
| icon | color | #FFFFFF | basic/white |
| strokeDisabled | color | #DDE0E4 | state/strokeDisabled |
| surfaceDisabled | color | #F5F6F7 | state/surfaceDisabled |
| strokeError | color | #B42318 | feedback/error/stroke |
| focusRing | color | #6C737F | state/focusedRing |
| md | |||
| size | number | 20 | size/control/md |
| iconSize | number | 20 | size/icon/md |
| stateLayer | number | 32 | size/stateLayer/md |
radio11 tokens
| 토큰 | 역할 | 값 | 참조 |
|---|---|---|---|
| sm | |||
| size | number | 16 | size/control/sm |
| stateLayer | number | 24 | size/stateLayer/sm |
| md | |||
| size | number | 20 | size/control/md |
| stateLayer | number | 32 | size/stateLayer/md |
| radius | number | 999 | radius/full |
| stroke | color | #384250 | neutral/700 |
| dot | color | #384250 | neutral/700 |
| strokeDisabled | color | #DDE0E4 | state/strokeDisabled |
| dotDisabled | color | #9DA4AE | state/onSurfaceDisabled |
| strokeError | color | #B42318 | feedback/error/stroke |
| focusRing | color | #6C737F | state/focusedRing |
Build · Components
Components
1차 스코프 4종(Button · Label chip · Radio · Checkbox) 토큰 정의 완료 · 빌드는 토큰 검증 통과 후 2026 Q3 설계 착수 예정. 1차 적용 대상은 Search Panel 유력(세부 논의중).
2차 반영 예정
1차 스코프 제외분 + 추가 예정 항목
- modal — 2차 빌드 · width · height 치수 추가 (min/max 포함)
- input — 2차 빌드 (토큰 정의는 완료, 레거시 실측 기반)
- textItem/label — radio·checkbox 라벨 조합용 컴포넌트, 추후 제작 (라벨·간격·접근성 연결 담당)
미리보기
준비 중
토큰이 반영된 컴포넌트를 미리 보는 자리입니다. 엑셀에서 토큰을 고치고 빌드하면 이 화면에 그대로 나타납니다.
빌드 파이프라인(build.py)을 갖춘 뒤에 만듭니다 — 지금 손으로 넣으면 엑셀과 어긋나기 때문입니다.
Build · Patterns
Patterns
맥락 의존적인 패턴이 들어가는 자리입니다. 컴포넌트가 안정화된 뒤 채워집니다.
추가 예정아래는 컴포넌트 안정화 후 확정될 대기 상태 패턴입니다. 현재는 구조·규칙만 정리되어 있습니다.
패턴 · 추가 예정
맥락이 있는 버튼Contextual Button
목적 — 버튼에 단순 동작이 아니라 데이터 상태·승인·필수 여부 같은 ‘맥락’을 담아 전달합니다.
기반 컴포넌트 — 신규 제작 없이 기존 Outlined 버튼 컴포넌트를 가져와(재사용) 구성합니다.
맥락 4종
no data데이터 없음is data데이터 있음approved승인됨essential필수필수 규칙 — 맥락이 있는 버튼은 의미를 명확히 전달하기 위해 반드시 아이콘을 함께 사용합니다.
패턴/컴포넌트 분리는 Material Design 모델을 따릅니다.
Direction · Roadmap
Roadmap
분기 로드맵(마감 2027-07) · 7단계 마일스톤 · 가중치 · 진행도
분기 로드맵
마감 2027-07 역산현재 · 2026 Q3토큰 검증 통과 + 핵심 4종
토큰검증 파이프라인(Phase A 원천 검증 → B JSON·Figma 임포트) 통과 → 핵심 4종(button·chip·radio·checkbox) 설계·빌드 → 1차 완성도 진단 보고.
단계 매핑단계 4(파운데이션·토큰) 마무리 + 단계 5(핵심 컴포넌트) 착수 — 현재 착수 전 준비(P-1 색 반영 대기)
예정 · 2026 Q4컴포넌트 확대 · 파일럿 · 테마
나머지 주요 컴포넌트 완성 → 개선 전후 시연(파일럿) → 색상 테마 확장(1종→12종).
단계 매핑단계 5 완료 + 단계 6(패턴·문서·가이드)
예정 · 2027 Q1신규 서비스 적용 시작
신규 서비스 적용 개시 · 채택률 측정 시작 · 개발 협조 확보 시 코드 연결.
단계 매핑단계 7(배포·거버넌스·채택) 본격화
예정 · 2027 Q2신규 서비스 적용 완성
적용 완성(마감 2027년 7월) · 채택률 측정 지속.
예정 · 2027 H2~성과 기반 확산
채택률·완성도 성과를 근거로 기존 서비스 확산 시작 — 장기 목표: 전사 적용률 80% 이상.
읽는 법
분기 로드맵은 일정(언제), 아래 7단계 마일스톤은 작업 구조(무엇을·얼마나)를 보여줍니다. 전체 진행도(Overview의 가중 평균)는 7단계 체크리스트에서 자동 산출됩니다.
7단계 마일스톤
가중치 · 진행도 · 체크리스트Govern · Progress
Progress
진행 중인 작업과 남은 작업 모니터링 — 토큰검증 파이프라인 · WCAG 웹접근성 · Next 액션.
토큰검증 파이프라인
WCAG 웹접근성
위치
WCAG 작업은 토큰검증 파이프라인의 일부입니다 — Phase A의 A-2a(wcag_audit 스크립트)·A-2b(엑셀 린터)·A-3(contrast-pairs)에 통합되어 진행됩니다. 기준: WCAG 2.2 AA.
1차 완료컬러 대비 기준 확정
1.4.3 명도 대비(텍스트) 4.5:1 · 1.4.11 비텍스트 대비(UI 컴포넌트) 3:1 — 기준 확정, 엑셀 자동 검사로 검증 예정(Phase A).
2차 · 컴포넌트 단계설계 시 반영 항목
1.4.1 색의 사용(색+비색 이중 표기) · 1.3.3 감각 특성 · 2.4.7 포커스 가시성(포커스 토큰) · 2.4.11 포커스 비가림 · 2.5.8 타깃 크기 24×24px · 1.4.13 호버·포커스 콘텐츠 · 3.2.4 일관된 식별 · 3.3.2 라벨·지시문.
3차+ · 구현 단계별도 계획
키보드 내비게이션 · ARIA · 상태/오류 메시지 — 컴포넌트 코드 구현 단계에서 별도 계획 수립.
제외폰트 사이즈 관련 (팀 회의 합의)
1.4.4 텍스트 확대(200%) · 1.4.10 리플로우 · 1.4.12 텍스트 간격 — 폰트 사이즈 제외 정책에 따라 적용 범위에서 제외.
Next · 남은 작업
검수 리포트
준비 중
토큰 검증 파이프라인을 돌린 검수 리포트가 들어올 자리입니다. 파이프라인 게이트를 통과했다는 근거가 여기 놓입니다.
현재 리포트는 토큰 v0.2.1 기준(2026-06-24)이라 현행 정본 v0.2.4와 맞지 않습니다 — 다시 생성한 뒤 연결합니다.
Govern · Decisions
Decisions
각 결정과 그 근거를 기록하는 디시전 로그입니다. 항목마다 근거를 함께 적습니다.
Govern · Worklog
Worklog
날짜별 작업 타임라인 · 카테고리 필터 · 정렬
버전: v MAJOR.MINOR.PATCH(유의적 버전) — PATCH 같은 단계 내 세부 추가·수정 / MINOR 마일스톤·단계 전환(점검·협의 등) / MAJOR 정식 릴리스·구축 완료