# Design System Inspired by Cohere

> Category: AI 與大型語言模型
> 企業級 AI 平台。鮮豔的漸層色彩，以資料儀表板為主的美學風格。

## 1. 視覺主題與氛圍

Cohere 的介面是一套精緻的企業指揮台——自信、簡潔，讓 AI 呈現出嚴肅基礎設施的質感，而非消費性玩具。整個體驗建立在明亮的白色畫布上，內容以圓角慷慨的卡片（22px 圓角半徑）加以組織，形成有機、雲朵般的包覆語言。這是一個面向 CTO 與企業架構師的網站：專業而不冷漠，精緻而不令人生畏。

這套設計語言以雙字體系統橋接兩個世界：CohereText 是一款帶有緊縮字距的客製顯示襯線體，賦予標題技術宣言般的份量；Unica77 Cohere Web 則以幾何的瑞士精確度處理所有內文與 UI 文字。這種襯線體與無襯線體的搭配，造就了「自信權威遇上工程清晰」的個性，完美體現企業 AI 平台的特質。

色彩的運用極為克制——介面幾乎全為黑白，輔以冷灰色邊框（`#d9d9dd`、`#e5e7eb`）。紫羅蘭色僅出現在攝影主視覺帶、漸層區塊，以及標示懸停與焦點狀態的互動藍（`#1863dc`）中。這種色彩克制意味著，當色彩確實出現時——無論是在產品截圖、企業攝影，還是深紫色區塊中——都能帶來最大的視覺重量。

**主要特徵：**
- 明亮的白色畫布搭配冷灰色包覆邊框
- 22px 特色圓角半徑——獨特的「Cohere 卡片」圓潤感
- 雙客製字體：CohereText（顯示襯線體）+ Unica77（內文無襯線體）
- 企業級色彩克制：黑色、白色、冷灰色，最少量的紫藍色強調
- 深紫色/紫羅蘭色主視覺區塊，提供強烈的對比效果
- 幽靈/透明按鈕，懸停時轉為藍色
- 展示多元真實場景的企業攝影
- CohereMono 用於程式碼與技術標籤，搭配大寫轉換

## 2. 色彩調色盤與角色

### 主色
- **Cohere Black**（`#000000`）：主要標題文字及最高強調元素。
- **Near Black**（`#212121`）：標準內文連結色——比純黑稍柔和。
- **Deep Dark**（`#17171c`）：帶藍調的近黑色，用於導覽列與深色區塊文字。

### 輔助色與強調色
- **Interaction Blue**（`#1863dc`）：主要互動強調色——出現在按鈕懸停、焦點狀態與使用中連結上，是唯一的彩色操作色。
- **Ring Blue**（`#4c6ee6`，50% 不透明度）：鍵盤焦點指示器的 Tailwind ring 顏色。
- **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（緊縮） | -1.44px | 最大衝擊力，襯線體權威感 |
| 次要顯示 | CohereText | 60px (3.75rem) | 400 | 1.00（緊縮） | -1.2px | 大型區段標題 |
| 區段標題 | Unica77 | 48px (3rem) | 400 | 1.20（緊縮） | -0.48px | 功能區段標題 |
| 次標題 | Unica77 | 32px (2rem) | 400 | 1.20（緊縮） | -0.32px | 卡片標題、功能名稱 |
| 功能標題 | Unica77 | 24px (1.5rem) | 400 | 1.30 | 正常 | 較小的區段標題 |
| 大型內文 | Unica77 | 18px (1.13rem) | 400 | 1.40 | 正常 | 導言段落 |
| 內文 / 按鈕 | Unica77 | 16px (1rem) | 400 | 1.50 | 正常 | 標準內文、按鈕文字 |
| 中型按鈕 | Unica77 | 14px (0.88rem) | 500 | 1.71（寬鬆） | 正常 | 較小按鈕、強調標籤 |
| 說明文字 | Unica77 | 14px (0.88rem) | 400 | 1.40 | 正常 | 元資料、描述文字 |
| 大寫標籤 | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大寫區段標籤 |
| 小型 | Unica77 | 12px (0.75rem) | 400 | 1.40 | 正常 | 最小文字、頁尾連結 |
| 微型程式碼 | 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. 元件樣式

