admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
270 lines
20 KiB
Markdown
270 lines
20 KiB
Markdown
# Cohereにインスパイアされたデザインシステム
|
||
|
||
> Category: AI・LLM
|
||
> エンタープライズAIプラットフォーム。鮮やかなグラデーション、データリッチなダッシュボード美学。
|
||
|
||
## 1. ビジュアルテーマと雰囲気
|
||
|
||
Cohereのインターフェースは洗練されたエンタープライズ指令デッキ——自信に満ち、クリーンで、AIを消費者向けのおもちゃではなく本格的なインフラとして感じさせるデザインです。体験は明るいホワイトキャンバスの上に展開され、コンテンツはたっぷりとした丸みを持つカード（22px radius）に整理され、有機的なクラウドのような包括言語を生み出します。これはCTOやエンタープライズアーキテクトに語りかけるサイトです——冷たさのないプロフェッショナル感、威圧感のない洗練さ。
|
||
|
||
デザイン言語は、デュアルタイプフェイスシステムによって2つの世界を橋渡しします。タイトなトラッキングを持つカスタムディスプレイセリフのCohereTextは、ヘッドラインにテクノロジー宣言のような重厚感を与え、Unica77 Cohere Webはすべてのボディ・UIテキストをジオメトリックなスイス的精度で処理します。このセリフ/サンセリフのペアリングは「自信ある権威とエンジニアリングの明晰さ」という個性を生み出し、エンタープライズAIプラットフォームを完璧に体現します。
|
||
|
||
色は極めて節制して使われます——インターフェースはほぼ完全に白黒で、クールグレーのボーダー（`#d9d9dd`、`#e5e7eb`）が用いられます。パープル-バイオレットは、フォトグラフィックなヒーローバンド、グラデーションセクション、そしてホバーとフォーカス状態を示すインタラクティブブルー（`#1863dc`）にのみ現れます。この色彩的な節制により、色が登場する場面——製品スクリーンショット、エンタープライズフォトグラフィー、濃いパープルセクション——では最大限の視覚的重量を持ちます。
|
||
|
||
**主な特徴：**
|
||
- クールグレーの区切りボーダーを持つ明るいホワイトキャンバス
|
||
- 22pxシグネチャーborder-radius——「Cohereカード」の独特な丸みの特徴
|
||
- デュアルカスタムタイプフェイス：CohereText（ディスプレイセリフ）+ Unica77（ボディサンセリフ）
|
||
- エンタープライズグレードの色彩節制：黒・白・クールグレー、最小限のパープルブルーアクセント
|
||
- ドラマチックなコントラストを生み出す深いパープル/バイオレットのヒーローセクション
|
||
- ホバー時にブルーに変化するゴースト/透明ボタン
|
||
- 多様なリアルワールドアプリケーションを示すエンタープライズフォトグラフィー
|
||
- 大文字変換を伴うコードや技術ラベル用のCohereMono
|
||
|
||
## 2. カラーパレットと役割
|
||
|
||
### プライマリ
|
||
- **Cohere Black** (`#000000`): プライマリヘッドラインテキストと最大強調要素。
|
||
- **Near Black** (`#212121`): 標準ボディリンクカラー——純粋な黒よりわずかにソフト。
|
||
- **Deep Dark** (`#17171c`): ナビゲーションとダークセクションテキスト用の青みがかったニアブラック。
|
||
|
||
### セカンダリ・アクセント
|
||
- **Interaction Blue** (`#1863dc`): プライマリインタラクティブアクセント——ボタンホバー、フォーカス状態、アクティブリンクに現れます。唯一の色彩的アクションカラー。
|
||
- **Ring Blue** (`#4c6ee6` at 50%): キーボードフォーカスインジケーター用のTailwindリングカラー。
|
||
- **Focus Purple** (`#9b60aa`): インプットフォーカスボーダーカラー——ミュートバイオレット。
|
||
|
||
### サーフェス・バックグラウンド
|
||
- **Pure White** (`#ffffff`): プライマリページバックグラウンドとカードサーフェス。
|
||
- **Snow** (`#fafafa`): 微妙な立体感のあるサーフェスとライトセクションバックグラウンド。
|
||
- **Lightest Gray** (`#f2f2f2`): カードボーダーと最もソフトな区切りライン。
|
||
|
||
### ニュートラル・テキスト
|
||
- **Muted Slate** (`#93939f`): 控えめなフッターリンクとターシャリテキスト——わずかなブルーバイオレットのトーンを持つクールグレー。
|
||
- **Border Cool** (`#d9d9dd`): 標準セクションとリストアイテムボーダー——クールでわずかにパープルがかったグレー。
|
||
- **Border Light** (`#e5e7eb`): ライターボーダーバリアント——Tailwindの標準gray-200。
|
||
|
||
### グラデーションシステム
|
||
- **パープル-バイオレットヒーローバンド**: ホワイトキャンバスに対してドラマチックなコントラストを生み出す深いパープルグラデーションセクション。製品スクリーンショットと主要メッセージを収める全幅バンドとして現れます。
|
||
- **ダークフッターグラデーション**: ページは深いパープル/チャコールからブラックフッターへと移行し、「夕暮れ」のような効果を生み出します。
|
||
|
||
## 3. タイポグラフィルール
|
||
|
||
### フォントファミリー
|
||
- **ディスプレイ**: `CohereText`、フォールバック: `Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||
- **ボディ / UI**: `Unica77 Cohere Web`、フォールバック: `Inter, Arial, ui-sans-serif, system-ui`
|
||
- **コード**: `CohereMono`、フォールバック: `Arial, ui-sans-serif, system-ui`
|
||
- **アイコン**: `CohereIconDefault`（カスタムアイコンフォント）
|
||
|
||
### 階層
|
||
|
||
| 役割 | フォント | サイズ | ウェイト | 行の高さ | 文字間隔 | 備考 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| ディスプレイ / ヒーロー | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | 最大インパクト、セリフの権威感 |
|
||
| ディスプレイセカンダリ | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | 大きなセクション見出し |
|
||
| セクション見出し | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | フィーチャーセクションタイトル |
|
||
| サブ見出し | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | カード見出し、機能名 |
|
||
| フィーチャータイトル | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | 小さいセクションタイトル |
|
||
| ボディラージ | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | イントロパラグラフ |
|
||
| ボディ / ボタン | Unica77 | 16px (1rem) | 400 | 1.50 | normal | 標準ボディ、ボタンテキスト |
|
||
| ボタンミディアム | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | 小さいボタン、強調ラベル |
|
||
| キャプション | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | メタデータ、説明 |
|
||
| 大文字ラベル | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大文字セクションラベル |
|
||
| スモール | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | 最小テキスト、フッターリンク |
|
||
| コードマイクロ | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 小さな大文字コードラベル |
|
||
|
||
### 原則
|
||
- **宣言にはセリフ、ユーティリティにはサンセリフ**: CohereTextはディスプレイスケールでブランドボイスを担います——そのセリフのターミナルがヘッドラインに発表された研究のような権威感を与えます。Unica77はすべての機能的な部分をスイス・ジオメトリックの中立性で処理します。
|
||
- **スケール時のネガティブトラッキング**: CohereTextは60〜72pxで-1.2px〜-1.44pxの文字間隔を使用し、密度の高いインパクトあるテキストブロックを生み出します。
|
||
- **シングルボディウェイト**: Unica77の使用はほぼすべてウェイト400です。ウェイト500は小さなボタン強調にのみ現れます。このシステムはウェイトのコントラストではなく、サイズとスペーシングに依存します。
|
||
- **大文字コードラベル**: CohereMonoは技術タグとセクションマーカーに大文字とポジティブな文字間隔（0.16〜0.28px）を使用します。
|
||
|
||
## 4. コンポーネントスタイリング
|
||
|
||
### ボタン
|
||
|
||
**ゴースト / 透明**
|
||
- Background: transparent (`rgba(255, 255, 255, 0)`)
|
||
- テキスト: Cohere Black (`#000000`)
|
||
- ボーダー非表示
|
||
- ホバー: テキストがInteraction Blue (`#1863dc`)にシフト、opacity 0.8
|
||
- フォーカス: Interaction Blueによるsolid 2px outline
|
||
- プライマリボタンスタイル——インタラクション時まで非表示
|
||
|
||
**ダークソリッド**
|
||
- Background: dark/black
|
||
- テキスト: Pure White
|
||
- ライトサーフェス上のCTA用
|
||
- ピル形状または標準radius
|
||
|
||
**アウトライン**
|
||
- ボーダーベースの区切り
|
||
- セカンダリアクションに使用
|
||
|
||
### カードとコンテナ
|
||
- Background: Pure White (`#ffffff`)
|
||
- ボーダー: 微妙なカードには thin solid Lightest Gray（`1px solid #f2f2f2`）、強調には Cool Border（`#d9d9dd`）
|
||
- Radius: **22px**——プライマリカード、画像、ダイアログコンテナのCohere署名radius。小さい要素には4px、8px、16px、20pxも使用
|
||
- シャドウ: 最小限——Cohereはシャドウよりバックグラウンドカラーとボーダーに依存
|
||
- 特殊: `0px 0px 22px 22px` radius（下部のみ丸み）セクションコンテナ用
|
||
- ダイアログ: モーダル/ダイアログボックスには8px radius
|
||
|
||
### インプットとフォーム
|
||
- テキスト: ダークインプット上は白、ライト上は黒
|
||
- フォーカスボーダー: Focus Purple (`#9b60aa`) with `1px solid`
|
||
- フォーカスシャドウ: redリング（`rgb(179, 0, 0) 0px 0px 0px 2px`）——エラー状態の表示に使用
|
||
- フォーカスアウトライン: Interaction Blue solid 2px
|
||
|
||
### ナビゲーション
|
||
- 白またはダークバックグラウンドにクリーンなホリゾンタルナビ
|
||
- ロゴ: Cohereワードマーク（カスタムSVG）
|
||
- リンク: 16px Unica77のダークテキスト
|
||
- CTA: ダークソリッドボタン
|
||
- モバイル: ハンバーガー折りたたみ
|
||
|
||
### 画像処理
|
||
- 多様な被写体と環境のエンタープライズフォトグラフィー
|
||
- ドラマチックなセクション用のパープルがかったヒーローフォトグラフィー
|
||
- ダークサーフェス上の製品UIスクリーンショット
|
||
- カードシステムに合わせた22px radiusの画像
|
||
- 全幅パープルグラデーションセクション
|
||
|
||
### 特徴的なコンポーネント
|
||
|
||
**22pxカードシステム**
|
||
- 22px border-radiusはCohereのビジュアルシグネチャです
|
||
- すべてのプライマリカード、画像、コンテナはこのradiusを使用
|
||
- 典型的な8〜12pxとは異なる、クラウドのような有機的な柔らかさを生み出します
|
||
|
||
**エンタープライズトラストバー**
|
||
- 企業ロゴをホリゾンタルストリップに表示
|
||
- エンタープライズ採用を示す
|
||
- クリーンなモノクロロゴ処理
|
||
|
||
**パープルヒーローバンド**
|
||
- 製品ショーケースを収める全幅の深いパープルセクション
|
||
- ホワイトページフローにドラマチックな視覚的断絶を生み出す
|
||
- 製品スクリーンショットがパープル環境内に浮かぶ
|
||
|
||
**大文字コードタグ**
|
||
- 文字間隔付き大文字のCohereMono
|
||
- セクションマーカーと分類ラベルとして使用
|
||
- 技術的で構造化された情報階層を生み出す
|
||
|
||
## 5. レイアウト原則
|
||
|
||
### スペーシングシステム
|
||
- 基本単位: 8px
|
||
- スケール: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
|
||
- ボタンpaddingはバリアントによって異なる
|
||
- カード内部padding: 約24〜32px
|
||
- セクション縦スペーシング: 余裕を持たせる（セクション間56〜60px）
|
||
|
||
### グリッドとコンテナ
|
||
- 最大コンテナ幅: 2560pxまで（非常に広い）、レスポンシブスケーリング対応
|
||
- ヒーロー: ドラマチックなタイポグラフィで中央揃え
|
||
- フィーチャーセクション: 複数列カードグリッド
|
||
- エンタープライズセクション: 全幅パープルバンド
|
||
- 26のブレークポイントを検出——非常に細かいレスポンシブシステム
|
||
|
||
### ホワイトスペース哲学
|
||
- **エンタープライズの明確さ**: 各セクションは一つの明確な提案を、間に余白を持たせて提示します。
|
||
- **フォトグラフィーをヒーローとして**: 大きなフォトグラフィックセクションが装飾的なデザイン要素を必要とせずに視覚的な興味を提供します。
|
||
- **カードグルーピング**: 関連コンテンツは22px丸みのカードにグループ化され、自然な情報クラスターを形成します。
|
||
|
||
### Border Radiusスケール
|
||
- シャープ（4px）: ナビゲーション要素、小さなタグ、ページネーション
|
||
- コンフォタブル（8px）: ダイアログボックス、セカンダリコンテナ、小さなカード
|
||
- ジェネラス（16px）: フィーチャーコンテナ、ミディアムカード
|
||
- ラージ（20px）: 大きなフィーチャーカード
|
||
- シグネチャー（22px）: プライマリカード、ヒーロー画像、メインコンテナ——Cohereのradius
|
||
- ピル（9999px）: ボタン、タグ、ステータスインジケーター
|
||
|
||
## 6. 奥行きと立体感
|
||
|
||
| レベル | 処理 | 使用 |
|
||
|-------|-----------|-----|
|
||
| フラット（Level 0） | シャドウなし、ボーダーなし | ページバックグラウンド、テキストブロック |
|
||
| ボーダー付き（Level 1） | `1px solid #f2f2f2` または `#d9d9dd` | 標準カード、リスト区切り |
|
||
| パープルバンド（Level 2） | 全幅のダークパープルバックグラウンド | ヒーローセクション、フィーチャーショーケース |
|
||
|
||
**シャドウ哲学**: Cohereはほぼシャドウを使いません。奥行きは**バックグラウンドカラーのコントラスト**（パープルバンド上のホワイトカード、スノー上のホワイトサーフェス）、**ボーダーによる区切り**（クールグレーボーダー）、そしてドラマチックな**ライト-ダークセクションの交互表示**で伝えられます。要素に立体感が必要な場合、シャドウを落とすのではなくダーク上のホワイトによって実現します。
|
||
|
||
## 7. すべきこと・すべきでないこと
|
||
|
||
### すべきこと
|
||
- すべてのプライマリカードとコンテナに22px border-radiusを使用する——これがビジュアルシグネチャです
|
||
- ネガティブ文字間隔でCohereTextをディスプレイ見出し（72px、60px）に使用する
|
||
- すべてのボディとUIテキストにUnica77をウェイト400で使用する
|
||
- パレットをクールグレーボーダーの白黒に保つ
|
||
- Interaction Blue (#1863dc)はホバー/フォーカスのインタラクティブ状態にのみ使用する
|
||
- ドラマチックな視覚的断絶と製品ショーケースには深いパープルセクションを使用する
|
||
- セクションラベルにはCohereMono + 大文字 + 文字間隔を適用する
|
||
- 多様な被写体のエンタープライズ相応のフォトグラフィーを維持する
|
||
|
||
### すべきでないこと
|
||
- プライマリカードに22px以外のborder-radiusを使用しない——シグネチャradiusは重要です
|
||
- ウォームカラーを導入しない——パレットは厳密にクールトーンです
|
||
- 重いシャドウを使用しない——奥行きはカラーコントラストとボーダーから生まれます
|
||
- ボディテキストにボールド（700+）ウェイトを使用しない——400〜500が範囲です
|
||
- セリフ/サンセリフの階層を省略しない——ヘッドラインにはCohereText、ボディにはUnica77
|
||
- カードのサーフェスカラーにパープルを使用しない——パープルは全幅セクション専用です
|
||
- セクションスペーシングを40px以下に減らさない——エンタープライズレイアウトには余白が必要です
|
||
- デフォルトでボタンに装飾を加えない——ゴースト/透明がベーススタイルです
|
||
|
||
## 8. レスポンシブ動作
|
||
|
||
### ブレークポイント
|
||
| 名称 | 幅 | 主な変更 |
|
||
|------|-------|-------------|
|
||
| スモールモバイル | <425px | コンパクトレイアウト、最小限のスペーシング |
|
||
| モバイル | 425–640px | シングルカラム、積み重ねカード |
|
||
| ラージモバイル | 640–768px | 軽微なスペーシング調整 |
|
||
| タブレット | 768–1024px | 2カラムグリッド開始 |
|
||
| デスクトップ | 1024–1440px | フル複数列レイアウト |
|
||
| ラージデスクトップ | 1440–2560px | 最大コンテナ幅 |
|
||
|
||
*26のブレークポイントを検出——データセット中で最もきめ細かいレスポンシブサイトの一つ。*
|
||
|
||
### タッチターゲット
|
||
- タッチインタラクションに十分なサイズのボタン
|
||
- 適切なスペーシングのナビゲーションリンク
|
||
- タッチターゲットとしてのカードサーフェス
|
||
|
||
### 折りたたみ戦略
|
||
- **ナビゲーション**: フルナビゲーションはハンバーガーに折りたたみ
|
||
- **フィーチャーグリッド**: 複数列 → 2列 → シングルカラム
|
||
- **ヒーローテキスト**: 72px → 48px → 32px のプログレッシブスケーリング
|
||
- **パープルセクション**: 全幅を維持し、コンテンツが積み重なる
|
||
- **カードグリッド**: 3 → 2 → 1カラム
|
||
|
||
### 画像の動作
|
||
- フォトグラフィーは22px radiusコンテナ内で比率を維持してスケール
|
||
- 製品スクリーンショットはアスペクト比を維持
|
||
- パープルセクションはバックグラウンドを比率に合わせてスケール
|
||
|
||
## 9. エージェントプロンプトガイド
|
||
|
||
### クイックカラーリファレンス
|
||
- プライマリテキスト: "Cohere Black (#000000)"
|
||
- ページバックグラウンド: "Pure White (#ffffff)"
|
||
- セカンダリテキスト: "Near Black (#212121)"
|
||
- ホバーアクセント: "Interaction Blue (#1863dc)"
|
||
- ミュートテキスト: "Muted Slate (#93939f)"
|
||
- カードボーダー: "Lightest Gray (#f2f2f2)"
|
||
- セクションボーダー: "Border Cool (#d9d9dd)"
|
||
|
||
### コンポーネントプロンプトの例
|
||
- "Pure White (#ffffff) 上にCohereTextを72px ウェイト400、line-height 1.0、letter-spacing -1.44pxで使ったヒーローセクションを作成してください。Cohere Blackのテキスト。サブタイトルはUnica77で18px ウェイト400、line-height 1.4。"
|
||
- "22px border-radius、white上に1px solid Lightest Gray (#f2f2f2) ボーダーのフィーチャーカードをデザインしてください。タイトルはUnica77で32px、letter-spacing -0.32px。ボディはUnica77で16px、Muted Slate (#93939f)。"
|
||
- "ゴーストボタンを構築してください：透明バックグラウンド、Unica77 16pxのCohere Blackテキスト。ホバー時、テキストがInteraction Blue (#1863dc) にopacity 0.8でシフト。フォーカス：2px solid Interaction Blueアウトライン。"
|
||
- "ホワイトテキストの深いパープル全幅セクションを作成してください。見出しにCohereTextを60px。製品スクリーンショットが22px border-radiusを使って内側に浮かびます。"
|
||
- "CohereMono 14px、大文字、letter-spacing 0.28pxのセクションラベルをデザインしてください。Muted Slate (#93939f) テキスト。"
|
||
|
||
### イテレーションガイド
|
||
1. 一度に一つのコンポーネントに集中する
|
||
2. プライマリカードには常に22px radiusを使用——「Cohereカードの丸み」
|
||
3. タイプフェイスを明示する——ヘッドラインにはCohereText、ボディにはUnica77、ラベルにはCohereMono
|
||
4. インタラクティブ要素はホバー時のみInteraction Blue (#1863dc) を使用
|
||
5. サーフェスはクールグレーボーダーのホワイトに保つ——ウォームトーンなし
|
||
6. パープルは全幅セクション専用——カードバックグラウンドには使わない
|