@infomind-ux/infoux-mcp 0.1.0 → 0.2.0

package/data/rules.json

@@ -775,6 +775,140 @@
           "note": "모션 최소화 선호 시 정지"
         }
       ]
+    },
+    {
+      "id": "R-23",
+      "category": "html",
+      "summary": "가짜 콘텐츠 금지 — lorem ipsum·자리 채움 문구·placeholder 핫링크",
+      "severity": "error",
+      "enforcement": [
+        "check-violations.js"
+      ],
+      "lang": "html",
+      "rationale": "시안·납품물에 채움 콘텐츠가 남으면 검수 신뢰가 깨지고, placeholder 이미지 핫링크는 외부 서비스 의존이라 납품 self-contained 정책과도 이중으로 충돌한다. 콘텐츠가 미확정이면 task contract의 contentSources로 실제 용어·문서 출처를 먼저 확보하고, 이미지는 실제 자산 경로 또는 실제 비율의 data-uri 표기를 쓴다.",
+      "bad": [
+        {
+          "code": "<p>Lorem ipsum dolor sit amet</p>",
+          "note": "영문 채움 텍스트"
+        },
+        {
+          "code": "<p>여기에 설명 텍스트가 들어갑니다</p>",
+          "note": "한글 자리 채움 문구"
+        },
+        {
+          "code": "<img src=\"https://placehold.co/300x200\" alt=\"\">",
+          "note": "placeholder 핫링크 — self-contained 정책과 이중 위반"
+        }
+      ],
+      "good": [
+        {
+          "code": "<p>독서문화 프로그램은 매월 첫째 주 월요일부터 신청을 받습니다.</p>",
+          "note": "실제 서비스 문안 (contentSources 기반)"
+        },
+        {
+          "code": "<img src=\"/images/program-reading.jpg\" alt=\"독서문화 프로그램 진행 모습\">",
+          "note": "실제 자산 경로 + 의미 있는 alt"
+        }
+      ],
+      "refs": [
+        "references/art-direction.md",
+        "contracts/task-contract.schema.json"
+      ]
+    },
+    {
+      "id": "R-24",
+      "category": "css",
+      "summary": "한글 조판 하한 — keep-all 존재 필수·leading-none 금지·line-height 1.5 미만 경고",
+      "severity": "error",
+      "enforcement": [
+        "check-violations.js"
+      ],
+      "rationale": "한글은 단어 중간 줄바꿈(keep-all 부재)과 좁은 행간에서 가독성이 급락한다. reset 계층(3-generic/reset.css)의 word-break: keep-all 부재와 HTML의 leading-none 클래스는 error, CSS line-height 1.5 미만은 warn으로 검출한다. 임계값 1.5의 정본은 contracts/art-direction.json hangul.bodyLineHeight.lintFloor이며 단위 테스트가 동일성을 강제한다. badge·tag·btn처럼 한 줄로 고정되는 단행 컴포넌트 CSS 파일은 예외다.",
+      "bad": [
+        {
+          "code": "p { line-height: 1.3; }",
+          "note": "본문 하한(1.5) 미만 — warn"
+        },
+        {
+          "code": "/* 3-generic/reset.css에 word-break: keep-all 부재 */",
+          "note": "한글 조판 기본값 누락 — error"
+        }
+      ],
+      "good": [
+        {
+          "code": "body {\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  line-height: 1.7;\n}",
+          "note": "한글 조판 기본값 (3-generic/reset.css 소유)"
+        },
+        {
+          "code": ".badge { line-height: 1; }",
+          "note": "단행 컴포넌트 예외 — badge·tag·btn"
+        }
+      ],
+      "refs": [
+        "contracts/art-direction.json",
+        "references/art-direction.md",
+        "src/styles/3-generic/reset.css"
+      ]
+    },
+    {
+      "id": "R-25",
+      "category": "html",
+      "summary": "섹션 리듬 — 동일 archetype 3연속·카드 중첩 금지, 카드 그리드 남발 경고",
+      "severity": "error",
+      "enforcement": [
+        "check-html-structure.js"
+      ],
+      "lang": "html",
+      "rationale": "\"중앙 제목 + 카드 그리드\" 반복은 규정 준수형 무개성의 최빈 패턴이다. 형제 section 시퀀스에서 동일 archetype(section--X) 3연속과 카드 안 카드 중첩은 error, 카드 그리드 섹션(같은 부모 아래 직계 .card 3개 이상)의 페이지당 3개 이상 또는 연속 배치는 warn으로 검출한다. 대체 패턴은 5-objects의 section-media(이미지-텍스트 교차)·hero-bleed(풀블리드 인트로)와 src/snippets/signature.md의 시그니처 요소가 공급한다.",
+      "bad": [
+        {
+          "code": "<main id=\"main\">\n  <section class=\"section section--list\">…</section>\n  <section class=\"section section--list\">…</section>\n  <section class=\"section section--list\">…</section>\n</main>",
+          "note": "동일 archetype 3연속 — 연속 상한 2"
+        },
+        {
+          "code": "<article class=\"card\">\n  <article class=\"card\">…</article>\n</article>",
+          "note": "카드 안 카드 중첩"
+        }
+      ],
+      "good": [
+        {
+          "code": "<main id=\"main\">\n  <section class=\"section section--intro hero-bleed\">…</section>\n  <section class=\"section section--list\">…</section>\n  <section class=\"section section--content\">\n    <div class=\"container\">\n      <div class=\"section-media\">…</div>\n    </div>\n  </section>\n</main>",
+          "note": "archetype 교차 + 변주 패턴 삽입"
+        }
+      ],
+      "refs": [
+        "references/art-direction.md",
+        "src/snippets/section-media.md",
+        "src/snippets/hero-bleed.md",
+        "src/snippets/signature.md"
+      ]
+    },
+    {
+      "id": "R-26",
+      "category": "css",
+      "summary": "폰트 스택 한글 fallback 필수 — --font-sans·--font-heading에 한글 가용 폰트 포함",
+      "severity": "error",
+      "enforcement": [
+        "build-tokens.js"
+      ],
+      "rationale": "영문 전용 폰트 스택은 한글이 시스템 기본 폰트로 떨어져 fallback 미설계 조판이 된다. scripts/lib/token-source.js가 build:tokens·check:presets 경로에서 --font-sans·--font-heading 값에 한글 가용 폰트(Pretendard·Noto Sans/Serif KR·Wanted Sans 등) 포함을 강제하며, 미포함이면 빌드가 실패한다. 미정의 슬롯은 하위호환으로 통과한다.",
+      "bad": [
+        {
+          "code": "--font-sans: 'Inter', sans-serif;",
+          "note": "한글 가용 폰트 없음 — build:tokens 실패"
+        }
+      ],
+      "good": [
+        {
+          "code": "--font-sans: 'Pretendard GOV', Pretendard, 'Apple SD Gothic Neo', sans-serif;",
+          "note": "한글 가용 폰트 + 시스템 폴백"
+        }
+      ],
+      "refs": [
+        "scripts/lib/token-source.js",
+        "tokens/brand.json",
+        "contracts/art-direction.json"
+      ]
     }
   ]
 }

