kasaframe 0.1.1 → 0.1.4

package/themes/whiteboard/slots.ts

@@ -0,0 +1,152 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { layer, letters, partial, strokePath, traceCanvas, type Pt } from "@kasaframe/themes/slotkit";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { boardSurface } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 회의실 화이트보드의 결로 채운다. 전부 DOM·캔버스 2D
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+function rgba(c: string, a: number): string {
+  const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return c;
+  const n = parseInt(m[1], 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
+}
+
+// 꺾은선 위 거리 d 의 자리
+function along(points: readonly Pt[], d: number): [number, number] {
+  for (let i = 1; i < points.length; i++) {
+    const [a, b] = [points[i - 1], points[i]];
+    const seg = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (d <= seg) return [a[0] + ((b[0] - a[0]) * d) / (seg || 1), a[1] + ((b[1] - a[1]) * d) / (seg || 1)];
+    d -= seg;
+  }
+  const last = points[points.length - 1];
+  return [last[0], last[1]];
+}
+
+export const slots: ThemeSlots = {
+  // 흰 보드 한 장 — 반질한 빛 띠와 예전에 지운 자국. 서 있다
+  surface(el, { ctx, seed }) {
+    return boardSurface(el, { ctx, seed });
+  },
+
+  // 포스트잇 판 — 위에서 톡 눌러 붙고 그림자가 줄며 앉는다. 강조면 하늘색 종이
+  panel(el, { ctx, at, seed, tone }) {
+    const paper = col(ctx, tone === "accent" ? "noteBlue" : "noteYellow", "#FFE36B");
+    const ink = col(ctx, "ink", "#1D2026");
+    const p = layer(el, `inset:0;background:${paper};`, true);
+    layer(p, `left:0;right:0;top:0;height:16%;background:linear-gradient(${rgba(ink, 0.08)},${rgba(ink, 0)});`);
+    const rot = (rand(seed, 0) - 0.5) * 2.4;
+    return (t) => {
+      const on = t >= at;
+      p.style.display = on ? "" : "none";
+      if (!on) return;
+      const k = clamp((t - at) / 0.26);
+      const lift = 1 - ease.outCubic(k);
+      p.style.transform = `translateY(${(-40 * lift).toFixed(1)}px) rotate(${(rot + 5 * lift).toFixed(2)}deg) scale(${(1.12 - 0.12 * ease.outBack(k)).toFixed(3)})`;
+      p.style.boxShadow = `${(5 + 14 * lift).toFixed(1)}px ${(9 + 24 * lift).toFixed(1)}px ${(12 + 22 * lift).toFixed(1)}px ${rgba(ink, 0.2 - 0.06 * lift)}`;
+    };
+  },
+
+  // 꾹 눌러 붙인다 — 조금 크게 들렸다가 눌려 앉고, 비뚜름히 돌아간 채 선다
+  land(el, { at, seed }) {
+    const r = (rand(seed, 1) - 0.5) * 3;
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0 || k > 0.6) return {};
+      const u = ease.outBack(clamp(k / 0.3));
+      return { scale: 1.14 - 0.14 * u, rotate: r * (1 - clamp(k / 0.6)) + (1 - u) * 4, y: -26 * (1 - ease.outCubic(clamp(k / 0.3))) };
+    };
+  },
+
+  // 마커 손글씨 — 글자가 왼쪽부터 한 자씩, 글자 안에서도 왼쪽→오른쪽으로 써진다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    for (const s of spans) {
+      s.style.display = "inline-block";
+      s.style.whiteSpace = "pre";
+    }
+    const n = Math.max(1, spans.length);
+    return (t) => {
+      const done = t >= at + dur;
+      spans.forEach((s, i) => {
+        const p = done ? 1 : clamp(((t - at) / Math.max(1e-3, dur)) * n - i);
+        s.style.visibility = p > 0 ? "visible" : "hidden";
+        s.style.clipPath = p >= 1 ? "" : `inset(-30% ${((1 - p) * 100).toFixed(1)}% -30% -10%)`;
+      });
+    };
+  },
+
+  // 마커 화살표 — 손떨림 있는 굵은 선이 그어지고 끝에 두 획 머리. 다 그은 뒤엔 펜 끝이 화살표를 따라 짚어 간다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points, 60);
+    const color = tone === "accent" ? col(ctx, "accent", "#2353C4") : col(ctx, "marker", "#1D2026");
+    const wob = points.map(([x, y], i) => [x + (rand(seed, i) - 0.5) * 4, y + (rand(seed, i + 40) - 0.5) * 4] as Pt);
+    const len = wob.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - wob[i][0], y - wob[i][1]), 0) || 1;
+    const [ex, ey] = wob[wob.length - 1];
+    const [bx, by] = along(wob, Math.max(0, len - 30));
+    const ang = Math.atan2(ey - by, ex - bx);
+    return (t) => {
+      clear();
+      if (t < at) return;
+      const u = clamp((t - at) / Math.max(0.01, dur));
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.strokeStyle = color;
+      g.lineWidth = 8;
+      strokePath(g, partial(wob, Math.min(1, u / 0.85)));
+      const head = clamp((u - 0.85) / 0.15);
+      if (head > 0) {
+        for (const da of [0.5, -0.5]) {
+          g.beginPath();
+          g.moveTo(ex, ey);
+          g.lineTo(ex - Math.cos(ang + da) * 30 * head, ey - Math.sin(ang + da) * 30 * head);
+          g.stroke();
+        }
+      }
+      if (u < 1) return;
+      const d = ((((t - at - dur) * 0.45 + rand(seed, 99)) % 1) + 1) % 1;
+      const [x, y] = along(wob, d * len);
+      g.fillStyle = col(ctx, "red", "#CC3426");
+      g.beginPath();
+      g.arc(x, y, 9, 0, Math.PI * 2);
+      g.fill();
+    };
+  },
+
+  // 드롭 — 탁 치듯 빨강 강조선이 사방으로 그어지고 흰 섬광
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, `inset:0;background:${col(ctx, "surface", "#FFFFFF")};opacity:0;`);
+    const cv = document.createElement("canvas");
+    cv.width = Math.round(ctx.meta.width / 2);
+    cv.height = Math.round(ctx.meta.height / 2);
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+    el.append(cv);
+    const g = cv.getContext("2d")!;
+    const red = col(ctx, "red", "#CC3426");
+    const seed = `slap:${ctx.id}`;
+    const rays = Array.from({ length: 16 }, (_, i) => ({ a: (i / 16) * Math.PI * 2 + (rand(seed, i) - 0.5) * 0.3, r0: 0.3 + rand(seed, i + 20) * 0.06, r1: 0.42 + rand(seed, i + 40) * 0.08 }));
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "whiteboard:drop" });
+      flash.style.opacity = String(Math.round(s.flash * 60) / 100);
+      g.clearRect(0, 0, cv.width, cv.height);
+      const k = t - ctx.beats.drop(drop);
+      if (k < 0) return s;
+      const big = Math.min(cv.width, cv.height);
+      const [cx, cy] = [cv.width / 2, cv.height / 2];
+      g.strokeStyle = red;
+      g.lineCap = "round";
+      g.lineWidth = Math.max(3, big * 0.012);
+      for (const r of rays) {
+        const u = clamp(k / 0.12);
+        const [a0, a1] = [r.r0 * big, (r.r0 + (r.r1 - r.r0) * u) * big];
+        g.beginPath();
+        g.moveTo(cx + Math.cos(r.a) * a0, cy + Math.sin(r.a) * a0);
+        g.lineTo(cx + Math.cos(r.a) * a1, cy + Math.sin(r.a) * a1);
+        g.stroke();
+      }
+      return s;
+    };
+  },
+};