### 按鈕

**幽靈 / 透明**
- 背景：透明（`rgba(255, 255, 255, 0)`）
- 文字：Cohere Black（`#000000`）
- 無可見邊框
- 懸停：文字轉為 Interaction Blue（`#1863dc`），不透明度 0.8
- 焦點：Interaction Blue 的 2px 實心外框
- 主要按鈕樣式——在互動前不可見

**深色實心**
- 背景：深色/黑色
- 文字：Pure White
- 用於淺色表面的 CTA
- 藥丸形或標準圓角

**外框**
- 以邊框為主的包覆
- 用於次要操作

### 卡片與容器
- 背景：Pure White（`#ffffff`）
- 邊框：微妙卡片使用 Lightest Gray 細實線（`1px solid #f2f2f2`）；強調卡片使用 Cool Border（`#d9d9dd`）
- 圓角：**22px**——主要卡片、圖片與對話框容器的特色 Cohere 圓角。較小元素另有 4px、8px、16px、20px
- 陰影：極少——Cohere 依靠背景色與邊框而非陰影
- 特殊：`0px 0px 22px 22px` 圓角（僅下方圓角）用於區段容器
- 對話框：8px 圓角用於 modal/dialog 框

### 輸入框與表單
- 文字：深色輸入框上為白色，淺色輸入框上為黑色
- 焦點邊框：Focus Purple（`#9b60aa`），`1px solid`
- 焦點陰影：紅色 ring（`rgb(179, 0, 0) 0px 0px 0px 2px`）——可能用於錯誤狀態指示
- 焦點外框：Interaction Blue 實心 2px

### 導覽列
- 在白色或深色背景上乾淨的水平導覽
- Logo：Cohere wordmark（客製 SVG）
- 連結：16px Unica77 深色文字
- CTA：深色實心按鈕
- 行動裝置：折疊為漢堡選單

### 圖片處理
- 展示多元主題與環境的企業攝影
- 戲劇性區段使用帶紫色調的主視覺攝影
- 深色表面上的產品 UI 截圖
- 圖片使用 22px 圓角，與卡片系統一致
- 全寬深紫色漸層區段

### 特色元件

**22px 卡片系統**
- 22px 邊框圓角是 Cohere 的視覺簽名
- 所有主要卡片、圖片與容器皆使用此圓角
- 創造出雲朵般的有機柔軟感，有別於典型的 8–12px

**企業信任條**
- 以水平列表展示公司 Logo
- 展現企業採用程度
- 乾淨的單色 Logo 處理

**紫色主視覺帶**
- 容納產品展示的全寬深紫色區段
- 在白色頁面流程中製造強烈的視覺斷點
- 產品截圖浮於紫色環境之中

**大寫程式碼標籤**
- 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 圓角卡片，形成自然的資訊群組。

### 邊框圓角刻度
- 銳利（4px）：導覽元素、小型標籤、分頁
- 舒適（8px）：對話框、次要容器、小型卡片
- 寬裕（16px）：精選容器、中型卡片
- 大型（20px）：大型功能卡片
- 特色（22px）：主要卡片、主視覺圖片、主容器——THE Cohere 圓角
- 藥丸（9999px）：按鈕、標籤、狀態指示器

## 6. 深度與層次

| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 平面（Level 0） | 無陰影，無邊框 | 頁面背景、文字區塊 |
| 有框（Level 1） | `1px solid #f2f2f2` 或 `#d9d9dd` | 標準卡片、列表分隔線 |
| 紫色帶（Level 2） | 全寬深紫色背景 | 主視覺區段、功能展示 |

