デザインシステム/ Brand & UI tokens
ブランド名「松葉」は、「松」と、密に重なって守る「葉」の組み合わせです。和の品格と業務 SaaS の信頼を両立させる「和モダン」を路線として、配色 / タイポ / 角丸 / コンポーネント / アイコン / アクセシビリティのトークンと方針を定めています。
ブランドの由来Brand origin
名前の由来とロゴの構成、トーンの参照対象（業務 SaaS 系と和モダン系）を示します。
松葉
/ Matsuba「葉」は密に重なって資料を守るイメージを担います。明朝のロゴと、ゴシックと Inter italic を組み合わせた本文構成で、職人気質と業務 SaaS の連続性を両立させます。
配色（カラートークン）Color tokens
Primary は鴨の羽色（Teal #0E7C75）、Accent は明るいオレンジ #FF8D44。本資料サイト自体は紙色 #F6F4EE + 金茶 #C4925A のトーンで構成しており、アプリ本体とは雰囲気を分けつつ同じブランド体系に属します。
Primary Teal
主色 · ボタン · リンク#0E7C75
Accent Orange
強調 · NEW バッジ#FF8D44
Background
アプリの紙色背景#F3FAF9
Foreground
本文 · サイドバー#0A2828
Muted
補助文字 · キャプション#486565
Border
罫 · 枠線#C8E0DC
Ring
フォーカスリング#0E7C75/60
Sidebar BG
サイドバーの深い暗色#0A2828
| 役割 | Light | Dark | 用途 |
|---|---|---|---|
| Primary | #0E7C75 | #2BC8B4 | 主色。ボタン・リンク・フォーカスリング |
| Primary FG | #FFFFFF | #04181A | Primary 上の前景色 |
| Accent | #FF8D44 | #FFA66D | 強調。NEW バッジ・注意マーカー |
| Background | #F3FAF9 | #04181A | アプリ全体の地色 |
| Foreground | #0A2828 | #D8ECEA | 本文の主色 |
| Card | #FFFFFF | #082527 | カード・パネル面 |
| Muted | #486565 | #7B9C98 | 補助文字・キャプション |
| Border | #C8E0DC | #143B3D | 罫・枠線 |
| Sidebar BG / FG | #0A2828 / #C8E0DC | #021213 / #C0DAD7 | サイドバー |
セマンティック色（状態色）: Success #C8EFD9/#115A36、Warning #FFDFCA/#AC3E00、Destructive #FFDADA/#850000、Info #D3ECE9/#0E7C75。チャート 5 色は Primary teal、Accent orange、青磁 #3A8A7E、金茶 #C9A16A、グレーティール #7B9C98。
タイポグラフィTypography
見出しは Shippori Mincho B1（明朝）、本文は Noto Sans JP（ゴシック）、英数字は Inter、等幅は JetBrains Mono。すべて Google Fonts（OFL）で、本番アプリでは next/font/google でセルフホスト配信します。
| 役割 | フォント | 用例 |
|---|---|---|
| ロゴ・見出し | Shippori Mincho B1 (fallback: Noto Serif JP / Hiragino Mincho) | 「松葉」ロゴ / h1〜h3 / カードタイトル |
| 本文 | Noto Sans JP (fallback: Hiragino Sans / Yu Gothic / Meiryo) | 段落 / テーブル / フォーム |
| 英数字 / Eyebrow / Arrow | Inter (system-ui fallback) | Inter italic で「Section · 2026」「View →」など |
| 等幅 / コード | JetBrains Mono (fallback: Menlo / Consolas) | トークンチップ / コードスニペット |
Heading · 見出し
Shippori Mincho B1 · weight 600
松葉 / Matsuba
外部企業との業務ファイル共有
letter-spacing 0.06em（見出し）/ 0.18em（ロゴ）。fallback は Noto Serif JP。
Body · 本文
Noto Sans JP · weight 400
本文は Noto Sans JP を用い、font-feature-settings: "palt" でプロポーショナル詰めを有効にします。行間は 1.7 を基本とし、長文は 1.85 まで広げます。
本文の主役書体。柔らかい読み心地と業務文書としての安定感を両立。
Accent · 英数字
Inter · italic 400
Matsuba — Baseline documentation
BaseLineDocumentation · 2026 · v1.0
Inter italic は英字サブラベル・eyebrow・arrow に使います。明朝の漢字とのコントラストでブランドの「和モダン」を作ります。
Mono · 等幅
JetBrains Mono · weight 400
const matsuba = "/0E7C75";
// scan_status: clean | quarantined
コード・トークン・ID チップで使用。背景に rgba(14,124,117,0.05) を敷いて視認性を担保。
角丸（アシンメトリック）Asymmetric radii
松葉のシグネチャは「右下だけ控えめに長く伸びた角丸」です。この非対称の処理が、矩形に手作りの余韻を残します。
radius-sm
3px 3px 10px 3px
バッジ / タグ / ボタン / コンパクトモード
radius
6px 6px 16px 6px
アプリのカード / モーダル / 入力欄（標準）
radius-lg
8px 8px 20px 8px
KPI カード / 主要パネル
radius-card（本資料）
2px 2px 24px 2px
資料ページの紙カード（より静謐な比率）
使い分け: アプリ本体は 6px 6px 16px 6px を基準にし、本資料サイト（情報密度より静けさを優先）は 2px 2px 24px 2px を採用しています。Pill 形状（バッジの丸み）は 999px。
コンポーネント方針Component policy
shadcn/ui（Radix UI ベースの React コンポーネント集）をベースに、Matsuba トークンで意図的に上書きします。デフォルトの見た目をそのまま使うと、業界で見慣れた「shadcn 製アプリ感」になるためです。
| 項目 | 方針 |
|---|---|
| ベース | shadcn/ui + Tailwind v4。@theme inline で CSS 変数を Matsuba トークンに差し替え |
| レイアウト | サイドバー 240px（折りたたみ 64px）/ Topbar 56px（backdrop-filter: blur(8px)） / Main max 1280px / padding 28px |
| コンパクトモード | .compact クラスで密度の高い画面（padding 14px / gap 8px / font 13px）に切替可 |
| テンプレート感の排除 | 均一・機械的な配置を避け、余白に強弱を作る。明朝ロゴと細罫モチーフでクラフト感を残す |
| ダークモード | シャドウは使わず、ボーダーで奥行きを表現。next-themes で切替 |
| 古典罫モチーフ | 1 画面 1〜2 箇所に限定。ページタイトル下の 1px 細罫 + 両端 4px の Primary ドットなど |
アイコン・イラスト戦略Icons & illustrations
UI アイコン・ファイル種別アイコン・イラストレーションを、用途に応じて 4 つの戦略で使い分けます。
UI Common · Brand · SNS
React Icons
UI の共通アイコン（ベル / 検索 / メニュー）とブランドロゴ（GitHub / Google）に使用します。apps/web/src/config/icons/ に集約管理し、各ファイルでの分散配置は禁止です。
アクセシビリティAccessibility
社外の不特定多数のユーザが触れる画面に耐えるよう、WCAG 2.2 AA を必達ラインとします。社外ユーザ向けの画面は AAA を目標に置きます。
| 項目 | 方針 |
|---|---|
| コントラスト | 本文 ≥ 4.5:1、UI 部品 ≥ 3:1。社外ユーザ画面は AAA（≥ 7:1）を目標 |
| WAI-ARIA | 準拠。role / aria-current / aria-label 等を必要箇所で明示 |
| キーボード操作 | すべての操作をフルキーボードで実行可能。Tab 順序を制御 |
| フォーカス | 共通スタイル: outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px;（または ring-2 ring-primary/60 ring-offset-2） |
| モーション | prefers-reduced-motion: reduce でアニメーション・トランジションを 0.01ms に縮退 |
| 言語属性 | <html lang="ja">。スクリーンリーダーが正しい音声合成エンジンを選択 |
| 見出し順序 | h1 1 回、以降は順序を飛ばさず構造化 |
本資料のデザイン（自己言及）This document itself
この資料サイト自体も、同じデザインシステムに沿って構築しています。
紙色 #F6F4EE の暖色背景、Teal #0E7C75 と金茶 #C4925A のアクセント、見出しの Shippori Mincho B1 と英字サブラベルの Inter italic、そして「右下が伸びた角丸」2px 2px 24px 2px の紙カード—これらすべてが本資料の構成要素として機能しています。アプリ本体は背景色を Teal 寄りの #F3FAF9 に切り替えますが、ブランド体系は同一です。