package/data/snippets/hero-bleed.md

@@ -0,0 +1,45 @@
+# 히어로 블리드 (Hero Bleed) — 풀블리드 인트로 패턴
+
+화면 가로 전체를 쓰는 도입 섹션이다. section 자체에 클래스를 얹어 쓰고, 내부 `.container`가 본문 폭을 잡는다. 배경 이미지 위에 텍스트를 얹을 때는 `--scrim`을 함께 쓴다.
+
+## 기본 마크업
+
+```html
+<section class="section section--intro hero-bleed hero-bleed--scrim" aria-labelledby="intro-title">
+  <div class="hero-bleed__media">
+    <img class="hero-bleed__img" src="/images/hero-harbor.jpg" alt="">
+  </div>
+  <div class="container hero-bleed__content">
+    <h1 class="hero-bleed__title" id="intro-title">항구도시 문화재단</h1>
+    <p class="hero-bleed__desc">공연·전시·교육 프로그램을 한곳에서 찾고 신청할 수 있습니다.</p>
+    <div class="hero-bleed__actions">
+      <a class="btn btn--primary btn--large" href="/program">프로그램 신청</a>
+      <a class="btn btn--secondary btn--large" href="/space">공간 대관 안내</a>
+    </div>
+  </div>
+</section>
+```
+
+## Variant
+
+- `.hero-bleed` — 기본 (배경색 `--color-bg-inverse` 위 흰 텍스트)
+- `.hero-bleed--scrim` — 배경 이미지 위 단색 스크림(alpha-black-50). 이미지 위 텍스트는 반드시 이 변형과 함께 쓴다
+
+## 사용 조건
+
+- 페이지당 1회, 문서 최상단 도입 구간 전용 — 본문 중간에 반복하지 않는다
+- 공공서비스 프로필은 장식 hero를 화면 1/2 이하로 유지한다 (`contracts/profiles.json` rhythm)
+- CMS·관리자 프로필은 hero 없음 — 이 패턴을 쓰지 않는다
+- 배경 영상 hero는 표현 등급 expressive + task contract 근거가 전제다 (references/art-direction.md §1)
+
+## 접근성
+
+- 배경 이미지는 장식이다 — `alt=""` 고정. 의미 있는 이미지는 본문 콘텐츠로 옮긴다
+- 텍스트 대비 4.5:1은 스크림 위에서 실측한다 — 스크림 없이 이미지 위 텍스트 금지
+- 제목이 섹션의 접근 가능한 이름이 되도록 `aria-labelledby`로 연결한다
+
+## 출처
+
+- 높이·간격은 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- CSS: `src/styles/5-objects/hero-bleed.css`
+- 이미지 트리트먼트·스크림 기준: `references/art-direction.md` §7