package/themes/whiteboard/style.json

@@ -0,0 +1,106 @@
+{
+  "name": "whiteboard",
+  "label": "화이트보드 — 회의에서 마커로 그려 가며 설명한다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F7F7F3",
+    "surface": "#FFFFFF",
+    "raised": "#ECECE6",
+    "line": "#D2D3CC",
+    "ink": "#1D2026",
+    "inkSoft": "#353A43",
+    "dim": "#5F646D",
+    "accent": "#2353C4",
+    "accentSoft": "#C6D5F6",
+    "accentText": "#1D47AC",
+    "onAccent": "#FFFFFF",
+    "success": "#1F7F4A",
+    "danger": "#CC3426",
+    "warning": "#B86A00",
+    "marker": "#1D2026",
+    "red": "#CC3426",
+    "green": "#1F7F4A",
+    "noteYellow": "#FFE36B",
+    "notePink": "#FFA3C8",
+    "noteMint": "#A3E8C8",
+    "noteBlue": "#AED6FF",
+    "noteOrange": "#FFC07A",
+    "ghost": "#E4E5DF"
+  },
+  "fonts": {
+    "sans": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "Gaegu, ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gaegu/Gaegu-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gaegu/Gaegu-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 96,
+    "body": 48,
+    "caption": 36,
+    "weightDisplay": 700,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 4,
+    "md": 8,
+    "lg": 14,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F7F7F3 흰 보드",
+      "#1D2026 검정 마커(윤곽·글)",
+      "#2353C4 파랑 마커(강조·화살표)",
+      "#CC3426 빨강 마커(고침·드롭)",
+      "포스트잇 다섯 색 — 회사·모델마다 한 장"
+    ],
+    "texture": "흰 보드에 지운 자국만 옅게(서 있다). 손떨림 있는 굵은 마커 선, 손글씨, 얕은 그림자의 포스트잇과 펜",
+    "movement": "마커 펜이 말을 따라 그린다 — 획이 그어지는 순서가 설명의 순서. 박마다 포스트잇이 붙거나·상자와 화살표가 그어지거나·지우개가 지나가고 다시 쓴다. 바탕은 서 있고, 펜이 다음 자리로 옮겨 가는 동안에도 화면이 쉬지 않는다"
+  },
+  "notes": [
+    "출처: Excalidraw 손그림 아키텍처, Sketchboard 마커 스케치, 포스트잇 사진, RSA Animate 의 그리는 손.",
+    "글은 손글씨(Gaegu)로 크게 — 마커 글씨는 작으면 안 읽힌다. 칠한 넓은 색면 위에 작은 글을 두지 않는다."
+  ]
+}

