kasaframe 0.1.3 → 0.1.5

package/themes/newspaper/variants/sand-jade.json

@@ -0,0 +1,123 @@
+{
+  "id": "sand-jade",
+  "world": "newspaper",
+  "name": "Sand Jade",
+  "desc": "모래빛 바탕에 옥색 강조 · 단정한 바탕체 제목에 고딕 본문 · 고운 필름 입자",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9442,
+    "tint": {
+      "h": 55.1581,
+      "c": 0.0121
+    },
+    "inkL": 0.2181,
+    "hue": 171.3737,
+    "chroma": 0.8904,
+    "fonts": "gowun-batang",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1.14,
+    "radius": null,
+    "tempo": 1.12,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F3EBE5",
+      "surface": "#FBF3EF",
+      "raised": "#E9DFD8",
+      "line": "#BEB5AD",
+      "ink": "#1B1A1C",
+      "inkSoft": "#343131",
+      "dim": "#5E5855",
+      "accent": "#008166",
+      "accentSoft": "#B8DBCC",
+      "accentText": "#007159",
+      "onAccent": "#FCFCFC",
+      "success": "#1B1A1C",
+      "danger": "#008166",
+      "warning": "#008166",
+      "paper": "#F3EBE5",
+      "rule": "#1B1A1C",
+      "fiber": "#DCD2CA",
+      "red": "#008166"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gowun Batang\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gowun Batang",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gowunbatang/GowunBatang-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"
+        },
+        {
+          "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": 700,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 1.14,
+      "tempo": 1.12
+    }
+  },
+  "tags": {
+    "mood": [
+      "진지한",
+      "권위",
+      "소식",
+      "클래식",
+      "편집",
+      "밝은",
+      "아날로그",
+      "고전적"
+    ],
+    "light": "light",
+    "use": [
+      "발표",
+      "소식",
+      "출시",
+      "순위",
+      "가격",
+      "결과"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 14.75,
+      "inkSoft": 10.95,
+      "dim": 5.9,
+      "accentText": 5.1,
+      "accent": 4.13,
+      "onAccent": 4.74,
+      "success~danger": 0.317,
+      "success~warning": 0.317,
+      "accent~ink": 0.317
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/og-measure/THEME.md

@@ -2,20 +2,45 @@
 
 **비유 한 줄**: 화면은 계측기다 — 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다. 얼굴도 캐릭터도 없다.
 
+겉모습의 정본은 OpenGateway 스타일가이드다 — `opengateway/cp-fe-og-styleguide` 가지 `style/og-brand-styleguide-20261007`(46366b8)의 `design.md` 1–9절, 값은 `src/app/globals.css`·`tailwind.config.ts`·`src/components/ui/`. 이 세계는 그 규칙을 영상으로 옮긴 것이라, 규칙이 바뀌면 정본 코드부터 보고 따라 고친다.
+
 ## 맞는 내용·용도
 
-- 요금·토큰·속도·적중률처럼 **직접 재 본 값**이 주인공인 것 — OG 「재 봤습니다」 연재, 모델 비교, 벤치 결과, 설정 하나 바꾼 전후.
+- 요금·토큰·속도·적중률처럼 **직접 재 본 값**이 주인공인 것 — OG 「재 봤습니다」 연재, 모델 비교, 벤치 결과, 설정 하나 바꾼 전후. OpenGateway·OG·게이트웨이를 말하는 영상이면 이 세계다.
 - 용도: 쇼츠(9:16) · 설명 · 시연 · 홍보의 한 장면. 목소리·자막이 말을 맡고 화면엔 용어와 숫자만.
 - 원자료가 있어야 쓴다 — `measure.json` 같은 호출별 기록(usage 원문·시각·가격). 끝 장면의 612.5ms 는 `sample/measure.ts` 가 OG 를 실제로 18번 불러 만든 값이다.
 - 견본은 공통 주제 「OpenGateway 소개 15초」(`docs/briefs/og-intro-15s.md`). 숫자는 브리프의 사실과 실측만 쓰고, 모델 ID 가 바뀌는 요청 줄은 실제로 부르지 않았으니 결과(상태·지연) 없이 보낸 모양만 보인다.
 
+## 스타일가이드를 어떻게 옮겼나
+
+| 정본 | 이 세계 |
+|---|---|
+| 1절 팔레트는 한 벌 — `:root`(라이트)·`.dark`(다크) 두 자리뿐 | 다크가 `style.json`, 라이트가 `theme.json` `vary.palettes.light`. 두 벌 다 globals.css 토큰을 hex 로 옮긴 것이고 그 밖의 색은 세우지 않는다. bg=`--background` · surface=`--card` · raised=`--secondary` · line=`--border` · ink=`--foreground` · dim=`--muted-foreground` · accent=`--primary`(라이트 #006FD6 · 다크 #0084FF) · accentText=`--on-primary`(파랑 70% + 글 잉크 30%) · onAccent=`--primary-foreground` · tint=고른 상태 `bg-primary/10` · success=emerald-500 · danger=`--destructive` · warning=amber-500 |
+| 5절 다크가 기본, 라이트도 실제로 노출 | 세계 기본이 다크, 라이트는 변주 `og-measure/snow-blue`(정본 `:root` 값 그대로). 한쪽만 보고 색을 정하지 않는다 — 효과·슬롯은 색을 코드에 박지 않고 `var(--kf-*)` 로만 읽는다 |
+| 2절 가두지 않는다 — 구획은 제목·여백, 항목은 가는 구분선, 안내는 왼쪽 선, 틀이 곧 뜻인 것만 틀 | 칠한 카드·테두리 상자가 없다. 면(surface, 12px)을 쓰는 것은 틀이 곧 뜻인 둘뿐 — 호출·응답 패널(`callLine`)과 원자료 로그(`rawLog`, 코드 블록). 끝 도장은 구분선 한 줄 위에 서고, 패턴의 판(`panel` 슬롯)도 상자가 아니라 위 구분선이다 |
+| 4절 배지·칩은 칠하지 않고 흐린 테두리와 글자색만(`badge.tsx`) | `flag`·`callLine` 의 POST·200·차이 배지는 모두 테두리 배지 — accent(파랑 /45 테두리 + `--on-primary` 글) · plain(`--border` + 글 잉크) · soft(`--border` + 흐린 글). 칠하는 것은 고른 상태(뽑힌 숫자의 파랑 /10 알약)와 차트 칠뿐 |
+| 3절 모서리는 역할 — 알약 · 면 12px · 각짐, 사이 값 없음 | 칩·고름 칠 = 알약(`--kf-radius-pill`), 응답 패널·로그 = 12px(`md`), 막대·눈금·가운데값 표시·구분선 = 각짐(`sm` 0). 옛 판의 4·5·6·8px 모서리는 걷었다 |
+| 9절 대시보드 — 큰 숫자 하나·보조 지표·추이, 요청은 브랜드 파랑 | 한 장면엔 큰 숫자 하나(Geist 800, 자간 −0.055em, tabular-nums)와 굵은 막대 둘·셋. **파랑은 가장 좋은 값 하나에만**, 비교 대상은 회색 막대(`bar` = `--muted-foreground` 반투명), 빨강은 오류에만 |
+| 8절 움직임 — 150/220/300ms, `--ease-out`(.22,1,.36,1)·`--ease-spring`(.34,1.3,.64,1), 6px 나타남, 누름에 크기 안 바뀜 | 나타남은 모두 6px 올라오며 220ms 감속, 자리 옮김(막대 자람·가운데값·날아가는 숫자·카메라)은 300ms, 색 바뀜은 150ms. 카메라의 「툭」은 스프링이 살짝 넘었다 돌아오는 것 하나. 커졌다 줄기·흔들림·섬광은 없다 |
+| 그림자·그라데이션 | 없다. 옛 판의 파란 그라데이션 주사선과 슬롯 카드 그림자, 드롭의 파란 섬광은 걷었다 — 드롭은 파란 구분선 한 줄이 그어지는 것으로 |
+| 7절 브랜드 자산과 승인 상태 | 로고는 마스터 `public/logo.svg` 하나(`sample/assets/brand/og-logo.svg` 와 바이트가 같다). 한 색 SVG 를 `?raw` 로 받아 어두운 바탕은 흰색·밝은 바탕은 검정으로만 칠한다 — 파랑으로 칠한 로고는 정본에 없다. og-wave 후보·캠페인 배너·3D 관문 시안은 쓰지 않는다 |
+| 서체 — 한국어·UI Pretendard, 코드·시간 Geist Mono, 숫자 tabular-nums, 워드마크·큰 숫자 Geist 800 −0.055em | sans = Pretendard(정본 파일과 바이트가 같은 npm 1.3.9), display = Geist(정본이 `next/font/google` 로 받는 것과 같은 google/fonts 판 박은 파일, 한글은 Pretendard 로 떨어진다), mono = Geist Mono |
+
+## 변주 — 브랜드를 지키는 축만
+
+- 강조 파랑은 돌지 않는다(`vary.keep` — accent·accentText·accentSoft·onAccent·tint·의미색). `hue`·`chroma`·`tint` 축이 없다.
+- 밝기 둘: 다크(세계 기본)·라이트(`vary.palettes.light` — 라이트 판은 다크를 뒤집어 옮기지 않고 정본 라이트 한 벌에서 시작한다. 두 벌이 거울상이 아니라서 옮기면 정본 값이 안 나온다).
+- 바탕은 정본 면 색 사이만(`vary.bg` — 다크 `--background`~`--card`, 라이트 `--card`~`--background`). 그 위의 면·선·흐린 글은 바탕을 따라 자리를 지킨다.
+- 글꼴·모서리·빠르기·질감·선 굵기는 정본이 하나뿐이라 돌지 않는다(스타일가이드의 한글 글꼴 다섯 후보는 「비교용, 고르기 전엔 전역 글꼴을 안 바꾼다」).
+- 그래서 판이 몇 개뿐이다 — 칸 그림이 서로 거의 같은 판은 `kf theme vary` 가 떨어뜨린다. 억지로 16을 채우지 않는다.
+
 ## 금지
 
 - 숫자를 지어내지 않는다. 재 오지 못한 값은 화면에 「시뮬레이션」·「미확인」을 붙이거나 쓰지 않는다. 비용은 반올림해 0 으로 만들지 않는다(첫 유효 자리까지).
 - 문구·광고 카피·가입 유도 금지. OG 는 실험 도구 한 줄(호출 주소)과 끝 로고만.
-- 파랑은 가장 좋은 값 하나에만. 나머지는 회색 막대. 빨강은 오류에만. 그림자·테두리·그라데이션·네온 금지.
+- 상자 안에 상자, 칠한 배지, 그림자·그라데이션·네온·섬광, 사이 값 모서리, 손으로 쓴 시간·곡선.
 - 차트 선을 매번 처음부터 다시 그리지 않는다 — 점은 들어온 시각에 한 번 찍히고 남는다.
-- 화면을 흔들지 않는다(맞는 용도가 흔들림을 끈다). 드롭의 힘은 `trackCam` 툭(kick)과 `meter` 로.
+- 화면을 흔들지 않는다(`shake.on` 비움). 드롭의 힘은 `meter` 와 `trackCam` 스프링·kick 으로.
 
 ## 효과 쓰는 법
 
@@ -34,7 +59,7 @@ export default {
     const b = ctx.beats.beats.filter((x) => x > -0.01);
     const c = data.calls[0];
     const call = callLine(stage, { x: 90, y: 140, w: 1740, at: 0, url: ["apis.opengateway.ai", "/v1", "/chat", "/completions"], urlAt: b.slice(0, 4), model: c.model, modelAt: b[4], sendAt: b[6], status: c.status, ms: c.ttft_ms, answer: c.text });
-    return (t: number) => { bg(t); call(t); applyStyle(stage, trackCam(t, { shots: [{ at: 0 }, { at: b[3], zoom: 1.05, kick: 0.04 }], scene: ctx.id })); };
+    return (t: number) => { bg(t); call(t); applyStyle(stage, trackCam(t, { shots: [{ at: 0 }, { at: b[3], zoom: 1.05 }], scene: ctx.id })); };
   },
 };
 ```
@@ -43,5 +68,6 @@ export default {
 - 흐름은 「호출 한 줄 → 원자료 로그 → 점·가운데값 → 큰 숫자 하나 → 끝 도장」. 한 장면엔 큰 숫자 하나(display 200 이상)와 굵은 막대 둘·셋.
 - 로그 줄이 들어오는 시각과 점이 찍히는 시각을 같게 둔다 — 「거기서 뽑혔다」가 보인다. 들어오는 박자는 마디·박에.
 - 원자료 로그·축 눈금은 코드 화면이라 글 덩어리가 많다 — 견본은 `kf.json` 의 `text.maxOnScreen` 을 로그 줄·눈금·값을 센 실제 수(30)로 두었다. 로그·차트 밖 글은 셋을 넘기지 않는다.
-- 결과가 서는 순간은 드롭에(`meter` + `trackCam` kick), 끝 도장은 마지막 마디에.
-- **쉬지 않는다** — 화면을 꽉 채우고(글 56–64px, 화면 전체), 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자(`pickFly`)·막대·칩 중 하나가 크게 움직여 같은 구도가 1.5초를 넘지 않게. 기다리는 동안도 카운터가 실제 속도로 구른다. `trackCam` 샷은 드러냄·결과가 서는 순간에만 — 구도를 메우려고 샷을 박지 않는다(샷 사이 카메라는 선다).
+- 결과가 서는 순간은 드롭에(`meter` + `trackCam`), 끝 도장은 마지막 마디에.
+- 배지 tone 은 뜻으로 고른다 — 이 장면의 핵심 사실 하나만 accent(파랑 테두리), 나머지 이름·주소는 plain, 덜 중요한 곁말은 soft.
+- **쉬지 않는다** — 화면을 꽉 채우고(글 56–64px, 화면 전체), 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자(`pickFly`)·막대·배지 중 하나가 나타나거나 자라 같은 구도가 1.5초를 넘지 않게. 기다리는 동안도 카운터가 실제 속도로 구른다. `trackCam` 샷은 드러냄·결과가 서는 순간에만 — 구도를 메우려고 샷을 박지 않는다(샷 사이 카메라는 선다).