web / lp / widget / dashboard の UI をつくるとき、人間も AI も最初に読むファイル。
トークンの実値は shared/src/styles/index.css が唯一の情報源（SSOT）。このファイルは値を複製しない。
スコープは UI のみ。キャラの人格・LINE 配信文面・音声の話し方は server/src/mastra/agents/nepp-chan-agent.ts、ブランド資産（ロゴ・三面図・商標）は identity/ が正典。
ねっぷちゃんらしさが立つのは chat / lp / widget。「紙の温度」「雪と森の村」「手ざわりのある温かさ」を感じさせる。 利用者は高齢の方を含む村民と村外ファン、スマホ主体。選択肢を絞り、説明で埋めず、迷わせない。
管理画面（dashboard）はねっぷちゃんらしさを出す場所ではない。 トークンは引き継ぐが、世界観の演出は持ち込まず、使いやすさを優先する。
実装規約（Tailwind のみ・shared 優先・dvh 等）は .claude/rules/web.md が SSOT。ここには重複させない。
- 色・余白・角丸・影は必ずトークンを使う。 生の hex や任意値を書かない。実値と使い分けは
shared/src/styles/index.cssを読む - 色はセマンティックに使う。 teal = ブランド・主要アクション / apricot = 管理者コンテキスト / moss = 成功 / sky = 情報・冷静 / berry・honey・pine = キャラクターアクセント（装飾のみ）
- 文字は読みやすさ最優先。 本文を
--fs-base（15px）未満にしない。行間は--lh-normal（1.7）基準 - モーションは控えめ・意味のあるものだけ。 ふわふわ（mascot-float）はマスコットと浮遊要素だけの特権。
prefers-reduced-motionを壊さない - マスコットは装飾ではなく状態表現。 表情・ポーズは
MascotState経由で意味を持たせる（shared/src/components/Mascot.tsx）
文体は「その文を誰が言っているか」で決める。領域では決めない。
- ねっぷちゃんの声として読まれる文 → キャラ口調（「〜だよ」「〜だね」＋絵文字）。チャット吹き出し・マスコットのセリフ・LP のキャラ自己紹介など。声の原典は
nepp-chan-agent.ts - システムが話す文 → 簡潔な丁寧語。ボタン・フォームラベル・ナビ・規約・管理画面全般
- エラーは、マスコットが言う演出ならキャラ口調可、無人のシステム文言（トースト等）なら丁寧語。どちらでも利用者を責めず、次にできることを 1 つ示す
- デザインレビューで繰り返し出た判断は「原則」に 1 行で追加する。追加・変更は必ず人間が承認する（human gate）
- 追加より削除を優先する。 迷ったら消す。追加するときは代わりに消せるものを探す（読まれない憲法にしない）
- 新しいトークン・共有部品は
index.css/ shared に追加する（このファイルには書かない） - 体験設計の壁打ちとデザイン案の作成は
/np-designスキルを使う