package/themes/whiteboard/theme.json

@@ -0,0 +1,143 @@
+{
+  "id": "whiteboard",
+  "name": "화이트보드",
+  "metaphor": "회의에서 마커로 그려 가며 설명하듯, 펜이 가는 자리마다 상자·화살표·손글씨가 그어지고 포스트잇이 붙고 지우개로 지워 다시 쓴다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "explainer",
+    "shorts",
+    "promo",
+    "demo",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16"
+  ],
+  "vary": {
+    "scheme": [
+      "light"
+    ],
+    "hue": [
+      [
+        0,
+        360
+      ]
+    ],
+    "chroma": [
+      0.85,
+      1.15
+    ],
+    "tint": [
+      0,
+      0.02
+    ],
+    "bg": {
+      "light": [
+        0.95,
+        0.99
+      ]
+    },
+    "fonts": [
+      "base",
+      "gowun-dodum",
+      "do-hyeon",
+      "jua"
+    ],
+    "texture": [
+      "none",
+      "grain"
+    ],
+    "stroke": [
+      0.8,
+      1.4
+    ],
+    "tempo": [
+      0.9,
+      1.2
+    ]
+  },
+  "tags": {
+    "mood": [
+      "친근한",
+      "손그림",
+      "회의",
+      "가벼운",
+      "설명"
+    ],
+    "light": "light",
+    "use": [
+      "설명",
+      "아키텍처",
+      "흐름",
+      "비교",
+      "가격",
+      "온보딩",
+      "교육"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "boardSurface",
+      "kind": "layer",
+      "does": "흰 보드 — 반질한 면의 옅은 빛 띠와 예전에 지운 흐린 자국. 처음 한 번 그려 서 있다",
+      "use": "const surface = boardSurface(root, { ctx, seed: ctx.id })"
+    },
+    {
+      "name": "markerPen",
+      "kind": "layer",
+      "does": "마커 펜 = 설명하는 손 — 지금 그어지는 획의 머리에 펜촉이 있고, 획 사이엔 휜 길로 다음 자리로 옮겨 간다(멈추지 않는다). 다른 효과에 pen 으로 넘기면 그 획을 따라간다",
+      "use": "const pen = markerPen(root, { ctx }); /* …효과마다 pen 을 넘기고… */ pen(t)"
+    },
+    {
+      "name": "markerLine",
+      "kind": "layer",
+      "does": "마커 선 = 상자·밑줄·화살표(요청) — 손떨림 있는 굵은 선이 펜 머리를 따라 그어진다, arrow 면 두 획 머리. 상자는 꼭짓점 다섯 점(끝이 조금 넘쳐 닫힌다)",
+      "use": "paints.push(markerLine(el, { ctx, points: [[200, 500], [700, 500]], at: b[1], arrow: true, color: \"accent\", pen }))"
+    },
+    {
+      "name": "markerText",
+      "kind": "layer",
+      "does": "손글씨 — 글자가 왼쪽부터 한 자씩, 글자 안에서도 왼쪽→오른쪽으로 써지고 펜이 그 줄을 따라간다. 글자는 살짝 들쭉날쭉",
+      "use": "paints.push(markerText(el, { ctx, text: \"apis.opengateway.ai/v1\", x: 960, y: 490, size: 104, at: 0.2, align: \"center\", pen }))"
+    },
+    {
+      "name": "circleMark",
+      "kind": "layer",
+      "does": "동그라미 치기 = 강조·고르기 — 손으로 두른 타원이 한 바퀴 넘게 돌아 겹친다, loops 2 면 두 겹",
+      "use": "paints.push(circleMark(el, { ctx, cx: 960, cy: 490, rx: 600, ry: 150, at: b[3], loops: 2, pen }))"
+    },
+    {
+      "name": "stickyNote",
+      "kind": "layer",
+      "does": "포스트잇 = 모델·회사 한 장 — 위에서 톡 눌러 붙고 그림자가 줄며 앉는다, 조금 기운다. peel 이면 떼어져 날아간다",
+      "use": "paints.push(stickyNote(el, { ctx, x: 400, y: 220, w: 350, h: 230, tone: \"notePink\", text: \"Anthropic\", size: 96, at: b[0] }))"
+    },
+    {
+      "name": "eraserWipe",
+      "kind": "layer",
+      "does": "지우개 = 값이 바뀜 — 지우개가 지그재그로 지나간 자리가 보드 색으로 지워지고 옅은 자국이 남는다. 그 뒤에 쓴 것은 위에 선다",
+      "use": "paints.push(eraserWipe(el, { ctx, x: 540, y: 455, w: 1300, h: 130, at: b[5] }))"
+    },
+    {
+      "name": "strikeOut",
+      "kind": "layer",
+      "does": "줄 긋기 = 값 고치기(할인·폴백) — 옛 값 위로 빨강 마커가 지그재그로 문지른다. 새 값은 곁에 markerText",
+      "use": "paints.push(strikeOut(el, { ctx, x: vx, y: 460, w: ww, h: 110, at: b[9], pen }))"
+    },
+    {
+      "name": "tallyMarks",
+      "kind": "layer",
+      "does": "바를 정 = 개수 — 넷을 긋고 다섯째로 가로지르며 count 획을 차례로, 펜이 줄을 훑는다. shown(t) 로 그은 수",
+      "use": "paints.push(tallyMarks(el, { ctx, x: 560, y: 190, count: 102, at: 0.1, dur: 1.2, size: 130, perRow: 6, pen }))"
+    },
+    {
+      "name": "slapBurst",
+      "kind": "layer",
+      "does": "드롭 — 보드를 탁 치듯 빨강 강조선이 사방으로 그어지고 흰 섬광. 돌려준 shake 는 보드 틀에(dropBurst)",
+      "use": "const slap = slapBurst(el, { ctx, x: 960, y: 430, r: 360, drop: 0 }); applyStyle(frame, slap(t).shake)"
+    }
+  ]
+}