package/data/snippets/section-media.md

@@ -0,0 +1,61 @@
+# 섹션 미디어 (Section Media) — 이미지-텍스트 교차 패턴
+
+동일 archetype 연속(R-25)을 끊는 변주 패턴이다. 태블릿 이상에서 이미지와 본문이 2컬럼으로 나란히 서고, `--reverse`로 좌우를 교차해 zigzag 리듬을 만든다.
+
+## 기본 마크업
+
+```html
+<section class="section section--content" aria-labelledby="walk-title">
+  <div class="container">
+    <div class="section-media">
+      <div class="section-media__media">
+        <img class="section-media__img" src="/images/course-haean.jpg" alt="해안 산책로를 걷는 방문객">
+      </div>
+      <div class="section-media__body">
+        <p class="section-media__eyebrow">추천 코스</p>
+        <h2 class="section-media__title" id="walk-title">해안 산책로 3.2km</h2>
+        <p class="section-media__desc">방파제에서 등대까지 이어지는 완만한 코스입니다. 휠체어·유아차 통행이 가능하며, 중간 쉼터 2곳에 그늘막이 있습니다.</p>
+        <div class="section-media__actions">
+          <a class="btn btn--primary" href="/course/haean">코스 안내</a>
+          <a class="btn btn--tertiary" href="/course/haean/map">지도 내려받기</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+## Variant
+
+- `.section-media` — 기본 (모바일 세로 스택 → 태블릿 이상 미디어|본문)
+- `.section-media--reverse` — 미디어를 오른쪽에 배치. DOM 순서는 그대로라 읽기 순서가 보존된다
+
+```html
+<div class="section-media section-media--reverse">
+  <div class="section-media__media">
+    <img class="section-media__img" src="/images/course-oreum.jpg" alt="오름 정상에서 내려다본 풍경">
+  </div>
+  <div class="section-media__body">
+    <h2 class="section-media__title">오름 전망 코스</h2>
+    <p class="section-media__desc">정상까지 40분. 일몰 1시간 전 출발을 권장합니다.</p>
+  </div>
+</div>
+```
+
+## 사용 조건
+
+- 연속 배치는 1왕복(기본 → `--reverse`)까지만 — 전 섹션 교차는 그 자체로 단조롭다 (references/art-direction.md §5)
+- 이미지 비율은 4:3 기본. 같은 페이지 안에서 비율을 섞지 않는다
+- 첫 콘텐츠 섹션은 1순위 과업이 차지한다 — 이 패턴은 소개·안내 구간에 쓴다
+
+## 접근성
+
+- 이미지 `alt`는 장면을 설명한다. 장식이면 `alt=""`
+- 제목(`__title`)이 섹션의 접근 가능한 이름이 되도록 `aria-labelledby`로 연결한다
+- `--reverse`는 시각 순서만 바꾼다 — 키보드·스크린리더 순서는 DOM 순서(미디어 → 본문) 그대로다
+
+## 출처
+
+- 간격·타이포는 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- CSS: `src/styles/5-objects/section-media.css`
+- 리듬 원칙: `references/art-direction.md` §5

package/data/snippets/signature.md

@@ -0,0 +1,107 @@
+# 시그니처 요소 (Signature) — 실물 3패턴
+
+"이 사이트만의 것"으로 기억되는 반복 장치 3패턴이다. 등급별 상한(utility 0 · restrained 1 · expressive 3)은 `contracts/art-direction.json` expressionLevels가 정본이고, 선정·배치 원칙은 `references/art-direction.md` §6을 따른다. 아래 CSS는 프로젝트별 스타일 확장 슬롯에 추가한다 — 색은 전부 토큰 경유(R-01), 데코 텍스트·패턴은 스크린리더에서 숨긴다.
+
+## 1. 타이포 모티프
+
+브랜드 키워드를 크게 깔아 섹션 도입의 정체성을 만든다. 장식이므로 `aria-hidden="true"` 필수.
+
+```html
+<section class="section section--intro" aria-labelledby="festival-title">
+  <div class="container">
+    <p class="motif" aria-hidden="true">바다</p>
+    <h1 id="festival-title">항구도시 등대 축제</h1>
+    <p>10월 셋째 주, 방파제 일대에서 열립니다.</p>
+  </div>
+</section>
+```
+
+```css
+/* 타이포 모티프 — 헤딩 폰트 토큰(--font-heading) 사용, 옅은 브랜드색으로 뒤에 깐다 */
+.motif {
+  @apply absolute [z-index:-1] select-none pointer-events-none m-0;
+  font-family: var(--font-heading);
+  font-size: 16rem;
+  font-weight: 700;
+  line-height: 1; /* 단행 장식 — 본문 하한(R-24)과 무관한 display 전용 값 */
+  letter-spacing: -0.03em;
+  color: var(--color-primary-5);
+}
+```
+
+- 페이지당 1곳, hero·인트로 구간 한정. 본문 문단 사이에 끼우지 않는다
+- 고대비 모드에서 본문을 가리지 않는지 확인한다 — 겹침이 생기면 opacity가 아니라 위치를 조정한다
+
+## 2. 커스텀 구분선
+
+섹션 경계의 기본 `border` 대신 브랜드 형태를 가진 구분선을 쓴다. mask + 배경색 토큰 조합이라 색 변경이 토큰으로 따라온다.
+
+```html
+<hr class="divider divider--wave" aria-hidden="true">
+```
+
+```css
+/* 커스텀 구분선 — SVG는 mask로만 쓰고 색은 토큰이 소유한다 */
+.divider {
+  @apply border-0 mx-auto my-[4.8rem];
+  width: 12rem;
+  height: 1.2rem;
+  background-color: var(--color-primary-40);
+}
+
+.divider--wave {
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 T90 6 T120 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 T90 6 T120 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+```
+
+- 형태는 사이트당 1종으로 고정한다 — 페이지마다 다른 구분선은 시그니처가 아니라 소음이다
+- `<hr>`는 의미 구분이 필요한 자리에만. 순수 장식 위치면 `<div class="divider" aria-hidden="true">`
+
+## 3. 배경 패턴 (SVG data-uri)
+
+섹션 배경에 반복 패턴을 옅게 깐다. 외부 이미지 없이 data-uri 하나로 끝나 납품 self-contained 정책과 맞고, mask 방식이라 패턴색도 토큰이 소유한다.
+
+```html
+<section class="section section--content section-pattern" aria-labelledby="notice-title">
+  <div class="container">
+    <h2 id="notice-title">이용 안내</h2>
+    <p>대관 신청은 이용일 14일 전까지 접수합니다.</p>
+  </div>
+</section>
+```
+
+```css
+/* 배경 패턴 — 도트 그리드. 패턴층은 ::before로 분리해 본문 대비에 영향을 주지 않는다 */
+.section-pattern {
+  @apply relative;
+}
+
+.section-pattern::before {
+  @apply content-[''] absolute inset-0 [z-index:-1] pointer-events-none;
+  background-color: var(--color-primary);
+  opacity: 0.06;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='2' fill='black'/%3E%3C/svg%3E") repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='2' fill='black'/%3E%3C/svg%3E") repeat;
+}
+```
+
+패턴 형태만 바꾸는 mask용 SVG 변형 2종 — 색·투명도 규칙은 동일하다.
+
+| 형태 | mask용 data-uri |
+|------|-----------------|
+| 사선 해칭 | `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-2 14 14 -2M-2 2 2 -2M10 14 14 10' stroke='black' stroke-width='1'/%3E%3C/svg%3E` |
+| 물결 반복 | `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 8 Q10 0 20 8 T40 8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E` |
+
+- 패턴 투명도는 0.04~0.08 감각 — 본문 텍스트 대비 4.5:1을 침해하면 안 된다
+- 사이트당 패턴 1종. 시그니처 총량은 표현 등급의 maxCount를 넘지 않는다
+
+## 접근성
+
+- 세 패턴 모두 순수 장식이다 — `aria-hidden="true"` 또는 pseudo-element로만 구현해 보조기기 트리에서 제외한다
+- 고대비 모드(hc)에서 패턴·모티프가 본문 가독을 해치지 않는지 확인한다
+
+## 출처
+
+- 등급별 상한: `contracts/art-direction.json` expressionLevels / 선정·배치 원칙: `references/art-direction.md` §6
+- 색 토큰: `tokens/build/tokens.css` — raw 색상 금지(R-01), SVG는 mask 전용

