@yanolja-next/design-core 0.0.1 → 0.1.0

package/catalog.json

@@ -0,0 +1,1345 @@
+{
+  "package": "@yanolja-next/design-core",
+  "rules": "RULES.md",
+  "entries": [
+    {
+      "name": "AppShell",
+      "layer": "core",
+      "intent": "로그인 뒤 업무 화면 전체 틀(위쪽 바, 사이드바, 본문 시트)",
+      "use": "업무 앱의 모든 화면. 범위 고르기(picker 자리에 제품이 주는 부품)와 메뉴가 있는 화면. #앵커로 간 자리는 markArrival 이 잠깐 회색 선으로 두드러지게 한다(화면이 따로 강조하지 않는다)",
+      "avoid": "로그인 화면, 로그인 없이 보는 소개 화면, 다른 앱 안에 담긴 화면(iframe)",
+      "parts": {
+        "SideNavProvider": "사이드바 접기 상태를 위쪽 바 메뉴 단추와 사이드바가 같이 본다. AppShell 이 sidebar 가 있으면 감싼다",
+        "Topbar": "위쪽 바: 홈 링크, 범위 칩, 경로, 찾기, 도움말, 알림, 계정 메뉴(로그아웃은 signOutHref)",
+        "Sidebar": "지금 범위 안의 메뉴. 900 이하에서는 숨고 서랍이 맡는다",
+        "Drawer": "햄버거로 여는 왼쪽 서랍. 모든 제품과 위 범위로 가는 길",
+        "DrawerRow": "서랍 안 한 줄 링크. 누르면 서랍이 닫힌다",
+        "DrawerLabel": "서랍 안 묶음 이름 한 줄",
+        "DrawerHere": "서랍 맨 위 지금 자리(범위 종류와 이름). 누르는 자리가 아니다",
+        "DrawerTop": "서랍 맨 위 줄 묶음(홈, 최근 방문). 아래 선으로 목록과 가른다",
+        "DrawerFoot": "서랍 끝, 선 아래의 위 범위로 가는 줄",
+        "Keycap": "키 하나를 키캡으로 보인다(⌘K, ↵, Tab)",
+        "MatchText": "찾은 글자를 이름 안에서 두드러지게 한다",
+        "Slash": "위쪽 바 경로 칸 사이의 \"/\" 표식",
+        "HelpProvider": "도움말 패널의 열림 상태를 위쪽 바, 머리의 \"정보\", 패널이 같이 본다. AppShell 이 감싼다",
+        "HelpToggle": "위쪽 바에서 도움말 패널을 여닫는 (i) 단추",
+        "HelpPanel": "본문 오른쪽 위에 덮어 여는 도움말 패널. AppShell 이 둔다"
+      },
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "PageHead",
+      "layer": "core",
+      "intent": "화면 제목, 개수, 화면 단위 동작",
+      "use": "화면 맨 위 한 번. 목록은 제목 옆 (개수), 오른쪽에 주 단추 하나까지. 메타 줄의 라벨과 값 한 칸(내 권한, 담당자)은 HeadFact, 길이를 모르는 값은 ownLine(폰에서 제 줄). 복사하러 오는 식별자(리소스 ID)는 id 와 idLabel 로 설명 아래 제 줄. 폰 한 줄에 안 드는 보조 동작은 actions 안 HeadMore(넓으면 단추, 폰은 ⋯ 메뉴)",
+      "avoid": "판(섹션) 안의 제목",
+      "parts": {
+        "InfoLink": "제목 뒤 \"정보\" 단추. 그 화면이나 판의 도움말을 연다",
+        "PagePathContext": "PageHead crumbs 를 셸로 넘기는 통로. 앱이 경로 상태의 setter 를 주고 그 경로를 Topbar path 에 준다",
+        "HeadFact": "머리 메타 줄의 라벨과 값 한 칸(내 권한, 담당자)",
+        "HeadMore": "머리 보조 동작. 넓으면 단추, 폰은 ⋯ 메뉴 하나"
+      },
+      "rule": "P2",
+      "instead": [
+        "Container",
+        "Card"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SignInCard",
+      "layer": "core",
+      "intent": "로그인 전 화면 하나: 바탕 가운데 로그인 칸(머리, 방법, 바닥 줄)",
+      "use": "제품 로그인, 다른 앱의 로그인(OIDC), 권한 없음처럼 셸(AppShell) 밖에서 계정 하나로 할 일을 묻는 화면. 넓으면 400 폭 떠 있는 유리 칸, 520 아래는 칸이 곧 화면. 머리는 SignInHead(제목과 한 줄, 제품 로그인은 wordmark 글자 로고, 다른 앱은 mark 에 SignInMark 첫 글자, 잘못된 요청은 SignInMark warn). 단계(코드 확인, 실패)는 머리만 바꾼다. 방법 무리 사이는 SignInOr. 안의 칸과 단추는 큰 크기(Input, Button size lg). 다른 앱으로 로그인할 때 보호 줄과 돌아갈 주소는 foot 의 SignInFootItem 둘",
+      "avoid": "로그인 뒤 업무 화면, 입력 몇 개로 만들거나 고치는 창",
+      "parts": {
+        "SignInHead": "로그인 칸 머리: 제목과 한 줄, 위에 글자 로고나 표식",
+        "SignInMark": "머리 위 표식(다른 앱의 첫 글자, 잘못된 요청의 경고)",
+        "SignInFootItem": "바닥 줄 한 조각: 아이콘과 글(보호 줄, 돌아갈 주소)",
+        "SignInOr": "로그인 방법 무리 사이 가름 줄(가운데 짧은 글과 양옆 선)"
+      },
+      "instead": [
+        "AppShell",
+        "Modal"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "StandalonePanel",
+      "layer": "core",
+      "intent": "셸 밖 화면 하나: 위쪽 바 아래 가운데 불투명 판(제목과 할 일 하나)",
+      "use": "로그인한 뒤 범위가 없는 화면(처음 들어온 사람의 조직 고르기, 속한 조직 없음, 없는 주소). 위쪽 바(Topbar)는 화면이 둔다. 고르기는 PickList(묶음 여럿이면 level group), 받는 동안은 SkeletonRows, 실패는 FailState 를 판 안에",
+      "avoid": "로그인 전 화면, 셸 안 업무 화면의 판",
+      "instead": [
+        "SignInCard",
+        "Container"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Container",
+      "layer": "core",
+      "intent": "화면의 한 섹션(제목 + 본문), 또는 화면의 주인공 판",
+      "use": "시트 위에 상자 없이 놓이는 섹션. hero 는 화면이 답하는 한 가지를 담는 유리 판으로 화면에 하나. 제목 줄의 판정 한 마디(상태 한 줄)는 status. 짧은 제목과 작은 동작 하나는 actionsBeside 로 폰에서도 제목 옆",
+      "avoid": "나란히 놓이는 상자 카드 여럿, 표만 있는 섹션의 테두리(표가 제 카드를 그린다)",
+      "rule": "P3",
+      "instead": [
+        "Card",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SubHead",
+      "layer": "core",
+      "intent": "판 안 덩어리의 이름 한 줄(소제목)",
+      "use": "판 하나를 덩어리로 가를 때(설정 판의 묶음, 펼친 줄의 요청과 응답, 도움말 패널의 항목, 상세 화면 정보 칸의 묶음). 판 머리를 못 쓰는 절의 제목. 판 제목과 같은 13/500, 간격은 화면이 준다. 이름 옆 개수는 count(판 머리와 같은 회색 (n))",
+      "avoid": "판 머리, 화면 제목, 고르기 묶음 이름, 컨트롤 라벨, 라벨과 값 쌍의 라벨",
+      "rule": "P1",
+      "instead": [
+        "Container",
+        "PageHead",
+        "FieldGroup",
+        "Field",
+        "KeyValue"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Divided",
+      "layer": "core",
+      "intent": "창이나 판 안에서 앞 덩어리와 옅은 선 하나로 나뉘는 덩어리(위 선과 위 14)",
+      "use": "키 만든 창의 다음 할 일 줄(Playground 서비스 고르기), 창 안 고르기 묶음 사이(OAuth 클라이언트 유형, 허용 스코프), 시작하기 판에서 진행률에 세지 않는 선택 단계 묶음, 예산 주인공 판의 판정 제목 아래 수치 띠. 옆 여백과 안의 배치는 화면이 준다",
+      "avoid": "판 여럿 사이(간격으로 나눈다), 창 발(창이 긋는다), 단계 사이나 표 줄 사이(그 부품이 긋는다)",
+      "instead": [
+        "SectionStack",
+        "Modal",
+        "Steps",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SectionStack",
+      "layer": "core",
+      "intent": "화면 본문의 판 여럿을 한 열로 36 띄워 쌓는다",
+      "use": "설정, 개요, 상세처럼 상자 없는 판(Container)이 위아래로 이어지는 화면 본문",
+      "avoid": "나란히 놓이는 카드 격자, 판 하나 안의 덩어리 간격",
+      "rule": "P1",
+      "instead": [
+        "Card",
+        "Container"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Card",
+      "layer": "core",
+      "intent": "같은 줄에 나란히 놓이는 상자 판",
+      "use": "대시보드 보드처럼 상자끼리 견주는 자리. 머리는 14 한 줄 판 제목. 카드 전체가 눌리는 새 모양을 만들 때만 link 와 CardLink(갈 곳), CardButton(창 열기)",
+      "avoid": "화면의 섹션 하나(상자 없이 놓는다), 고르기 전에 읽는 카드 격자의 칸(이름, 설명, 사실 한 줄), 큰 제품 이름과 그림이 있는 소개 카드",
+      "parts": {
+        "CardHead": "카드 머리 한 줄(이름과 작은 동작)",
+        "CardBody": "카드 몸통. pad 로 여백을 준다",
+        "CardLink": "카드 이름 링크. 카드 어디를 눌러도 이 링크로 간다",
+        "CardButton": "카드 어디를 눌러도 창을 여는 단추. 갈 곳 대신 창을 열 때"
+      },
+      "instead": [
+        "Container",
+        "LinkCard"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "LinkCard",
+      "layer": "core",
+      "intent": "카드 격자의 칸 하나: 고르기 전에 읽는 대상, 카드 전체가 그 상세로 가거나 창을 연다",
+      "use": "고르기 전에 읽는 대상의 카드(이름, 배지, ID, 설명 두 줄, 사실 한 줄), 바로 시작 칸(size sm, 아이콘 이름과 덧말 한 줄). href 가 없으면 단추라 Modal trigger 로 쓴다. 아래 줄은 흐린 note 뒤에 값 fact 하나, 끝에 회색 꺾쇠가 올리면 2px 앞으로. 받는 동안은 LinkCardSkeleton. 격자(칸 수, 사이)는 화면이 준다",
+      "avoid": "관리하는 대상의 목록(키, 사용자), 머리와 몸통이 있는 판, 설명을 펴서 읽는 자리",
+      "parts": {
+        "LinkCardSkeleton": "받는 동안의 LinkCard 자리"
+      },
+      "rule": "P7",
+      "instead": [
+        "Table",
+        "Card",
+        "MoreText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ListWithRail",
+      "layer": "core",
+      "intent": "열이 적은 목록 + 오른쪽 요약 레일",
+      "use": "사용자, 권한, 키처럼 열이 적어 표가 화면을 가로질러 늘어지면 안 되는 목록",
+      "avoid": "열이 많은 표, 레일에 둘 사실이 없는 화면",
+      "parts": {
+        "RailGroup": "레일 묶음: 이름 한 줄과 그 아래 줄들",
+        "RailRow": "레일 한 줄: 왼쪽 라벨, 오른쪽 값(또는 목록 항목)",
+        "RailList": "레일 안 줄 목록(최근 활동, 리소스)",
+        "RailNote": "레일 안 보조 한 줄(빈 묶음, 규칙 한 줄)"
+      },
+      "rule": "P5",
+      "instead": [
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SplitPanes",
+      "layer": "core",
+      "intent": "한 판 안에서 나란히 견주는 두 칸(요청 | 응답)을 옅은 선으로 나눈다",
+      "use": "Playground 의 요청 칸과 응답 칸처럼 같은 일의 앞뒤를 한눈에 견주는 자리. 1180 이하는 위아래로 쌓는다",
+      "avoid": "본문과 요약 레일, 서로 다른 일의 판 둘, 판 안의 판",
+      "instead": [
+        "ListWithRail",
+        "SectionStack"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "InfoPanel",
+      "layer": "core",
+      "intent": "상세 화면 오른쪽 정보 칸: 대상의 사실을 모두 담는 주인공 판 하나",
+      "use": "서비스 상세처럼 왼쪽 탭, 오른쪽 300 칸인 상세 화면. 첫 묶음은 KeyValueColumns 한 열, 그 아래 묶음(이번 달, 담당자)은 InfoSection(위 옅은 선, SubHead 이름, 끝 이동 링크 하나 GoLink flush). 사람과 역할 목록은 PersonList(받는 동안, 없음, 좁은 화면 한 줄 요약). 칸의 자리와 폭은 화면이 준다",
+      "avoid": "목록 옆 요약 레일(라벨 왼쪽, 값 오른쪽 한 줄), 화면 본문의 판, 설정 화면의 속성",
+      "parts": {
+        "InfoSection": "정보 칸 안 묶음 하나(소제목과 내용)",
+        "PersonList": "사람 이름과 역할을 한 줄씩"
+      },
+      "rule": "P8",
+      "instead": [
+        "ListWithRail",
+        "Container",
+        "KeyValueColumns"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "PickList",
+      "layer": "core",
+      "intent": "짧은 목록에서 하나를 골라 그곳으로 간다(묻는 한 줄 + 줄 링크 + 전체 보기)",
+      "use": "범위나 대상을 하나 고르는 화면처럼 고르기 한 번이 목적인 자리. 줄은 이름 링크, 옆에 code(ID 앞자리), 오른쪽 끝 meta(내 권한). 받는 동안은 loading 줄 수만큼 뼈대. 화면 제목 아래 묶음 여럿(내가 속한 조직, 멤버가 아닌 조직)은 level group(묻는 줄 12)",
+      "avoid": "열을 견주거나 줄에 동작이 있는 리소스 목록, 레일의 요약 줄, 떠 있는 고르기 창",
+      "parts": {
+        "PickListItem": "고르는 목록의 한 줄. 줄 어디를 눌러도 간다"
+      },
+      "instead": [
+        "Table",
+        "ListWithRail",
+        "Menu"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Note",
+      "layer": "core",
+      "intent": "판 머리 바로 아래 이 판이 무엇인지 한두 줄, 또는 맨 아래 단서 한 줄(Fine)",
+      "use": "판 제목만으로 무엇인지 모를 때",
+      "avoid": "경고, 상태, 오류 문장",
+      "parts": {
+        "Fine": "카드 맨 아래 정책이나 단서 한 줄"
+      },
+      "instead": [
+        "StatusIndicator",
+        "FailState"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "PageFoot",
+      "layer": "core",
+      "intent": "화면 내용 맨 아래 조용한 글 묶음(사업자 정보, 약관 링크)",
+      "use": "결제 화면의 통신판매업자 정보, 내 계정 바닥의 약관 링크. 내용과 36 띄운 12 Ink 3. 한 줄에 항목 여럿이면 PageFootLine(항목 사이 14, 좁으면 항목 사이에서 넘김)",
+      "avoid": "판 맨 아래 단서 한 줄, 판 머리 아래 설명",
+      "parts": {
+        "PageFootLine": "화면 바닥 줄 하나. 좁으면 항목 사이에서 꺾인다"
+      },
+      "rule": "P1",
+      "instead": [
+        "Note"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Disclosure",
+      "layer": "core",
+      "intent": "판 안의 덩어리 하나를 접어 두고 접힌 줄에 이름과 옅은 덧말",
+      "use": "설정 파일, 도구 목록, 계산 근거처럼 대부분은 안 보고 넘어가는 덧붙임. 덧말에 무엇이 들었는지(경로, 개수와 앞 두 이름). 펼친 안이 글 줄이면 lines",
+      "avoid": "표 줄 아래 하위 줄을 여는 자리, 화면의 주된 내용(접어 두면 안 읽힌다)",
+      "instead": [
+        "ExpandToggle",
+        "Container"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Table",
+      "layer": "core",
+      "intent": "같은 종류의 것 여럿을 줄로 보여 준다",
+      "use": "리소스 목록(프로젝트, 멤버, 키, 서비스). 표는 스스로 흰 표 카드에 담긴다(bare 로 끈다). 칸이 몇 개 안 되는 넓은 표는 layout=\"packed\" 로 칸을 모으고 남는 폭은 stretch 한 칸에. 늘 보이는 줄 동작은 TableRowEnd reveal=\"always\". 시간 순으로 쌓이는 기록(활동)은 phone=\"stack\" 으로 폰에서 카드 줄, 값이 있을 때만 셋째 줄인 칸은 TableCell detail. 위험 기준을 넘은 값(5xx 오류율 1% 이상)은 TableCell tone=\"danger\", 그 칸이 폰에서 숨는 표는 이름 옆 점 TableName flag=\"danger\". 칸 안 긴 값(주소, 스코프, Owner 여럿)은 TableClip 으로 한 줄에 자르고 전체는 툴팁, 값 앞에 늘 보일 꼬리표(민감 스코프 수)는 TableClip lead. 이름 아래 줄에 ID, 꼬리표(같은 이름 수), 덧말을 같이 두려면 sub 에 TableSubLine(뒤쪽 글부터 줄이고 ID 는 고를 수 있다). 꺾이면 안 되는 짧은 값 칸(시각, 유형)은 TableCell nowrap, 짧은 이름(예산 알림 기준)은 TableName nowrap. 값 뒤 꼬리표(활동 누가 칸의 CLI)는 TableCell tag. 글보다 높은 컨트롤(단추, 외부 로그인 단추)이 든 칸은 TableCell control(위아래 여백 없이 가운데, 줄 44). 폰에서 밀지 않고 칸을 접는 표는 TableHeaderCell, TableCell phone=\"fold\"(받는 동안 줄과 받침 줄은 fold 차례, 고르기 칸이 앞인 표는 select. 남는 폭은 고르기 칸 다음 이름 칸이 받는다), 접힌 값은 이름 아래 TableName phoneSub. 접을 칸 없이 폰 폭에 드는 표는 Table phone=\"fit\"(이름 칸이 남는 폭을 받아 줄인다). 폰에서 빼기만 하는 보조 칸(최근 오류의 사유, 소요 시간)은 phone=\"hide\"(표는 그대로 민다). 숫자가 든 값이지만 줄끼리 견주지 않는 칸(활동의 바뀐 값)은 TableCell numeric=\"start\"(표 숫자, 왼쪽). 보는 사람 본인 줄은 TableName me(\"나\" 꼬리표). 이름 뒤 꼬리표(증액 승인 대기, 열람 권한 없음)는 TableName tag(이름만 줄이고 꼬리표는 남긴다). 줄을 누르면 다른 쪽으로 가는 표는 TableName href, 그 자리에서 무엇을 하는 표(이 값만 보기)는 TableRowButton. 아래 줄을 펼치는 줄은 TableRow expanded 와 이름 앞 ExpandToggle, 그 아래 줄은 TableRow nested. 차트가 보이는 지표 칸은 TableHeaderCell, TableCell selected(잉크 500), 차트에서 끈 계열이나 값 없는 날의 줄은 TableRow off(45% 흐림). 추이 칸의 Sparkline 은 칸이 가운데에 둔다. 표에 넣지 않은 나머지(이번 달 쓰지 않은 서비스 n개)는 표 아래 TableMore 한 줄에 수와 다른 화면 링크",
+      "avoid": "한 리소스의 속성(이름: 값), 그림이나 소개를 표 모양으로 그리기",
+      "parts": {
+        "TableHead": "표 머리 줄 묶음(thead)",
+        "TableBody": "표 본문 줄 묶음(tbody)",
+        "TableFoot": "표 합계 줄",
+        "TableRow": "표 한 줄. 고름, 펼침, 안긴 줄, 흐림 상태를 받는다",
+        "TableHeaderCell": "표 머리 칸",
+        "TableCell": "표 칸 하나. 숫자, 위험 값, 꺾지 않기, 폰에서 접기를 받는다",
+        "TableName": "표 이름 칸. 링크(href), 아래 줄(sub), 꼬리표를 받는다",
+        "TableClip": "칸 안 긴 값을 한 줄로 자르고 전체는 툴팁",
+        "TableSubLine": "이름 아래 한 줄에 ID, 꼬리표, 덧말을 같이 둔다",
+        "TableRowButton": "줄을 누르면 그 자리에서 무엇을 하는 단추(다른 화면으로 가지 않는다)",
+        "TableRowEnd": "줄 끝 꺾쇠나 도구. 기본은 올렸을 때만 보인다",
+        "TableEmpty": "빈 표: 머리는 남기고 \"대상 없음\", 설명, 행동",
+        "TableMore": "표 아래 한 줄: 표에 없는 나머지 수와 그것을 보는 화면 링크",
+        "TableSelectHeaderCell": "고르기 칸 머리(모두 고르기)",
+        "TableSelectCell": "줄 고르기 칸(체크 상자나 라디오)",
+        "TableColumnSizer": "빈 표에서도 받는 동안과 같은 칸 폭을 지킨다",
+        "TableSkeletonRows": "받는 동안의 표 본문 줄"
+      },
+      "rule": "P4",
+      "instead": [
+        "KeyValueColumns",
+        "KeyValue"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CollectionFilter",
+      "layer": "core",
+      "intent": "목록 위 찾기, 속성 거르기, 쪽 넘김 한 줄",
+      "use": "표 바로 위. 개수는 PageHead 제목 옆이 맡는다. 표 옆에 레일이 있는 성긴 목록은 sparse(찾기 240 부터, 고르기와 쪽 넘김이 같은 줄). 찾기 칸 없이 고르기 동작만 있는 표는 고른 동안 판 머리 오른쪽(Container actions)에 place=\"head\" 로 선택 줄을 둔다",
+      "avoid": "사용량 기간, 서비스 고르기처럼 값을 고르는 조회 줄",
+      "parts": {
+        "Pagination": "쪽 넘김(‹ 1 2 … ›). 한 쪽이면 그리지 않는다"
+      },
+      "instead": [
+        "Segmented",
+        "Select"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ToolbarDivider",
+      "layer": "core",
+      "intent": "한 줄에 놓인 컨트롤 무리를 세로 선으로 가른다",
+      "use": "조회 줄(기간 | 단위, 묶기, 차트 | 비교, 필터), 목록 필터 줄의 쪽 넘김 | 표 설정. 양옆 여백은 줄의 간격",
+      "avoid": "메뉴 항목 사이 가로 선, 판과 판 사이",
+      "instead": [
+        "Menu",
+        "SectionStack"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "KeyValueColumns",
+      "layer": "core",
+      "intent": "한 리소스의 속성을 라벨 위, 값 아래로 넷까지 나란히",
+      "use": "설정, 상세 화면 본문의 정보(P9). 상세 화면 정보 칸(P8)은 한 열로 쌓거나 짧은 수치 둘을 두 열로. 설정 화면처럼 한 화면의 여러 섹션이 위아래로 열을 맞춰야 하면 aligned(고정 폭 열 넷, 폰은 한 열)",
+      "avoid": "같은 종류 여럿의 목록, 라벨이 길고 값이 한 줄인 좁은 칸",
+      "rule": "P9",
+      "instead": [
+        "Table",
+        "KeyValue"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "KeyValue",
+      "layer": "core",
+      "intent": "좁은 칸에서 라벨 왼쪽, 값 오른쪽 한 줄씩",
+      "use": "시트, 모달, 레일처럼 폭이 좁은 곳의 속성",
+      "avoid": "넓은 본문의 속성 묶음",
+      "parts": {
+        "KeyValueItem": "라벨과 값 한 쌍"
+      },
+      "instead": [
+        "KeyValueColumns"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Facts",
+      "layer": "core",
+      "intent": "문장 대신 짧은 사실 몇 개(라벨 값)를 선 없이 한 줄로 잇거나, 값끼리 맞춰 한 줄에 하나씩",
+      "use": "판정 아래 사실 줄, 대기 중인 요청의 요약 줄, 모달 안에서 정할 때 같이 볼 값 두세 개",
+      "avoid": "한 리소스의 속성 목록, 레일 줄, 라벨이 위에 오는 본문 정보",
+      "instead": [
+        "KeyValue",
+        "ListWithRail",
+        "KeyValueColumns"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "TermList",
+      "layer": "core",
+      "intent": "낱말(또는 할 일)과 그 뜻을 짝지어 여럿 적는다(낱말 잉크 500, 뜻 보조 잉크)",
+      "use": "도움말 패널의 역할 설명과 역할별 권한(낱말 아래 뜻, stack), 시작 판 레일의 용어처럼 낱말 바로 뒤에 뜻을 이어 쓰는 짧은 짝(run)",
+      "avoid": "한 리소스의 속성(라벨과 값), 문장 대신 짧은 사실 몇 개, 순서가 있는 안내, 잃거나 얻는 권한 묶음",
+      "instead": [
+        "KeyValue",
+        "Facts",
+        "Steps",
+        "ChangeGroup"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "MetricStrip",
+      "layer": "core",
+      "intent": "같은 무게의 수치 여럿을 한 줄 띠로",
+      "use": "요청 수, 오류율, 지연처럼 나란히 견주는 수치(P10 수치 띠). 숫자를 눌러 아래 차트의 지표를 고르면 selected/onSelect. 위험 기준을 넘은 값은 item tone danger(표 칸과 같은 진홍)",
+      "avoid": "화면에 하나뿐인 큰 숫자, 카드 맨 위 요약 숫자",
+      "rule": "P10",
+      "instead": [
+        "Figures"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Figures",
+      "layer": "core",
+      "intent": "판 맨 위 주인공 수 하나와 보조 수",
+      "use": "판이 답하는 숫자. Hero 는 묶음 밖에 홀로 서는 큰 수, 화면 하나의 주인공 수는 Hero size=\"xl\"(40/400), 뒤의 옅은 기준(/ 한도)은 suffix. 받는 동안은 Hero loading(그 크기의 줄 상자와 막대, 폰 크기도 따른다). 주인공 수 옆에 견주는 수 하나(지난 기간)는 Figure inline(라벨과 값 한 줄, 13)",
+      "avoid": "같은 무게 수치 여럿",
+      "parts": {
+        "Figure": "라벨 붙은 수 하나",
+        "Hero": "묶음 밖에 홀로 선 주인공 수"
+      },
+      "instead": [
+        "MetricStrip"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "UsageBar",
+      "layer": "core",
+      "intent": "한도 대비 사용량, 또는 전체 중 비중을 막대와 글로",
+      "use": "한도 사용률(kind meter, 주색 몫은 tone spent), 항목별 비중(kind share, 그 줄의 순위 색 s1~s4, rest). 표 칸 안, 같은 칸은 같은 width. 판 폭 전체 사용률은 full(글 없음). 막대 아래 경고 한 줄은 statusLine: 줄이 올 수 있는 칸이면 받는 동안 waiting, 경고가 없으면 empty 를 주고, 표 행 높이는 Table 이 56 으로 맞춘다",
+      "avoid": "시간에 따른 변화, 한 막대에 여러 몫을 쌓기",
+      "instead": [
+        "BarChart",
+        "TimeSeriesChart"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "WarnLine",
+      "layer": "core",
+      "intent": "값 곁의 막힘 경고 한 줄: 경고 아이콘과 진홍 12/500",
+      "use": "막대 칸이 없는 자리의 같은 경고: 폰 표 이름 아래 줄(TableName phoneSub), 검토 창의 값 아래 문장 전체. 짧은 꼴은 short, 문장 전체는 툴팁과 보조기기 글. 줄 높이와 한 줄 자르기는 놓인 자리가 정한다",
+      "avoid": "사용률 막대 아래 줄, 판 하나의 판정, 꺾이지도 줄지도 않는 상태 꼬리(정상, 오류, 대기), 동작 실패",
+      "rule": "P16",
+      "instead": [
+        "UsageBar",
+        "StatusIndicator",
+        "FailLine"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Change",
+      "layer": "core",
+      "intent": "바뀔 값 한 줄(지금 값 → 바뀔 값)",
+      "use": "권한 변경, 한도 변경처럼 확인 창에서 무엇이 무엇으로 바뀌는지",
+      "avoid": "시간에 따른 증감 수치",
+      "instead": [
+        "MetricStrip"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ChangeGroup",
+      "layer": "core",
+      "intent": "확인 창에서 잃거나 얻는 것 한 묶음(머리 + 줄마다 -, + 또는 아이콘)",
+      "use": "확인 창의 잃는 권한, 얻는 권한, 같이 지워지는 것(줄마다 이름, 수, 결과: items 의 label, value, note). 끝에 바뀌지 않는 것 한 줄(ChangeNote)",
+      "avoid": "값 하나가 무엇에서 무엇으로 바뀌는지, 권한 전체 표",
+      "parts": {
+        "ChangeNote": "바뀜 묶음 끝 옅은 한 줄(바뀌지 않는 것)"
+      },
+      "instead": [
+        "Change",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "MarkList",
+      "layer": "core",
+      "intent": "줄마다 앞 표식 하나(-, + 또는 아이콘, 옅게)와 짧은 글의 목록",
+      "use": "머리가 따로 있는 판 안에서 쓸 수 없는 것, 생기는 것 몇 줄(꺼진 기능의 사용 불가 목록). 확인 창의 잃거나 얻는 묶음은 머리까지 갖춘 ChangeGroup",
+      "avoid": "차례가 있는 안내, 낱말과 뜻의 짝, 리소스 목록",
+      "instead": [
+        "Steps",
+        "TermList",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Steps",
+      "layer": "core",
+      "intent": "차례대로 할 일을 번호 붙은 단계로",
+      "use": "설치, 연결처럼 순서가 있는 안내(단계마다 내용), 시작하기처럼 끝난 단계를 체크하는 할 일 목록(done)",
+      "avoid": "순서 없는 항목 나열, 만들기 창 안의 단계 전환(창이 단계를 바꾼다)",
+      "parts": {
+        "Step": "단계 하나: 번호, 제목, 끝 동작, 내용"
+      },
+      "instead": [
+        "Modal"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Tabs",
+      "layer": "core",
+      "intent": "같은 대상의 다른 보기로 옮겨 간다",
+      "use": "페이지 탭(주소가 바뀐다), 판 안 탭(sm). 탭 줄 끝의 동작(요청 탭 옆 초기화)은 end 로 같은 줄, 같은 아래 선 위에(탭 목록 밖)",
+      "avoid": "값 하나 고르기(기간, 언어)",
+      "parts": {
+        "Tab": "탭 하나. href 면 링크, 없으면 그 자리에서 바꾸는 단추"
+      },
+      "rule": "P18",
+      "instead": [
+        "Segmented"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "StatusIndicator",
+      "layer": "core",
+      "intent": "정상, 경고, 오류, 대기, 중지 상태를 아이콘과 글로",
+      "use": "리소스 상태, 판정 줄, 표 칸의 상태. 차단 경고는 진홍",
+      "avoid": "역할, 종류, 개수 같은 꼬리표, HTTP 응답 코드",
+      "rule": "P16",
+      "instead": [
+        "Badge"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Badge",
+      "layer": "core",
+      "intent": "역할, 종류, 개수 꼬리표. tone ok 로 정상 하나를 눈에 띄게",
+      "use": "OWNER 같은 역할, Beta 같은 단계, 출시와 사용 중(tone ok), HTTP 메서드(variant method). 메서드와 경로 한 줄은 HttpRoute",
+      "avoid": "오류, 차단, 경고 상태(색 tone 은 ok 하나뿐이다)",
+      "instead": [
+        "StatusIndicator"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Chip",
+      "layer": "core",
+      "intent": "고른 값 하나를 알약으로 보이고, 필요하면 x 로 뺀다",
+      "use": "걸어 둔 필터(종류: 값), 창에서 고른 사람, 명단. 칩 여럿은 ChipList 한 목록(넘치면 다음 줄, 긴 칩은 말줄임). 표 칸의 Badge 여럿도 ChipList 로 묶는다",
+      "avoid": "역할이나 단계 꼬리표, 상태",
+      "parts": {
+        "ChipList": "칩 여럿을 한 목록으로. 넘치면 다음 줄"
+      },
+      "instead": [
+        "Badge",
+        "StatusIndicator"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "EmptyState",
+      "layer": "core",
+      "intent": "보여 줄 것이 없다",
+      "use": "판 하나가 비었을 때. 머리는 남기고 글 시작에 \"{대상} 없음\" + 설명 + 행동. line: 표나 판 대신 없음만 말하는 조용한 한 줄(실행 기록 없음, 승인 대기 없음)",
+      "avoid": "빈 표(표 안에서 머리를 남긴다), 불러오기 실패, 판 머리 아래 이 판이 무엇인지 설명 줄",
+      "rule": "P19",
+      "instead": [
+        "Table",
+        "FailState",
+        "Note"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "FailLine",
+      "layer": "core",
+      "intent": "창을 연 채 동작이 실패했다",
+      "use": "창이나 폼의 단추 옆 자리: 진홍 한 줄(무엇이 안 됐나) + 까닭 한 줄. 창을 닫지 않고 고치게 한다",
+      "avoid": "판 하나 자리의 불러오기 실패, 실행한 요청의 응답 오류",
+      "rule": "P15",
+      "instead": [
+        "FailState"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "FailState",
+      "layer": "core",
+      "intent": "불러오기에 실패했다",
+      "use": "판 하나 자리에 \"{대상} 불러오기 실패\" + 까닭 + 다시 불러오기. line: 값이나 목록 한 줄 자리에 대상과 글 줄 안의 다시 시도만(정보 칸의 담당자, 이번 달 비용)",
+      "avoid": "저장 실패(그 동작 자리에 말한다), 권한 없음(그리지 않거나 이유와 함께 막는다)",
+      "rule": "P20",
+      "instead": [
+        "WithReason"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Veiled",
+      "layer": "core",
+      "intent": "아직 놓을 수 없는 본문을 자리만 두고 숨기고 그 위에 뼈대를 겹친다",
+      "use": "본문이 나올지 무엇이 먼저 끼어들지 정해지기 전(첫 화면: 시작 안내가 나올지 아직 모름). 자리가 그대로라 정해진 뒤 밀림이 없다. cover 는 받는 동안의 화면과 같은 모양",
+      "avoid": "모양이 정해진 판을 받는 동안(그 판 자리에 뼈대), 앞 값을 둔 채 다시 받기",
+      "rule": "L1",
+      "instead": [
+        "SkeletonRows"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SkeletonRows",
+      "layer": "core",
+      "intent": "받는 동안 받은 뒤와 같은 모양의 뼈대",
+      "use": "목록, 판, 카드를 받는 동안. 200ms 뒤에 나타난다. 글 줄 안의 값 자리는 SkeletonBar inline. 좁은 칸에서 여러 줄로 접힐 덧말 자리는 SkeletonText holds(올 글을 숨겨 깔아 줄 수를 잡는다). 줄 수를 아는 꺾이는 값(레일 주소 두 줄)은 SkeletonText lines(줄마다 막대). 앞 값을 둔 채 다시 받으면 뼈대 대신 그 판에 data-stale(안의 것이 200ms 뒤 .55). 화면 조각(코드)을 받는 동안 화면 자리 전체는 SkeletonPage(머리 제목 줄과 판 하나)",
+      "avoid": "표(Table 이 TableSkeletonRows 를 쓴다), 차트, 코드 칸(CodeBlock loading)",
+      "parts": {
+        "SkeletonText": "글 한 줄 자리. 받은 글과 같은 높이",
+        "SkeletonBar": "막대 하나. 화면이 제 모양대로 스켈레톤을 짤 때",
+        "SkeletonArea": "화면이 짠 스켈레톤 자리. 불러오는 중이라고 알린다",
+        "SkeletonCard": "받는 동안의 카드 자리",
+        "SkeletonPage": "화면을 받는 동안의 화면 자리(제목 줄과 판 하나)"
+      },
+      "rule": "L1",
+      "instead": [
+        "Table",
+        "ChartSkeleton",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Button",
+      "layer": "core",
+      "intent": "이 화면에서 무언가를 한다",
+      "use": "만들기, 저장, 승인. 주 단추(primary)는 화면에 하나. 값을 담아 고르기 창을 여는 단추(기간 알약 옆 직접 고른 기간)는 selected 로 그 값이 지금 쓰이는지 보인다(false 면 글자가 물러선다). 접힌 것을 펴는 더 보기/접기 단추는 icon chev 와 aria-expanded(열린 동안 꺾쇠가 위로). 높이 단계: 표 안 sm 24, 섹션과 폼 28, 화면 머리 동작 size head(폰 36). PageHead 동작과 폰 시트 발 단추는 묶음이 머리 높이로 올리고, 그 밖 머리 단계 줄(Playground 주소 줄)은 head 를 직접 준다",
+      "avoid": "다른 곳으로 가기(단추 모양이어도 링크다), 행 끝이나 판 머리의 작은 도구",
+      "instead": [
+        "ButtonLink",
+        "GoLink",
+        "ToolButton"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ActionRow",
+      "layer": "core",
+      "intent": "단추와 이동 링크 여럿을 한 줄로 두고 좁으면 다음 줄로",
+      "use": "단계 설명 아래 할 일 줄(시작하기의 프로젝트 찾기 + 만들기), 판 본문 안 동작 둘 이상, 목록 아래 더 보기 단추와 그 옆 실패 한 줄(활동)",
+      "avoid": "폼 아래 저장 줄, 창 발의 단추, 화면 머리 동작, 표 줄 끝 동작",
+      "instead": [
+        "FormActions",
+        "Modal",
+        "PageHead",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ButtonLink",
+      "layer": "core",
+      "intent": "다른 곳으로 가는 길을 단추 모양으로",
+      "use": "상담 신청, Playground 열기처럼 이동이 그 자리의 다음 할 일일 때. 업무 화면과 소개 화면 둘 다",
+      "avoid": "이 화면에서 무언가를 하는 동작, 판 머리의 작은 이동 링크. buttonVariants 를 링크에 직접 붙이지 않는다",
+      "instead": [
+        "Button",
+        "GoLink"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "GoLink",
+      "layer": "core",
+      "intent": "판 머리에서 관련 화면으로 간다",
+      "use": "판 머리 오른쪽 이동 링크 하나(\"자세히 →\"). 길은 보이되 아직 갈 수 없으면 disabledReason(흐리게, 누르면 이유). 글 아래 홀로 선 줄은 flush 로 글자가 위 글의 시작선에",
+      "avoid": "글 안의 링크, 동작",
+      "instead": [
+        "TextLink",
+        "Button"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Link",
+      "layer": "core",
+      "intent": "앱 라우터로 가는 링크",
+      "use": "부품을 만들 때 <a href> 대신. 앱이 LinkProvider 로 라우터를 꽂는다. 모양이 없다",
+      "avoid": "동작, 화면 글 안의 링크(색과 밑줄을 손으로 붙이지 않는다)",
+      "parts": {
+        "LinkProvider": "부품이 그리는 링크를 앱 라우터 링크로 바꾼다. 라우터 앱은 앱 뿌리에 하나. 없으면 <a> 라 누를 때마다 다시 읽는다"
+      },
+      "instead": [
+        "TextLink",
+        "Button"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "TextLink",
+      "layer": "core",
+      "intent": "글 안에서 다른 화면이나 문서로 간다",
+      "use": "quiet(기본): 사실 값, 안내 줄, 표 이름처럼 링크 색과 올렸을 때 밑줄로 충분할 때. prose: 문장 한가운데라 글과 같은 색에 밑줄을 늘 그릴 때(새 탭 ↗ 도 글자처럼 붙는다)",
+      "avoid": "판 머리의 이동 링크, 단추 모양의 이동, 동작",
+      "instead": [
+        "GoLink",
+        "ButtonLink",
+        "TextButton",
+        "Button"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "TextButton",
+      "layer": "core",
+      "intent": "글 줄 안에서 이 자리의 동작을 한다",
+      "use": "설명 줄의 \"다시 시도\"처럼 글 사이에 놓이는 작은 동작. 글자 크기는 놓인 줄을 따르고 밑줄이 늘 있다",
+      "avoid": "다른 곳으로 가기(링크다), 화면의 주된 동작, 표 줄 이름(줄 전체가 눌린다), 아이콘만 있는 도구, 접힌 긴 글의 \"더 보기\"(글과 단추를 같이 다는 부품이 있다)",
+      "instead": [
+        "TextLink",
+        "Button",
+        "ToolButton",
+        "MoreText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ToolButton",
+      "layer": "core",
+      "intent": "판 머리, 행 끝의 24 아이콘 도구",
+      "use": "더보기, 펼침, 편집처럼 글 없이 아이콘으로 아는 도구. 이름(aria-label)은 꼭",
+      "avoid": "화면의 주된 동작",
+      "instead": [
+        "Button"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ExpandToggle",
+      "layer": "core",
+      "intent": "표 줄 이름 앞에서 그 아래 줄들(팀 멤버, 오퍼레이션)을 펼치고 접는다",
+      "use": "접근 권한 표의 팀 줄, 서비스별 표의 서비스 줄처럼 줄 아래에 하위 줄이 열리는 자리. 이름(aria-label)은 펼칠 때와 접을 때 다르게. 펼칠 것이 없는 줄은 ExpandToggleSpace 로 시작선을 맞춘다",
+      "avoid": "글 덩어리 하나를 접어 두는 자리(설정 파일, 계산 근거), 판 머리의 도구",
+      "parts": {
+        "ExpandToggleSpace": "펼칠 것이 없는 줄의 같은 폭 빈 자리"
+      },
+      "instead": [
+        "Disclosure",
+        "ToolButton"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CopyText",
+      "layer": "core",
+      "intent": "복사할 값(ID, 주소, 명령)을 고정폭 글자와 복사 아이콘으로",
+      "use": "조직 ID, 서비스 엔드포인트처럼 읽고 복사하는 값. ID 는 size id(12). 아이콘은 값 끝 글자와 붙어 혼자 꺾이지 않는다. 단추가 줄 높이를 키우지 않아 키-값 줄에서 옆 값과 높이가 같다",
+      "avoid": "여러 줄 코드 예시, 값 없이 단추만 필요한 자리",
+      "instead": [
+        "CodeBlock",
+        "CopyButton"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "MachineText",
+      "layer": "core",
+      "intent": "기계가 만든 글자(키 앞자리, 오퍼레이션 ID, 스코프 이름)를 고정폭 12 로",
+      "use": "표 칸, 체크 상자 줄, 글 안에 놓이는 복사하지 않는 기계 값. 색은 둘레 글을 따른다. 띄어쓰기 없는 긴 이름(MCP 도구 이름, 경로)이 칸을 밀면 wrap 으로 아무 데서나 꺾는다",
+      "avoid": "복사할 ID 와 주소, 여러 줄 코드, 프로젝트 이름과 서비스 이름 같은 사람이 지은 이름",
+      "instead": [
+        "CopyText",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "NameText",
+      "layer": "core",
+      "intent": "사람이 지은 이름(프로젝트, 팀)을 짧은 하이픈 낱말 중간에서 꺾지 않는다",
+      "use": "표 이름 칸처럼 이름이 두 줄로 꺾일 수 있는 자리. \"test (Y-NEXT)\" 가 \"(Y-\" / \"NEXT)\" 로 읽히지 않게 16 글자까지의 하이픈 낱말은 통째로 다음 줄로",
+      "avoid": "기계가 만든 값, 주소, 한 줄로 자르는 칸",
+      "instead": [
+        "MachineText",
+        "UrlText",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "UrlText",
+      "layer": "core",
+      "intent": "좁은 칸의 긴 주소를 마디(/) 앞에서만 꺾는다",
+      "use": "정보 칸 엔드포인트, 레일의 MCP 주소처럼 다 보여야 하는 주소. 스킴과 호스트는 한 덩어리, 끝 복사 단추는 tail 로 마지막 마디와 묶는다. 주소가 아닌 글 끝 아이콘(새 탭 ↗, 경로 뒤 복사)이 혼자 다음 줄로 넘어가지 않게 하려면 TailText",
+      "avoid": "한 줄로 잘라 툴팁으로 보이는 표 칸 값(Table 의 TableClip), 여러 줄 코드, 기계 값 조각",
+      "parts": {
+        "TailText": "글 끝 아이콘이 혼자 다음 줄로 넘어가지 않게 묶는다"
+      },
+      "instead": [
+        "Table",
+        "CodeBlock",
+        "MachineText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Meta",
+      "layer": "core",
+      "intent": "글 옆이나 아래 옅은 덧말 한 조각(12 Ink 3)",
+      "use": "이름 뒤 이메일, 표 칸 둘째 줄(단가, 증액 요청 대기), 실행을 못 하는 까닭, 필수 표시, 표 칸의 빈 값 \"-\", 덧말 문장(승인자 안내), 라벨 + 명령 한 줄(안의 code 는 잉크). tight 는 표 칸 둘째 줄처럼 줄 높이 14. 좁은 자리의 한 줄 요약(폰 조건 요약)은 clip 으로 한 줄에 자르고 전체는 title",
+      "avoid": "판 머리 아래 판 설명, 카드 맨 아래 단서, 판이 비었다는 한 줄, 컨트롤 라벨, 표 이름 칸의 둘째 줄, 상태 문장, 한 줄에서 대상 이름만 줄이고 종류와 동작은 남겨야 하는 줄(clip 은 줄 전체를 자른다)",
+      "instead": [
+        "Note",
+        "EmptyState",
+        "Field",
+        "Table",
+        "StatusIndicator",
+        "ClipText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Lines",
+      "layer": "core",
+      "intent": "한 값을 이루는 짧은 줄 여럿을 한 줄에 하나씩 쌓는다",
+      "use": "키-값 값의 Owner 이름들, 표 칸의 값과 그 아래 덧말(tight 는 줄 사이 없이 이름 칸 높이, 숫자 칸 안에서는 줄마다 오른쪽 끝), Note 와 확인 창 안의 영향 줄. 줄마다 따로 읽히는 목록은 as=\"ul\"",
+      "avoid": "판 여럿을 쌓는 화면 본문, 판 안 덩어리 간격, 표 이름 칸의 둘째 줄, 낱말과 뜻의 짝, 이름을 쉼표로 잇는 한 줄",
+      "instead": [
+        "SectionStack",
+        "Container",
+        "Table",
+        "TermList",
+        "InlineList"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "InlineList",
+      "layer": "core",
+      "intent": "짧은 조각 여럿을 글 한 줄로 잇고 줄은 조각 사이에서만 바꾼다",
+      "use": "머리 메타의 Owner 이름(쉼표), 폰 이름 칸의 팀 / 가입 경로 / 프로젝트 수(separator \" / \"). 보조기기에는 항목 수가 있는 목록",
+      "avoid": "한 줄에 하나씩 쌓는 줄, 알약 여럿, 낱말과 뜻의 짝",
+      "instead": [
+        "Lines",
+        "Badge",
+        "TermList"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Prose",
+      "layer": "core",
+      "intent": "마크다운으로 쓴 문서를 읽는 글로",
+      "use": "서비스 문서, 안내 문서처럼 제목, 목록, 코드가 섞인 긴 글(그린 요소를 감싼다)",
+      "avoid": "판 머리 아래 한두 줄 설명, 여러 줄 코드만 있는 칸",
+      "instead": [
+        "Note",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "PlainText",
+      "layer": "core",
+      "intent": "사람이 쓴 원문 글을 원문 줄바꿈 그대로",
+      "use": "서비스 정의의 설명(매개변수, 스키마 필드)처럼 줄바꿈으로 목록을 적은 짧은 원문. 긴 주소는 칸 안에서 꺾는다. 글자 크기와 색은 놓인 자리를 따른다",
+      "avoid": "마크다운으로 쓴 문서, 기계가 만든 값, 대개 짧지만 가끔 긴 글",
+      "instead": [
+        "Prose",
+        "MachineText",
+        "MoreText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ClipText",
+      "layer": "core",
+      "intent": "한 줄 글에서 한 조각(대상 이름)만 말줄임하고 앞뒤 글은 남긴다",
+      "use": "레일 최근 활동 줄(\"API 키 {이름} 생성\")처럼 좁은 자리에서 종류와 동작은 늘 보여야 하는 한 줄. 전체는 툴팁(누가 했는지 덧붙일 때 title)",
+      "avoid": "표 칸 안 긴 값, 다 보여야 하는 주소, 줄 수를 정해 펴는 긴 글, 덧말 한 줄 전체를 자르면 되는 요약",
+      "instead": [
+        "Table",
+        "UrlText",
+        "MoreText",
+        "Meta"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "MoreText",
+      "layer": "core",
+      "intent": "긴 글을 정한 줄 수(기본 2)까지 보이고 \"더 보기\"로 그 자리에서 편다",
+      "use": "필드 설명처럼 대개 짧지만 가끔 길어 줄마다 높이가 달라지는 글. 넘칠 때만 마지막 줄 끝이 흐려지고 단추가 선다. 글자 크기, 줄 높이, 색은 놓인 자리를 따른다",
+      "avoid": "줄 전체가 눌리는 카드나 표 줄의 요약(펴면 줄 높이가 흔들린다, 말줄임과 title), 대부분은 안 보고 넘어가는 덧붙임 덩어리, 마크다운 문서",
+      "instead": [
+        "LinkCard",
+        "Disclosure",
+        "Prose"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CopyBox",
+      "layer": "core",
+      "intent": "값 하나를 회색 칸에 다 보이고 오른쪽 위에서 복사한다",
+      "use": "만든 뒤 한 번 보이는 키와 시크릿(P13), 연결 주소(MCP 주소, SCIM Base URL), DNS 레코드 값처럼 옮겨 적거나 붙여 넣는 긴 값. 받는 동안은 value 없이 자리만",
+      "avoid": "글 줄 안의 ID, 엔드포인트(값 끝에 아이콘), 여러 줄 코드 예시",
+      "rule": "P13",
+      "instead": [
+        "CopyText",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CopyButton",
+      "layer": "core",
+      "intent": "값 옆에서 복사하는 단추 하나",
+      "use": "값을 직접 그려야 해서 CopyText 로 못 담는 자리. 1.5초 \"복사됨\"",
+      "avoid": "보통의 ID, 주소 값(CopyText 가 글자와 단추를 같이 맞춘다), 코드 예시 블록",
+      "instead": [
+        "CopyText",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "WithReason",
+      "layer": "core",
+      "intent": "못 하는 동작을 막고 이유를 보인다",
+      "use": "권한이 없거나 상태 때문에 못 하는 단추, 탭, 고르기. 숨기지 않는다",
+      "avoid": "볼 권한이 없는 데이터(그리지 않는다), 꺼진 기능을 켜면 생길 화면 덩어리",
+      "instead": [
+        "LockedPreview"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "LockedPreview",
+      "layer": "core",
+      "intent": "꺼진 기능을 켜면 생길 화면을 실제 라벨로 흐리게 잠가 미리 보인다",
+      "use": "꺼진 기능 화면 아래 개요 지표와 표 머리. 누르거나 고르거나 초점을 줄 수 없고 보조기기는 건너뛴다. 왜 잠겼는지와 켜는 길은 바로 위에 글로 둔다. 안의 표는 TableEmpty 한 줄로 언제 채워지는지 말하고, 칸 폭은 고르게 나뉜다",
+      "avoid": "못 하는 단추 하나(이유를 보인다), 받는 동안의 자리(뼈대), 볼 권한이 없는 데이터(그리지 않는다)",
+      "instead": [
+        "WithReason",
+        "SkeletonRows"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Form",
+      "layer": "core",
+      "intent": "설정 판 안 입력 칸과 저장 줄을 한 폼으로 쌓는다(입력 폭 560 까지)",
+      "use": "조직 설정 일반, 조직 한도처럼 오래 두고 고치는 설정 판의 폼. 칸은 Field, 저장 줄은 FormActions",
+      "avoid": "창 안 입력(창 폭을 다 쓴다), 표 위 거르기 줄, 판 여럿을 쌓는 화면 본문",
+      "rule": "P12",
+      "instead": [
+        "Modal",
+        "CollectionFilter",
+        "SectionStack"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "FormActions",
+      "layer": "core",
+      "intent": "폼 아래 저장 단추와 저장한 결과 한 줄",
+      "use": "설정 화면의 저장 줄(단추는 폼 왼쪽 끝 하나), 판 안 입력 칸 아래 저장. 결과는 status, 실패는 children",
+      "avoid": "창 발의 단추(창이 정한다), 표 줄 동작",
+      "rule": "P12",
+      "instead": [
+        "Modal",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "FieldGroup",
+      "layer": "core",
+      "intent": "고르기 여럿을 한 이름으로 묶는다",
+      "use": "체크 상자나 라디오 묶음(허용 스코프, 유형), 같은 입력 줄을 늘려 가는 묶음(구독 창 무료 제공량), 폰 조건 시트처럼 이름 아래 고르기 컨트롤(Segmented, Select, 필터 칩 줄)을 두는 자리. 고르기는 제 폭, 글 칸이 든 줄은 묶음 폭을 채운다. 제목 오른쪽에 옅은 덧말(선택 수)",
+      "avoid": "컨트롤 하나의 라벨, 판 제목",
+      "instead": [
+        "Field",
+        "Card"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Field",
+      "layer": "core",
+      "intent": "입력 칸의 라벨, 도움말, 오류",
+      "use": "Input, Textarea, Select, Combobox 를 감싼다. 도움말 줄 오른쪽 끝에 관련 동작 하나(helpAction, 값을 만드는 곳으로 가는 링크). 칸 바로 옆 동작 하나(action, 제안 값 넣기). 칸 여럿인 한 줄의 오류는 그 줄 아래 FieldError",
+      "avoid": "체크 상자와 라디오 한 줄(제 라벨을 가진다)",
+      "parts": {
+        "FieldError": "입력 오류 한 줄"
+      },
+      "instead": [
+        "Checkbox",
+        "RadioGroup"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Input",
+      "layer": "core",
+      "intent": "한 줄 글 입력",
+      "use": "이름, 주소, 금액",
+      "avoid": "여러 줄 글, 정해진 값 중 고르기",
+      "instead": [
+        "Textarea",
+        "Select",
+        "Combobox"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CodeInput",
+      "layer": "core",
+      "intent": "메일이나 문자로 받은 한 번 쓰는 숫자 코드를 자리마다 상자에 친다",
+      "use": "로그인 코드 확인, 2단계 인증 코드. 입력은 한 칸이라 붙여넣기와 자동 채움(one-time-code)을 그대로 받는다. 서버가 거절한 코드는 invalid(상자마다 진홍). 도움말과 오류 한 줄은 칸 아래에 Meta, FailLine 으로",
+      "avoid": "글자가 섞인 키나 긴 토큰, 자리 수가 정해지지 않은 값",
+      "instead": [
+        "Input"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Textarea",
+      "layer": "core",
+      "intent": "여러 줄 글 입력",
+      "use": "설명, 요청 사유. 고쳐 보내는 JSON 본문은 wrap=\"off\" 로 꺾지 않고 민다(끝 흐림과 늘 보이는 스크롤바는 코드 블록과 같다)",
+      "avoid": "한 줄 값, 읽고 복사만 하는 코드",
+      "instead": [
+        "Input",
+        "CodeBlock"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Select",
+      "layer": "core",
+      "intent": "정해진 값 몇 개 중 하나를 고른다",
+      "use": "역할, 서비스, 기간처럼 목록이 짧고 찾을 필요가 없을 때. 닫힌 칸이 목록 항목과 다른 글을 보이면 valueLabel(Playground 오퍼레이션 고르기: 칸은 전체 주소, 목록은 경로와 이름). 화면 머리 단계 줄(Playground 주소 줄)은 Button 과 같이 size head(폰 36)",
+      "avoid": "사람이나 그룹처럼 길어서 찾아야 하는 목록, 둘셋 중 늘 보이게 고르기",
+      "instead": [
+        "Combobox",
+        "Segmented"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "SelectText",
+      "layer": "core",
+      "intent": "고르기(Select sm)가 올 자리에 바꿀 수 없는 값을 글로",
+      "use": "표 줄의 역할 칸에서 본인 줄, 바꿀 권한이 없는 줄. 알약 글과 시작선, 크기, 굵기가 같다",
+      "avoid": "바꿀 수 있는 값, 고르기가 없는 칸의 보통 글",
+      "instead": [
+        "Select",
+        "Table"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Combobox",
+      "layer": "core",
+      "intent": "긴 목록에서 쳐서 찾아 고른다",
+      "use": "멤버 추가의 사람, 디렉터리 그룹. 칠 때마다 창이 오르내리면 안 되는 자리(멤버 추가 창)는 steady 로 펼친 목록 높이를 고정. 수백 개인 목록은 rank 로 맞는 것을 위로(이름이 친 글로 시작하면 먼저), limit 로 보이는 줄 수를 줄이고 나머지 수를 한 줄로",
+      "avoid": "짧은 목록",
+      "instead": [
+        "Select"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Segmented",
+      "layer": "core",
+      "intent": "둘에서 다섯 값 중 하나를 늘 보이게 고른다",
+      "use": "기간(이번 달, 지난달), 코드 예시 언어. 창 맨 위 대상 고르기(멤버, 팀)와 폰 기간 줄은 fill 로 폭을 채우고 칸을 고르게 나눈다",
+      "avoid": "다른 보기로 옮겨 가기, 값이 많을 때",
+      "rule": "P18",
+      "instead": [
+        "Tabs",
+        "Select"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Checkbox",
+      "layer": "core",
+      "intent": "켜고 끄는 선택 하나, 또는 여러 개 고르기",
+      "use": "폼 안의 동의, 여러 항목 고르기. 저장을 눌러야 반영된다",
+      "avoid": "누르는 즉시 반영되는 설정",
+      "instead": [
+        "Switch"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "RadioGroup",
+      "layer": "core",
+      "intent": "설명이 붙은 몇 개 중 하나를 고른다",
+      "use": "선택지마다 한 줄 설명이 필요한 폼",
+      "avoid": "설명 없는 짧은 값",
+      "parts": {
+        "Radio": "라디오 하나"
+      },
+      "instead": [
+        "Segmented",
+        "Select"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Switch",
+      "layer": "core",
+      "intent": "누르는 즉시 켜지고 꺼지는 설정",
+      "use": "알림 받기처럼 저장 단추 없이 바로 반영되는 것",
+      "avoid": "폼 안에서 저장과 함께 반영되는 선택",
+      "instead": [
+        "Checkbox"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Modal",
+      "layer": "core",
+      "intent": "입력 몇 개로 만들거나 고친다",
+      "use": "만들기, 편집(입력 1~4 묶음, P12), 만든 뒤 한 번 보여 주는 비밀 값(P13). 고를 것이 없는 창(팀 연결의 팀 없음)은 ModalBody 안에 EmptyState 를 그대로 두고, 위아래 여백은 몸통이 뺀다. 창 발 왼쪽 끝 창 밖으로 가는 링크 하나(전체 안내)는 ModalFooter start",
+      "avoid": "삭제와 연결 해제 확인, 읽기만 하는 긴 상세",
+      "parts": {
+        "ModalBody": "창 몸통. 길면 몸통만 넘긴다",
+        "ModalFooter": "창 발: 단추, 막힌 까닭",
+        "ModalClose": "창을 닫는 단추(취소)"
+      },
+      "rule": "P12",
+      "instead": [
+        "ConfirmModal",
+        "Sheet"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ConfirmModal",
+      "layer": "core",
+      "intent": "되돌리기 어려운 동작을 확인한다",
+      "use": "삭제, 연결 해제. 세기는 일반 확인과 이름 입력 확인 둘",
+      "avoid": "되돌릴 수 있는 동작(바로 하고 토스트)",
+      "parts": {
+        "ConfirmField": "대상 이름을 그대로 쳐야 결정 단추가 켜지는 칸"
+      },
+      "rule": "P14",
+      "instead": [
+        "ToastProvider"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Sheet",
+      "layer": "core",
+      "intent": "화면을 떠나지 않고 한 항목의 상세를 오른쪽에서 본다",
+      "use": "청구서 줄, 긴 상세(SheetSection 덩이). 폰에서 조건 고르기 여럿을 담는 바닥 시트(사용량 탐색 조건)는 SheetBody stack 으로 몸통이 여백과 사이 간격을 준다",
+      "avoid": "입력 몇 개짜리 만들기와 편집",
+      "parts": {
+        "SheetBody": "시트 몸통. 남는 높이에서 스크롤",
+        "SheetSection": "시트 안 근거 한 덩이(제목과 메타)",
+        "SheetFooter": "시트 발: 결정 단추와 누가 하는지",
+        "SheetClose": "시트를 닫는 단추"
+      },
+      "instead": [
+        "Modal"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Popover",
+      "layer": "core",
+      "intent": "누른 자리 아래 짧은 설명",
+      "use": "용어나 계산 방법 설명 창(340 폭)",
+      "avoid": "입력 폼, 메뉴",
+      "parts": {
+        "PopoverTitle": "팝오버 안 옅은 제목 라벨",
+        "PopoverSection": "팝오버 안 선으로 나눈 덩이",
+        "PopoverActions": "팝오버 아래 행동 줄",
+        "PopoverClose": "팝오버를 닫는 단추"
+      },
+      "instead": [
+        "Modal",
+        "Menu"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Menu",
+      "layer": "core",
+      "intent": "동작 몇 개 중 하나를 고르는 메뉴",
+      "use": "행 끝 더보기, 계정 메뉴. 표 줄 끝 동작은 RowMenu 하나(TableRowEnd reveal=\"always\" 안)",
+      "avoid": "값 고르기, 설명",
+      "parts": {
+        "MenuItem": "메뉴 항목 하나. 못 쓰면 이유를 둘째 줄에",
+        "MenuSeparator": "메뉴 안 구분선",
+        "RowMenu": "표 줄 끝 더보기(⋯). 줄 이름으로 도구(\"{name} 동작\")와 메뉴(\"{name} 메뉴\")의 이름을 짓는다"
+      },
+      "instead": [
+        "Select",
+        "Popover"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Tooltip",
+      "layer": "core",
+      "intent": "아이콘이나 줄인 글의 이름을 올려 보인다",
+      "use": "아이콘 단추의 이름, 말줄임된 값",
+      "avoid": "꼭 읽어야 하는 정보, 못 하는 이유(WithReason 이 보인다)",
+      "parts": {
+        "TooltipGroup": "이웃한 툴팁 무리. 옮길 때 기다림 없이 바뀐다"
+      },
+      "instead": [
+        "Note",
+        "WithReason"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "TipText",
+      "layer": "core",
+      "intent": "짧은 글에 덧말 한 줄을 숨긴다(점선 밑줄, 올리거나 초점이면 툴팁)",
+      "use": "집계 시각처럼 무엇으로 센 값인지 덧붙일 글. 키보드로 열리고 보조기기는 덧말까지 읽는다",
+      "avoid": "아이콘 단추의 이름, 꼭 읽어야 하는 정보, 열 머리나 제목 뒤 (i) 설명",
+      "instead": [
+        "Tooltip",
+        "Note",
+        "InfoTip"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "InfoTip",
+      "layer": "core",
+      "intent": "글(열 머리, 제목, 수) 뒤 (i) 단추로 그 글의 설명 한 줄을 연다",
+      "use": "팀 역할 열 머리의 역할 뜻, \"Owner 2명\"처럼 수만 보이는 글의 이름들. 올리거나 초점이면 열리고, 보조기기는 설명까지 읽는다",
+      "avoid": "짧은 글에 덧말을 점선 밑줄로 숨길 때, 아이콘 단추의 이름, 꼭 읽어야 하는 정보, 용어나 계산 방법의 긴 설명",
+      "instead": [
+        "TipText",
+        "Tooltip",
+        "Note",
+        "Popover"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ToastProvider",
+      "layer": "core",
+      "intent": "방금 한 동작의 결과를 알린다",
+      "use": "만들기, 삭제, 역할 변경 뒤 한 줄(P15). 앱 뿌리에 한 번 두고 훅(useToast)으로 띄운다. 그리기 밖(데이터 훅의 요청 끝)에서는 showToast",
+      "avoid": "저장 실패처럼 그 자리에서 고쳐야 하는 오류",
+      "rule": "P15",
+      "instead": [
+        "FailState"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "TimeSeriesChart",
+      "layer": "core",
+      "intent": "여러 계열의 시간에 따른 변화",
+      "use": "사용량 탐색(서비스별, 오퍼레이션별)",
+      "avoid": "하루 막대 한 계열, 숫자 곁 작은 추이",
+      "parts": {
+        "ChartLegend": "차트 계열 범례. 주면 계열을 끄고 켜는 단추"
+      },
+      "rule": "P10",
+      "instead": [
+        "BarChart",
+        "Sparkline"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ChartHead",
+      "layer": "core",
+      "intent": "판 안 차트 위 한 줄: 차트 이름(13 Ink 3)과 오른쪽 범례",
+      "use": "판 안에 차트가 덩어리로 놓일 때(주인공 판의 일별 차트, 탐색 화면의 추이 차트). 받는 동안은 제목 자리에 뼈대(as div). 범례가 길면 다음 줄로 내려간다. 판이 이미 차트를 말하는 자리는 title 없이 범례만 오른쪽 끝에",
+      "avoid": "판 머리(판 제목), 판 안 글 덩어리의 이름, 막대 하나의 비중 라벨",
+      "instead": [
+        "Container",
+        "SubHead"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "BarChart",
+      "layer": "core",
+      "intent": "하루 단위 막대(쌓기, 진행 중인 오늘, 예상)",
+      "use": "일별 값(쌓은 항목별 몫). 계열이 둘 이상이면 ChartLegend 를 같이 둔다",
+      "avoid": "누적 값과 기준선",
+      "instead": [
+        "LineChart"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "LineChart",
+      "layer": "core",
+      "intent": "누적 선과 기준선(한도)",
+      "use": "기간 안 누적 값, 한도 도달 예상",
+      "avoid": "하루 단위 값",
+      "instead": [
+        "BarChart"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Sparkline",
+      "layer": "core",
+      "intent": "숫자 곁 작은 추이",
+      "use": "대시보드 숫자 옆, 표의 추이 칸. 축 없음",
+      "avoid": "값을 읽어야 하는 차트",
+      "instead": [
+        "TimeSeriesChart"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "ChartSkeleton",
+      "layer": "core",
+      "intent": "차트를 받는 동안의 뼈대",
+      "use": "모든 차트 자리",
+      "avoid": "표, 판",
+      "instead": [
+        "SkeletonRows"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "CodeBlock",
+      "layer": "core",
+      "intent": "복사해 쓰는 코드 예시",
+      "use": "호출 예시, 설정 조각. 비밀 값은 앞만 보이고 복사는 온전하게. 받는 동안은 loading 에 받은 뒤와 같은 줄 수의 자리 코드(높이를 잡고 글자는 가린다). 좁은 칸(요약 레일)은 wrap=\"always\" 로 칸 안에서 감싼다",
+      "avoid": "값 하나(ID, 키)",
+      "instead": [
+        "CopyText"
+      ],
+      "import": "@yanolja-next/design-core"
+    },
+    {
+      "name": "Icon",
+      "layer": "core",
+      "intent": "선 1.5 아이콘",
+      "use": "단추, 상태, 메뉴 안. 글과 함께",
+      "avoid": "로고 마크(글자 NEXT Hub 만 쓴다), 꾸밈 그림",
+      "parts": {
+        "SwapIcon": "상태에 따라 바뀌는 아이콘(복사 → 체크)"
+      },
+      "import": "@yanolja-next/design-core"
+    }
+  ]
+}