package/themes/whiteboard/variants/chalk-coral-do.json

@@ -0,0 +1,126 @@
+{
+  "id": "chalk-coral-do",
+  "world": "whiteboard",
+  "name": "Chalk Coral Do",
+  "desc": "분필빛 바탕에 산호색 강조 · 손간판 같은 각진 좁은 제목체",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9603,
+    "tint": {
+      "h": 179.7716,
+      "c": 0.0039
+    },
+    "inkL": 0.1422,
+    "hue": 25.2248,
+    "chroma": 0.9157,
+    "fonts": "do-hyeon",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 0.86,
+    "radius": null,
+    "tempo": 1.1,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#EFF3F2",
+      "surface": "#F8FCFF",
+      "raised": "#E3E6E4",
+      "line": "#C6CBC7",
+      "ink": "#060911",
+      "inkSoft": "#1E242F",
+      "dim": "#4A515C",
+      "accent": "#8F0012",
+      "accentSoft": "#E8C2BC",
+      "accentText": "#76000D",
+      "onAccent": "#F8FCFF",
+      "success": "#1F7F4A",
+      "danger": "#CC3426",
+      "warning": "#B86A00",
+      "marker": "#060911",
+      "red": "#CC3426",
+      "green": "#1F7F4A",
+      "noteYellow": "#A0EAFF",
+      "notePink": "#B5C16F",
+      "noteMint": "#C9C7FE",
+      "noteBlue": "#EFB8BE",
+      "noteOrange": "#69DAD3",
+      "ghost": "#DADFDC"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Do Hyeon",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/dohyeon/DoHyeon-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 500,
+      "tracking": "0em"
+    },
+    "look": {
+      "stroke": 0.86,
+      "tempo": 1.1
+    }
+  },
+  "tags": {
+    "mood": [
+      "친근한",
+      "손그림",
+      "회의",
+      "가벼운",
+      "설명",
+      "밝은",
+      "따뜻한"
+    ],
+    "light": "light",
+    "use": [
+      "설명",
+      "아키텍처",
+      "흐름",
+      "비교",
+      "가격",
+      "온보딩",
+      "교육"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 17.73,
+      "inkSoft": 13.92,
+      "dim": 7.18,
+      "accentText": 10.52,
+      "accent": 8.62,
+      "onAccent": 9.34,
+      "success~danger": 0.077,
+      "success~warning": 0.049,
+      "danger~warning": 0.04,
+      "accent~danger": 0.145,
+      "accent~ink": 0.184
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/whiteboard/variants/chalk-coral.json

@@ -0,0 +1,132 @@
+{
+  "id": "chalk-coral",
+  "world": "whiteboard",
+  "name": "Chalk Coral",
+  "desc": "분필빛 바탕에 산호색 강조 · 손맛 나는 부드러운 돋움 · 고운 필름 입자",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.953,
+    "tint": {
+      "h": 15.6525,
+      "c": 0.0087
+    },
+    "inkL": 0.243,
+    "hue": 27.164,
+    "chroma": 1.1162,
+    "fonts": "gowun-dodum",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1.18,
+    "radius": null,
+    "tempo": 0.92,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F5EDED",
+      "surface": "#FDF5F9",
+      "raised": "#EAE3E1",
+      "line": "#D1CBC8",
+      "ink": "#1F1F28",
+      "inkSoft": "#373844",
+      "dim": "#60606D",
+      "accent": "#AF000F",
+      "accentSoft": "#F0C2BA",
+      "accentText": "#99000B",
+      "onAccent": "#FDF5F9",
+      "success": "#1F7F4A",
+      "danger": "#CC3426",
+      "warning": "#B86A00",
+      "marker": "#1F1F28",
+      "red": "#CC3426",
+      "green": "#1F7F4A",
+      "noteYellow": "#A5E9FF",
+      "notePink": "#B6C962",
+      "noteMint": "#CDC9FF",
+      "noteBlue": "#FBB7BD",
+      "noteOrange": "#47E2DD",
+      "ghost": "#E3DCDA"
+    },
+    "fonts": {
+      "sans": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gowun Dodum",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gowundodum/GowunDodum-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "JetBrains Mono",
+          "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+          "weight": "100 800"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 400,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 1.18,
+      "tempo": 0.92
+    }
+  },
+  "tags": {
+    "mood": [
+      "친근한",
+      "손그림",
+      "회의",
+      "가벼운",
+      "설명",
+      "밝은",
+      "따뜻한",
+      "아날로그",
+      "귀여운"
+    ],
+    "light": "light",
+    "use": [
+      "설명",
+      "아키텍처",
+      "흐름",
+      "비교",
+      "가격",
+      "온보딩",
+      "교육"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 14.22,
+      "inkSoft": 10.09,
+      "dim": 5.37,
+      "accentText": 7.74,
+      "accent": 6.44,
+      "onAccent": 6.91,
+      "success~danger": 0.077,
+      "success~warning": 0.049,
+      "danger~warning": 0.04,
+      "accent~danger": 0.071,
+      "accent~ink": 0.149
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}