생성 파일입니다. 값을 바꾸려면 design-system/foundation/tokens.json(공통) 또는 design-system/design-foundation/tokens.json(서비스)을 고치고 npm run ds:build를 실행하세요. 이 페이지와 앱이 함께 바뀝니다.
원시 색. UI 코드에서 직접 참조하지 않는다. 역할 토큰이 이 값을 참조한다.
UI 코드가 참조하는 유일한 층. 이름은 모든 서비스 공통, 값은 서비스가 정한다. 표식 design-foundation 값은 서비스가 덮어쓴 토큰, design-foundation 전용은 서비스만 가진 토큰이다.
--color-bg-*--color-fg-*--color-border-*--color-accent-*--color-positive-*--color-danger-*--color-info-*--color-warning-*컴포넌트는 롤 단위로만 쓴다. 각 롤은 size·weight·tracking·leading 네 값이다.
4pt 그리드.
7종만 쓴다.
--radius-xs6px · 배지--radius-sm8px · 작은 필드·특징 칩--radius-md10px · 버튼·인풋--radius-lg12px · 썸네일·타일--radius-xl16px · 카드--radius-2xl20px · 시트--radius-pill999px · 칩·필카드는 그림자 대신 헤어라인. 시트·팝오버·다이얼로그에만 쓴다.
--shadow-sm0 1px 3px rgb(23 23 25 / 8%)--shadow-popover0 14px 40px rgb(23 23 25 / 12%)--shadow-dialog0 24px 80px rgb(23 23 25 / 18%)색·투명도·transform만 움직인다. 아래 버튼에 마우스를 올리면 --duration-base로 불투명도만 바뀐다.
| 토큰 | 값 | 용도 |
|---|---|---|
--duration-fast | 120ms | transform |
--duration-base | 160ms | 색·투명도·보더 |
--duration-sheet | 240ms | 시트 슬라이드 |
--ease-out | ease-out |
hover 데모
버튼·인풋 높이와 터치 타깃 최소 크기.
--control-height-s32px--control-height-m36px--control-height-l40px--control-height-xl48px--control-touch-min44px · 터치 타깃 최소브레이크포인트는 공통 토큰, 지원 뷰포트는 서비스가 선언한다.
| 토큰 | 값 | 설명 | 층 |
|---|---|---|---|
--layout-page-width | 1120px | foundation | |
--layout-content-width | 720px | foundation | |
--breakpoint-sm | 600px | 큰 폰·작은 태블릿 세로 | foundation |
--breakpoint-md | 768px | 태블릿 세로. 모바일 탭바 ↔ 상단 바 전환 | foundation |
--breakpoint-lg | 1024px | 태블릿 가로·작은 PC | foundation |
--breakpoint-xl | 1280px | PC | foundation |
위 눈금: 공통 브레이크포인트. 아래 강조 눈금: design-foundation가 검수하는 뷰포트 폭. 눈금 전체는 0~1440px.
| 범위 | 책임지는 뷰포트 |
|---|---|
public | phone 390 · tablet 768 · desktop 1280 |
같은 마크업에 역할 토큰 값만 바꾼 결과. 원본 design-system/design-foundation/themes/*.json. 앱에서는 html[data-design]으로 적용된다.
모든 서비스가 필수로 지킨다. 원본 design-system/foundation/RULES.md.
모든 서비스가 필수로 지키는 규칙이다. 새 서비스의 첫 화면을 그리기 전에 이 문서와 tokens.json을 읽는다. 서비스별 규칙은 design-system/<service>/RULES.md에 둔다. 규칙을 바꾸려면 이 문서를 고치고 영향받는 서비스를 모두 점검한다.
각 규칙은 [MUST]이며 "검사" 열은 어떻게 확인하는지 적는다. 2026-11-08 오너 확정.
공통 프리미티브 7종: Button·Card·Badge·Chip·Input(Textarea·Field 포함)·EmptyState·Skeleton. 서비스 코드는 @ds/foundation/primitives에서 import 한다. <Link>·<label>에 같은 모양이 필요하면 buttonClass·cardClass·badgeClass·chipClass 헬퍼를 쓴다. 스타일은 foundation/primitives/primitives.css 한 파일(ds- 접두사)이며 토큰만 참조한다. 세 뷰포트 전시는 /design-system.
| # | 규칙 | 검사 |
|---|---|---|
| A1 | UI 코드(CSS·TSX)에서 hex·rgb 색을 직접 쓰지 않는다. --color-* 역할 토큰만 참조한다. 제3자 브랜드 가이드 고정값(예: Google 로그인 버튼)만 주석을 달고 예외로 둔다 | grep -E '#[0-9a-f]{3,8}' src/**/*.css 결과가 예외 주석 블록뿐이어야 한다 |
| A2 | 팔레트(--palette-*)를 직접 참조하지 않는다. 역할 토큰이 팔레트를 참조한다 | 같은 grep |
| A3 | 라운드는 --radius-xs/sm/md/lg/xl/2xl/pill 7종만 쓴다 | border-radius: 값이 토큰이 아니면 위반 |
| A4 | 간격은 4pt 그리드(--space-*)를 따른다 | 리뷰 |
| A5 | 모션은 --duration-fast/base/sheet + --ease-out만. 색·투명도·transform만 움직인다. prefers-reduced-motion을 존중한다 | transition 선언 점검 |
| A6 | 브레이크포인트는 --breakpoint-sm/md/lg/xl 4개만. 미디어쿼리는 theme(--breakpoint-*)로 참조한다 | @media 선언에 숫자 px가 없어야 한다 |
| # | 규칙 | 검사 |
|---|---|---|
| B1 | 카드는 그림자 대신 헤어라인(--color-border-subtle). 그림자는 시트·팝오버·다이얼로그(--shadow-*)만 | 카드류 셀렉터에 box-shadow 없음 |
| B2 | 액센트 컬러는 구두점이다. CTA·활성 상태·강조 배지에만 쓰고 배경·장식에 쓰지 않는다. 화면당 Primary 액션은 1개 | 리뷰 |
| B3 | hover는 색상 전환 없이 불투명도(0.72) 또는 뉴트럴 한 단계. press는 한 단계 더 | primitives.css .ds-button:hover·.ds-chip:hover opacity 0.72 — grep |
| B4 | 포커스 링 2px + 오프셋 2px를 모든 상호작용 요소에 표시한다. outline: none으로 지우지 않는다 | globals.css 전역 :focus-visible 2px/offset 2px; 프리미티브는 outline을 지우지 않는다 — grep -n 'outline: *none' primitives.css 결과 0 |
| B5 | 터치 타깃 최소 44×44(--control-touch-min). 목록 행은 손가락으로 누를 만큼 넉넉하게 | .ds-button·.ds-input min-height가 --control-*; (pointer: coarse)에서 44px — /design-system 390 프레임 검수 |
| B6 | 제품 UI에 이모지를 쓰지 않는다. 아이콘 세트로 대체하고, 썸네일 결손은 첫 글자 타일 | TSX 문자열 이모지 lint |
| B7 | 숫자는 tabular-nums. 본문 글꼴은 --font-sans(Pretendard 셀프호스팅) | 토큰 |
| # | 규칙 | 검사 |
|---|---|---|
| C1 | 결손이 기본 상태다. 모든 목록·상세는 빈 상태(EmptyState)를 설계하고, 로딩은 스켈레톤(Skeleton)으로 표현한다. 스피너 금지 | EmptyState·Skeleton 프리미티브 사용 — grep -rn 'spinner' src 0 |
| C2 | 미확인 정보를 부정으로 추정해 표기하지 않는다. 확인된 것만 노출한다 | 리뷰 |
| C3 | 카피는 존댓말(-해요/-합니다). 제품 크롬에 느낌표 금지. 버튼은 짧은 동사형. 빈 상태는 "명사구 + 보조 문장" | 리뷰 |
| C4 | 상태색(positive·danger·info·warning)은 의미로만 쓴다. 장식·브랜드 용도로 쓰지 않는다 | 리뷰 |
| # | 규칙 | 검사 |
|---|---|---|
| D1 | 모든 프리미티브는 폰(390)·태블릿(768)·PC(1280) 세 구간에서 깨지지 않아야 한다. 서비스 컴포넌트는 서비스가 선언한 뷰포트(<service>/tokens.json $meta.viewports)만 책임진다 | showcase 3뷰포트 |
| D2 | 가로 스크롤이 생기면 결함이다(의도한 칩·카드 캐러셀 제외) | 스크린샷 검수 |
| D3 | 한국어 서비스는 카카오톡 인앱 브라우저 렌더 확인을 완료 기준에 넣는다 | QA 체크리스트 |
| D4 | 화면을 만들거나 고치면 사용자에게 보여주기 전에 브라우저로 열어 스크린샷과 핵심 상호작용을 직접 검수한다 | 작업 절차 |
ui-feedback 서비스에 채택된 오너 디자인 원칙(fb style)은 이 문서의 후보 큐다. 분기마다 수동으로 검토해 승격한다. 자동 동기화하지 않는다.
서비스층 RULES.md에서 두 번째 서비스에도 반복되는 규칙이 나오면 여기로 올린다.
공통 규칙 위에 더해지는 서비스 전용 규칙. 원본 design-system/design-foundation/RULES.md.
이 전시는 공통 기본값만 보여 준다. 서비스별 규칙·값·테마는 각 서비스 저장소의 design-system/<service>/에 있다(예: localboard — 액센트 바이올렛, 광고 라벨, 결손 표현 규칙, 운영자 테마 7종).