package/data/tokens.css

@@ -1,7 +1,7 @@
 /**
  * AUTO-GENERATED — tokens/build/tokens.css
- * 출처: tokens/foundation.json
- * 직접 수정 금지. 변경은 tokens/foundation.json에서 한다.
+ * 출처: tokens/foundation.json + tokens/brand.json
+ * 직접 수정 금지. 브랜드 변경은 tokens/brand.json에서 한다.
  *
  * 공개 토큰은 색상, 기본 폰트, 브레이크포인트만 발행한다.
  * 간격·크기·타이포 스케일·반경·모션·그림자·z-index는 CSS/Tailwind 직접값으로 작성한다.
@@ -10,6 +10,7 @@
 :root {
   /* Font families */
   --font-sans: 'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
+  --font-heading: 'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace;
 
   /* Breakpoints */
@@ -27,6 +28,7 @@
   --color-text-subtle: #464c53;
   --color-text-disabled: #8a949e;
   --color-text-inverse: #ffffff;
+  --color-text-primary: #0b50d0;
   --color-bg: #ffffff;
   --color-bg-subtler: #f4f5f6;
   --color-bg-subtle: #e6e8ea;
@@ -43,6 +45,7 @@
   --color-border: #b1b8be;
   --color-border-light: #cdd1d5;
   --color-border-dark: #58616a;
