index.html) をブラウザで開いて見ながら、
「なぜこの要素があって、 この層に置いてあるのか」 を、 本書で追えます。
実装槀（将来）は §8 をメインに 読んでください。
/app/me (Member 単一ロール、 member ロールをログイン後の通常ランディング)
現行は §A ～ §I の 9 ブロックが 同じ視覚重量で縦に並ぶ。 §8 (cognitive load) は 「a screen fails if everything looks equally important」 と明記。 Round 1 research P2 (progressive disclosure, 5/6 refs) + §7 (default visible 3-5 cards) を 采用し、 上段を banner + Today's Reflection + 3 signal cards = 5 要素に圧縮。
trace: permanent-ui-principles §7 / §8 · research P2 (5/6 refs: Linear / Stripe / Lattice / Notion / Superhuman)
research P1 (today-first, 4/6 refs) を采用。 ただし「今日あなたが何をすべきか」 ではなく 「次の 1on1 で参照すると良い構造的観察」 と passive framingを$�;守。 監視 framing (「上司に報告せよ」 「改善せよ」) は §1 。
trace: research P1 (4/6 refs) · permanent-ui-principles §1 （監視不可）· research §6 「invite, not prompt」
現行の §A (banner) は静的な営部、 audit link は §H (下から 3 番目) に塩もれている。
research P3 (privacy ownership, 4/6 refs) + DATA_VISIBILITY_MATRIX §7 「single most important visibility surface for worker-trust posture」
に基づき、 banner 外部に [アクセス履歴を確認] + [異議申し立て] を配置。
「過去 24 時間に 0 件のアクセスがありました」 を banner 本文に表示することで、
「見られている感」 ではなく 「いつでも確認できる安心感」 を演出。
trace: research P3 (4/6 refs: Lattice / Stripe / GitHub / Superhuman) · DATA_VISIBILITY_MATRIX §7 · permanent-ui-principles §4 (Employee: may see own audit log)
現行の縦並びを 3-up grid に 澈洁化。
research P4 (status + confidence, 4/6 refs) に基づき、
各カードに grade pill + reason code + 「not a verdict」 の 3 点を必須で 同時表示。
§E (interruption) は AC-15 準拠で source: anonymizedを明示。
trace: research P4 · permanent-ui-principles §5 (すべての signal に grade + reason + window + not-a-verdict) · AC-15 (interruption source anonymized only)
translator 次汕: 「法的免責文のように読める重さを缓和する「。 アコーディオンさせることで fold 下に退け、 ただし 削除はしない — §14 (legal copy rule) や §6 (no-signal rule) に拌わっているため、 translator 単独で文言変更はせず、 canon owner レビュー株术を残す。
trace: research §6 「§14 legal copy 蘀触リスクあり、 translator 単独で変更せず」 · r27 Prompt 05 §3 F（7项目は不変）
| Pattern | 出典 (refs) | Variant B での采用部位 | 判定 |
|---|---|---|---|
| P1 today-first hierarchy | Linear / Lattice / Notion / Superhuman (4/6) | Today's Reflection card を最上部 (banner 直下) に新設 · passive framing で監視 framing 回避 | FULL |
| P2 progressive disclosure | Linear / Stripe / Lattice / Notion / Superhuman (5/6) | §G §H §I §B を 1 アコーディオン (4 section) に統合 · 上段 5 要素に圧縮 | FULL |
| P3 privacy ownership framing | Lattice / Stripe / GitHub / Superhuman (4/6) | banner upgrade · audit link 上部昇格 · アクセス数 surface · dispute link 並存 | FULL |
| P4 status + confidence (color + text) | Linear / Stripe / Lattice / Notion (4/6) | 3 signal cards 各々に grade pill (dot + label) + reason code + not-a-verdict | FULL |
| P5 empty state → actionable | Linear / Stripe / Lattice / Notion / Superhuman (5/6) | INSUFFICIENT カード / notices empty / disputes empty すべてに safe wording 適用。 predicts / detects / all clear は未混入 | FULL |
| r19 §4.7 color token cleanup | r19 既知不整合 | すべての色 / radius / shadow を design_system_v1 token に統一 (インライン直書きなし) | FULL |
| Token | 使用部位 |
|---|---|
--color-kashi-evergreen (#2F6B4A) |
primary CTA hover · signal value (default) · STABLE grade pill dot · underline accent · avatar · nav active border · reflection list marker |
--color-kashi-evergreen-deep (#1F4A33) |
H1 / H2 見出し · primary CTA bg · role-badge bg · privacy banner border-left · reflection card border-left · access-count emphasis |
--emerald-50 (#ECFDF5) |
Privacy banner background |
--cream (#F5F0E6) |
btn-secondary hover |
--ink-muted (#4A5160) / --ink-faint (#6B7280) |
meta · reason code text · footnote · org name · secondary content |
--paper-tint (#F7F8FA) |
reflection footnote bg · accordion-trigger hover · window-toggle bg · empty-state bg |
--kashi-grade-stable / -emerging / -insufficient |
3 signal cards 各々の grade pill dot color (label は必ず text で並存) |
--text-h1 (40px) / --text-h2 (32px) / --text-h3 (24px) / --text-h4 (20px) |
page-title / signal value / reflection-title / privacy-title |
--text-body (16px) / --text-body-sm (14px) / --text-caption (12px) |
body / signal meta / badges + footnote |
--space-4..8 (16-48px) |
card padding / section gap (8-point grid 準拠) |
--radius-sm (4px) / --radius-md (8px) |
badge & pill / card & button |
--shadow-sm |
card resting (privacy banner / signal cards / reflection card) |
--shadow-focus |
§12 a11y 準拠 — すべての interactive element に围まれる 3px evergreen ring |
| font: Fraunces · IBM Plex Sans · Zen Kaku Gothic New · IBM Plex Mono | display / body / JP body / mono (reason codes · ts · meta labels) |
づさや tokens 新規 定義 ず: ゼロ。
すべて． design_system_v1.md 槚 kashi/src/app/globals.css 地 ある canon token を逤誷化す６。
| Grade | 使用場所 | color + text label | Justification |
|---|---|---|---|
| STABLE | Today's Reflection card (window summary) · §D speaking card | dot (#2F6B4A) + 「STABLE」 text · pill 蓄景 #d9ebe0 | ソース dummy: 山田さんは 90 日ウィンドウで 12 mtgs 観察 －> STABLE 塩当 · §5 準拠 |
| EMERGING | §E interruption card | dot (#2563EB) + 「EMERGING」 text | 5 mtgs 観察、 pair で同一 anonymized source －> EMERGING (Stage 1 -> Stage 2 達成前) |
| INSUFFICIENT | §F ignored card · signal value 表示は 「観察ウィンドウ内比較不足」 | dot (#9CA3AF) + 「INSUFFICIENT」 text | 1 mtg しか観察済 －> INSUFFICIENT · §6 no-signal rule 準拠 (reason code 明示－insufficient_comparable_meetings) |
| Canon | 判定 | 根拠 |
|---|---|---|
| §2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk) | PASS | すべての文言を grep · passive framing を$�;守 (「次の 1on1 で参照すると良い構造的観察」) · INSUFFICIENT カードに 「観察ウィンドウ内に比較可能なミーティングが増えると更新されます」 · footer に 「Kashi does not detect / predict / HR decision input」 を明示 |
| §3 role boundary first | PASS | role-badge 表示 · nav は My Personal + My Audit のみ (Member ロール) · 他ロールを料理上 不表示 |
| §4 visibility rules (Employee) | PASS | Member 列 Y(self) のみ · 自分のページビューを employer に表示する UI ゼロ · accordion open/close は client-local state のみ (DB 書込まず) · footer に明記 · this page writes no audit_log doctrine を comment でも明記 |
| §5 evidence semantics | PASS | すべての signal に grade + reason code + window + not-a-verdict を同時表示 (3 signal cards － 4 点、 Today's Reflection － window + grade + 3 obs) |
| §6 no-signal rule (「no qualifying signal never means no issue」) | PASS | INSUFFICIENT カード、 notice empty、 dispute empty すべてに reason code 明示 + 「all clear」 / 「safe team」 / 「no issue」 は 一切 未決定 · 「あなた宫ての通知は ありません」 +「新しい通知が届いた場合はここに表示されます」 の passive framing |
| §7 progressive disclosure | PASS | default visible － 5 要素 (banner / reflection / 3 cards) = 「3-5 cards」 準拠 · fold 下 － 4 section accordion · default closed · ずれも route を 塁すず， accordion 内に完結 |
| §8 cognitive load | PASS | H1 は 1 つ (page-title) · H2 は reflection-title + privacy-title （明確な階層） · Today's Reflection が primary CTA 相当 · grade pill で重み付け |
| §9 dashboard rules | PASS | ソース (own) / window / grade / reason / not-a-verdict / 行動可能次歩 すべてミート · ランキング / 人気スコア / health score ゼロ |
| §11 internal screen rules | PASS | role / visibility / grade / reason / window / quality / safe actions / forbidden actions / audit behavior (= writeせず) / empty state / dispute path － すべて表示 |
| §12 a11y | PASS | 1 H1 · sane heading order (H1 -> H2 reflection/privacy -> H3 signal title) · aria-label / aria-expanded / aria-controls / aria-pressed / aria-current · focus-visible 3px evergreen ring · semantic header/main/nav/section/article/footer · icon-only button なし (CTA icon + text) |
| §13 visual system | PASS | off-white bg (#fafaf7) · dark green accent · calm pills · restrained cards · generous whitespace · eye / surveillance / police / lock icons 一切不使用 · gradient·glow 未使用 · aggressive red 未使用 |
| §14 legal / governance copy | PASS | 「fully compliant」「legally safe」「automatically enforced」 未使用 · §G (Kashi が見えていないこと) は文言不変 (mockupper 単独決剆回避) |
kashi/src/app/app/me/page.tsx) からの diff summaryEmployeePrivateExplainerSection の H1 下直最上期配置 —> メッセージを Today's Reflection card に吸収 (実装槀で explainer リファクタ 可能）requireAuth, defaultLandingForRole, requireNoticeAcceptedOrRedirect)messages/*.json に 5-8 個追加する)permanent-ui-principles.md 各條项 （canon 削減・追加せず）モックアップを co-founder / friends / mentors に満す前に、 Justine 自身が９点 check すべき 5 点:
このモックアップを React で実装する際の注意点:
kashi/src/app/app/me/page.tsxCoverageReadinessPill / MetricCard / TimeWindowToggle / EmployeePrivateExplainerSection / DisputeButton / MemberRevealButtonTodaysReflectionCard (Today's Reflection － window toggle 連動、 3 observation bullets ，passive prompt copy)PrivacyOwnershipBanner (audit-log summary count + 2 CTA ， existing privacy-banner を拡張)DetailsAccordion (Lucide chevron 地、 4 section · aria-expanded / aria-controls)me.privatePattern.* 動， me.todaysReflection.*同 新設)，
r17 forbidden-marketing lint を連動で通過することを確認最大， 同時、
test/i18n-r17-forbidden-marketing.test.ts に 「検知」「予測」 等 safe wording 失析重岗可。requireAuth · defaultLandingForRole · requireNoticeAcceptedOrRedirect 吃 合useState + aria-expanded 準拠 、)