**陰影哲學**：Cohere 幾乎不使用陰影。深度通過**背景色對比**（紫色帶上的白色卡片、snow 表面上的白色）、**邊框包覆**（冷灰色邊框），以及**明暗區段交替**這種戲劇性手法來傳達。當元素需要層次感時，是透過白色置於深色上而非投射陰影來達成的。

## 7. 應做與不應做

### 應做
- 所有主要卡片與容器使用 22px 邊框圓角——這是視覺簽名
- 顯示標題（72px、60px）使用 CohereText，搭配負字距
- 所有內文與 UI 文字使用 Unica77，字重 400
- 保持黑白調色盤搭配冷灰色邊框
- Interaction Blue（#1863dc）僅用於懸停/焦點互動狀態
- 深紫色區段用於強烈的視覺斷點與產品展示
- CohereMono 的區段標籤使用大寫加正字距
- 維持適合企業的攝影風格，展示多元主題

### 不應做
- 主要卡片不使用 22px 以外的邊框圓角——特色圓角至關重要
- 不引入暖色調——調色盤嚴格為冷色系
- 不使用重陰影——深度來自色彩對比與邊框
- 內文不使用粗體（700+）字重——範圍為 400–500
- 不跳過襯線體/無襯線體層級——CohereText 用於標題，Unica77 用於內文
- 紫色不作為卡片表面色——紫色保留給全寬區段
- 區段間距不低於 40px——企業版面需要呼吸空間
- 按鈕預設不使用裝飾——幽靈/透明是基本狀態

## 8. 響應式行為

### 斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 小型手機 | <425px | 緊湊版面，最少間距 |
| 手機 | 425–640px | 單欄，堆疊卡片 |
| 大型手機 | 640–768px | 微幅間距調整 |
| 平板 | 768–1024px | 開始使用雙欄格線 |
| 桌面 | 1024–1440px | 完整多欄版面 |
| 大型桌面 | 1440–2560px | 最大容器寬度 |

*偵測到 26 個斷點——資料集中響應式設計最精細的網站之一。*

### 觸控目標
- 按鈕尺寸足以適應觸控互動
- 導覽連結間距舒適
- 卡片表面作為觸控目標

### 折疊策略
- **導覽列**：完整導覽列折疊為漢堡選單
- **功能格線**：多欄 → 雙欄 → 單欄
- **主視覺文字**：72px → 48px → 32px 漸進縮放
- **紫色區段**：維持全寬，內容堆疊
- **卡片格線**：3 → 2 → 1 欄

### 圖片行為
- 攝影在 22px 圓角容器內等比例縮放
- 產品截圖維持長寬比
- 紫色區段背景等比例縮放

## 9. Agent 提示指南

### 快速色彩參考
- 主要文字：「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，行高 1.0，字距 -1.44px。Cohere Black 文字。副標題使用 Unica77，18px 字重 400，行高 1.4。」
- 「設計一個 22px 邊框圓角的功能卡片，白色背景搭配 1px solid Lightest Gray (#f2f2f2) 邊框。標題使用 Unica77，32px，字距 -0.32px。內文使用 Unica77，16px，Muted Slate (#93939f)。」
- 「製作一個幽靈按鈕：透明背景，Unica77 16px 的 Cohere Black 文字。懸停時文字轉為 Interaction Blue (#1863dc)，不透明度 0.8。焦點：2px solid Interaction Blue 外框。」
- 「建立一個深紫色全寬區段搭配白色文字。標題使用 CohereText 60px。產品截圖浮於其中，使用 22px 邊框圓角。」
- 「使用 CohereMono 設計區段標籤，14px，大寫，字距 0.28px。Muted Slate (#93939f) 文字。」

### 迭代指南
1. 每次專注於單一元件
2. 主要卡片永遠使用 22px 圓角——「Cohere 卡片圓潤感」
3. 明確指定字體——CohereText 用於標題，Unica77 用於內文，CohereMono 用於標籤
4. 互動元素僅在懸停時使用 Interaction Blue (#1863dc)
5. 保持表面為白色搭配冷灰色邊框——不使用暖色調
6. 紫色用於全寬區段，絕不用於卡片背景