+  --color-border-control: #6d7882;
   --color-border-primary: #256ef4;
   --color-border-primary-light: #d8e5fd;
   --color-border-information-light: #d3ebfd;
@@ -187,14 +190,17 @@
 }
 
 [data-color-mode="high-contrast"] {
+  /* Semantic colors */
   --color-primary: #256ef4;
   --color-primary-hover: #0b50d0;
   --color-primary-pressed: #083891;
+  --color-secondary: #268097;
   --color-text: #f4f5f6;
   --color-text-bolder: #e6e8ea;
   --color-text-subtle: #cdd1d5;
   --color-text-disabled: #58616a;
   --color-text-inverse: #1e2124;
+  --color-text-primary: #b1cefb;
   --color-bg: #000000;
   --color-bg-subtler: #131416;
   --color-bg-subtle: #1e2124;
@@ -203,11 +209,156 @@
   --color-surface: #000000;
   --color-surface-subtler: #131416;
   --color-surface-disabled: #464c53;
-  --color-border: #464c53;
+  --color-surface-primary-subtler: #020f27;
+  --color-surface-information-subtler: #021a2c;
+  --color-surface-success-subtler: #0e2012;
+  --color-surface-warning-subtler: #241800;
+  --color-surface-danger-subtler: #260903;
+  --color-border: #6d7882;
   --color-border-light: #33363d;
   --color-border-dark: #8a949e;
+  --color-border-control: #8a949e;
   --color-border-primary: #256ef4;
+  --color-border-primary-light: #03163a;
+  --color-border-information-light: #03253f;
+  --color-border-success-light: #122b18;
+  --color-border-warning-light: #2e1f00;
+  --color-border-danger-light: #390d05;
   --color-border-disabled: #464c53;
+  --color-link: #86aff9;
+  --color-link-hover: #b1cefb;
+  --color-link-pressed: #d8e5fd;
+  --color-link-visited: #c49ff9;
+  --color-button-primary-fill: #86aff9;
+  --color-button-primary-fill-hover: #b1cefb;
+  --color-button-primary-fill-pressed: #d8e5fd;
+  --color-button-secondary-fill: #020f27;
+  --color-button-secondary-fill-hover: #03163a;
+  --color-button-secondary-fill-pressed: #052561;
+  --color-button-secondary-border: #256ef4;
+  --color-button-tertiary-fill: #00000000;
+  --color-button-tertiary-fill-hover: #131416;
+  --color-button-tertiary-fill-pressed: #33363d;
+  --color-button-tertiary-border: #8a949e;
+  --color-button-text-fill: #00000000;
+  --color-button-text-fill-hover: #091f25;
+  --color-button-text-fill-pressed: #0e3139;
+  --color-button-text-border: #ffffff80;
+  --color-button-disabled-fill: #33363d;
+  --color-button-disabled-border: #464c53;
+  --color-input-surface: #1e2124;
+  --color-input-surface-disabled: #131416;
+  --color-input-border: #8a949e;
+  --color-input-border-active: #256ef4;
+  --color-input-border-disabled: #464c53;
+  --color-input-border-error: #de3412;
+  --color-danger: #de3412;
+  --color-danger-text: #f7afa1;
+  --color-danger-surface: #260903;
+  --color-warning: #9e6a00;
+  --color-warning-text: #ffc95c;
+  --color-warning-surface: #241800;
+  --color-success: #228738;
+  --color-success-text: #a9dab4;
+  --color-success-surface: #0e2012;
+  --color-info: #0b78cb;
+  --color-info-text: #9ed2fa;
+  --color-info-surface: #021a2c;
+  --color-point: #d63d4a;
+
+  /* 단계 색상: 필요한 경우에만 제한적으로 사용 */
+  --color-primary-5: #ecf2fe;
+  --color-primary-10: #d8e5fd;
+  --color-primary-20: #b1cefb;
+  --color-primary-30: #86aff9;
+  --color-primary-40: #4c87f6;
+  --color-primary-50: #256ef4;
+  --color-primary-60: #0b50d0;
+  --color-primary-70: #083891;
+  --color-primary-80: #052561;
+  --color-primary-90: #03163a;
+  --color-primary-95: #020f27;
+  --color-secondary-5: #edf6f8;
+  --color-secondary-10: #d5ebf1;
+  --color-secondary-20: #abd8e3;
+  --color-secondary-30: #75c0d1;
+  --color-secondary-40: #3d9fb8;
+  --color-secondary-50: #268097;
+  --color-secondary-60: #1f687a;
+  --color-secondary-70: #17505e;
+  --color-secondary-80: #113b45;
+  --color-secondary-90: #0e3139;
+  --color-secondary-95: #091f25;
+  --color-gray-0: #ffffff;
+  --color-gray-5: #f4f5f6;
+  --color-gray-10: #e6e8ea;
+  --color-gray-20: #cdd1d5;
+  --color-gray-30: #b1b8be;
+  --color-gray-40: #8a949e;
+  --color-gray-50: #6d7882;
+  --color-gray-60: #58616a;
+  --color-gray-70: #464c53;
+  --color-gray-80: #33363d;
+  --color-gray-90: #1e2124;
+  --color-gray-95: #131416;
+  --color-gray-100: #000000;
+  --color-danger-5: #fdefec;
+  --color-danger-10: #fcdfd9;
+  --color-danger-20: #f7afa1;
+  --color-danger-30: #f48771;
+  --color-danger-40: #f05f42;
+  --color-danger-50: #de3412;
+  --color-danger-60: #bd2c0f;
+  --color-danger-70: #8a240f;
+  --color-danger-80: #5c180a;
+  --color-danger-90: #390d05;
+  --color-danger-95: #260903;
+  --color-warning-5: #fff3db;
+  --color-warning-10: #ffe0a3;
+  --color-warning-20: #ffc95c;
+  --color-warning-30: #ffb114;
+  --color-warning-40: #c78500;
+  --color-warning-50: #9e6a00;
+  --color-warning-60: #8a5c00;
+  --color-warning-70: #614100;
+  --color-warning-80: #422c00;
+  --color-warning-90: #2e1f00;
+  --color-warning-95: #241800;
+  --color-success-5: #eaf6ec;
+  --color-success-10: #d8eedd;
+  --color-success-20: #a9dab4;
+  --color-success-30: #7ec88e;
+  --color-success-40: #3fa654;
+  --color-success-50: #228738;
+  --color-success-60: #267337;
+  --color-success-70: #285d33;
+  --color-success-80: #1f4727;
+  --color-success-90: #122b18;
+  --color-success-95: #0e2012;
+  --color-information-5: #e7f4fe;
+  --color-information-10: #d3ebfd;
+  --color-information-20: #9ed2fa;
+  --color-information-30: #5fb5f7;
+  --color-information-40: #2098f3;
+  --color-information-50: #0b78cb;
+  --color-information-60: #096ab3;
+  --color-information-70: #085691;
+  --color-information-80: #053961;
+  --color-information-90: #03253f;
+  --color-information-95: #021a2c;
+  --color-point-5: #fbeff0;
+  --color-point-10: #f5d6d9;
+  --color-point-20: #ebadb2;
+  --color-point-30: #e0858c;
+  --color-point-40: #d65c66;
+  --color-point-50: #d63d4a;
+  --color-point-60: #ab2b36;
+  --color-point-70: #7a1f26;
+  --color-point-80: #521419;
+  --color-point-90: #310c0f;
+  --color-point-95: #21080a;
+  --color-alpha-black-50: #00000080;
+  --color-alpha-black-75: #000000bf;
 }
 
 @theme {
@@ -215,6 +366,7 @@
   --color-*: initial;
 
   --font-sans: 'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
+  --font-heading: 'Pretendard GOV', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace;
 
   /* Tailwind responsive variants: mobile:, tablet:, pc: */
@@ -232,6 +384,7 @@
   --color-text-subtle: var(--color-text-subtle);
   --color-text-disabled: var(--color-text-disabled);
   --color-text-inverse: var(--color-text-inverse);
+  --color-text-primary: var(--color-text-primary);
   --color-bg: var(--color-bg);
   --color-bg-subtler: var(--color-bg-subtler);
   --color-bg-subtle: var(--color-bg-subtle);
@@ -248,6 +401,7 @@
   --color-border: var(--color-border);
   --color-border-light: var(--color-border-light);
   --color-border-dark: var(--color-border-dark);
+  --color-border-control: var(--color-border-control);
   --color-border-primary: var(--color-border-primary);
   --color-border-primary-light: var(--color-border-primary-light);
   --color-border-information-light: var(--color-border-information-light);

package/data/workflows/design-page.md

@@ -7,11 +7,12 @@
 ## 절차
 
 1. `references/project-profiles.md`에서 사이트 유형과 기본 section 흐름을 판정한다.
-2. 사용자의 핵심 과업을 한 문장으로 쓴다.
-3. `references/krds-components.md`에서 재사용할 컴포넌트를 고른다.
-4. `contracts/html-page-contract.json`으로 page shell과 section 구조를 확정한다.
-5. 인터랙티브 위젯이 있으면 `design-widget` 절차를 함께 적용한다.
-6. Task Contract의 필수 항목이 채워진 뒤에만 구현한다.
+2. `get_art_direction(profile)`로 표현 등급, 섹션 리듬 변주, 카피 톤을 확정하고, 실제 기관 용어·콘텐츠의 출처(`contentSources`)를 확보한다. 등급 상향은 Task Contract의 `expression` 필드에 근거와 함께 기록한다.
+3. 사용자의 핵심 과업을 한 문장으로 쓴다.
+4. `references/krds-components.md`에서 재사용할 컴포넌트를 고른다.
+5. `contracts/html-page-contract.json`으로 page shell과 section 구조를 확정한다.
+6. 인터랙티브 위젯이 있으면 `design-widget` 절차를 함께 적용한다.
+7. Task Contract의 필수 항목이 채워진 뒤에만 구현한다.
 
 ## 생성 원칙
 

package/data/workflows/init-project.md

@@ -34,6 +34,24 @@ npm run check
 npm run build
 ```
 
+## 브랜드 프리셋 적용
+
+브랜드 색이 확정되지 않았거나 검증된 팔레트에서 출발하려면 `tokens/presets/`의 프리셋을 그대로 적용한다. 후보와 무드는 `get_art_direction` 또는 `references/art-direction.md` §4에서 고른다. 프리셋은 대비 검사 전량 통과 상태로만 입고되므로 적용 직후 검사가 깨지지 않는다.
+
+```bash
+cp tokens/presets/<id>.json tokens/brand.json
+npm run build:tokens
+npm run check:contrast
+```
+
+## 제목 폰트(--font-heading)
+
+제목 서체를 본문과 다르게 가져가는 프로젝트만 설정한다. 생략하면 `--font-heading`은 `--font-sans` 값으로 폴백된다.
+
+1. `references/art-direction.md` §3 타이포 카탈로그에서 페어링을 고른다 — 재배포 가능 라이선스 + 한글 폴백 스택이 전제다.
+2. `tokens/brand.json`의 `font.family.heading`에 페어링 스택을 기록한다. 한글 가용 폰트가 스택에 없으면 R-26이 빌드를 실패시킨다.
+3. `npm run build:tokens`로 `--font-heading`을 재발행한다.
+
 ## 프로젝트 CSS 예시
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infomind-ux/infoux-mcp",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "INFOMIND UX 퍼블리싱 기준(infoUX)을 MCP로 제공한다. 토큰·컴포넌트·규칙·접근성 기준을 에이전트가 직접 조회한다.",
   "bin": {
     "infoux-mcp": "bin/server.js"