From 54e50fabf16207f7c99800b60e06ef1c103f89f5 Mon Sep 17 00:00:00 2001
From: posimai <posimai.project@gmail.com>
Date: Mon, 13 Apr 2026 09:19:13 +0900
Subject: [PATCH] docs(design): prohibit colored borderLeft on card lists

Card-type components must not use borderLeft for severity color.
Severity is expressed via icon + dim-bg badge only.
Navigation tree active state remains an exception.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 DESIGN.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/DESIGN.md b/DESIGN.md
index 22205baf..7370bee2 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -275,6 +275,31 @@ Station・Guard・その他サイバー系アプリで使うダークブルー
 
 ## 9. Do's and Don'ts（コードレベル）
 
+### カードの左縦罫線（禁止）
+
+カード型リスト（IssueCard, CVECard, LicenseCard, IacCard など）の左辺に severity/状態カラーを使った縦罫線を付けてはいけない。
+severity は内部のアイコンと dim-bg バッジで表現する。縦罫線はノイズになり "AIっぽいダサさ" の原因になる。
+
+```tsx
+// NG: 左罫線で severity を表現
+<div style={{
+  border: '1px solid var(--border)',
+  borderLeft: `2px solid ${cfg.color}`,   // ← 禁止
+}}>
+
+// OK: 左罫線なし。アイコン + dim-bg バッジで severity を示す
+<div style={{
+  border: '1px solid var(--border)',
+}}>
+  <div style={{ background: cfg.dim }}>
+    <Icon style={{ color: cfg.color }} />
+  </div>
+```
+
+例外: ファイルツリーのアクティブ選択状態（`borderLeft: '2px solid var(--accent)'`）は許可。ナビゲーション状態の表示であり、カードではないため。
+
+---
+
 ### 色の使い方
 
 ```html