# 以 OpenAI 為靈感的設計系統

> Category: AI 與大型語言模型
> 以深色藍綠黑為錨點、搭配寬裕留白與編輯感排版的沉靜近無彩系統。

## 1. 視覺主題與氛圍

OpenAI 的產品介面讀起來像一座為公眾開放的研究室——理性、克制、刻意保持靜謐。頁面背景為純白（`#ffffff`），疊加帶有微妙藍綠底色的近黑墨色（`#0d0d0d`），使文字呈現一種偏冷而非過分深沉的質感。這種色彩中性感將模型輸出、程式碼與文章段落推到視覺中心，而非讓周遭的框架搶戲。

系統的標誌性做法是以克制字重使用 **Söhne**（或其系統替代字型 `inter`）——內文 400、導覽與標籤 500、強調 600——並搭配 **Signifier**，一款用於編輯展示的當代襯線字型。多數 AI 品牌偏向未來感，OpenAI 的襯線標題卻賦予產品一種靜謐的文學氣質，彷彿每則公告都是一篇文章。

造型系統統一採用柔和圓角：8px–12px 的圓角半徑，標籤與徽章使用 9999px 圓滑膠囊形，任何地方都不見尖銳稜角。區塊之間以留白而非分隔線做為過渡；若出現邊框，則是 `#e5e5e5` 的細線，讀起來更像色彩的缺席而非存在。

**主要特徵：**
- 純白畫布（`#ffffff`）搭配深色藍綠黑墨（`#0d0d0d`）
- Söhne / Inter 採用適中字重（400、500、600）——強調克制而非張揚
- Signifier 襯線字型用於編輯展示標題
- 全域柔和 8–12px 圓角；徽章採用 9999px 膠囊形
- 細線邊框（`#e5e5e5`）謹慎使用；留白為主要分隔手段
- 深藍綠單色插圖——標誌符號中不使用漸層
- 寬裕行高（1.55–1.65），字距趨近於零

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

### 主色
- **純白** (`#ffffff`)：主背景、卡片表面、按鈕背景。
- **墨黑** (`#0d0d0d`)：主文字、品牌標誌、主要行動按鈕。
- **柔黑** (`#1a1a1a`)：次要標題、非關鍵文字的替代墨色。

### 介面表面與背景
- **薄霧** (`#fafafa`)：區塊分隔背景、頁尾介面。
- **珍珠** (`#f5f5f5`)：卡片表面、高架面板。
- **雲白** (`#ececec`)：禁用狀態背景、分隔色調。

### 品牌強調色
- **OpenAI Teal** (`#10a37f`)：品牌主色、連結、高亮徽章——在近無彩系統中唯一的有彩色。
- **Teal Deep** (`#0a7a5e`)：品牌色的懸停與按下狀態。
- **Teal Soft** (`#e8f5f0`)：成功徽章、高亮提示塊的介面色調。

### 中性色與文字色
- **石墨** (`#3c3c3c`)：內文、預設閱讀色。
- **板岩** (`#6e6e6e`)：次要文字、說明、後設資料。
- **灰燼** (`#9b9b9b`)：第三層文字、預留位置、禁用標籤。
- **石灰** (`#c4c4c4`)：裝飾性分隔線、淡色圖示。

### 語意色與邊框
- **Border Hairline** (`#e5e5e5`)：標準細線分隔。
- **Border Soft** (`#ededed`)：白色介面上的卡片外框。
- **Error** (`#ef4146`)：驗證錯誤、破壞性操作。
- **Warning** (`#f5a623`)：柔和琥珀色，用於提示狀態。
- **Info** (`#2563eb`)：資訊連結色調（謹慎使用；藍綠色仍為主角）。

## 3. 字體排版規則

### 字型家族
- **展示 / 編輯**：`Signifier`，後備字型：`'Source Serif Pro', Georgia, serif`
- **內文 / 介面**：`Söhne`，後備字型：`Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
- **程式碼 / 等寬**：`Söhne Mono`，後備字型：`ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`

### 層次結構

| 角色 | 字型 | 尺寸 | 字重 | 行高 | 字距 | 備註 |
|------|------|------|--------|-------------|----------------|-------|
| Display | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 編輯英雄區、公告標題 |
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 頁面標題 |
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 區塊標題 |
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 子區塊 |
| Body Large | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 導言段落 |
| Body | Söhne | 16px (1rem) | 400 | 1.65 | normal | 標準閱讀文字 |
| Body Small | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 卡片內文、高密度介面 |
| Caption | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 後設資料、徽章 |
| Label | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 眉標、大寫導覽連結 |
| Code | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 程式碼區塊、終端機輸出 |

### 原則
- **克制即風格**：字重上限為 600；700 以上顯得偏離品牌調性。層次感來自尺寸與顏色，而非字重。
- **襯線賦予靈魂，無襯線承載系統**：Signifier 僅用於編輯展示的特定時刻，產品介面一律使用無襯線字型。
- **展示字級採用負字距**：展示字級使用 -0.02em；16px 起字距回歸至零。

## 4. 元件樣式

### 按鈕

**主要按鈕**
- Background: `#0d0d0d`
- Text: `#ffffff`
- Padding: 10px 18px
- Radius: 9999px（徽章用全圓膠囊形），矩形行動按鈕用 12px
- Hover: `#1a1a1a` background
- 用途：主要行動按鈕、「試用 ChatGPT」、「登入」

**次要按鈕**
- Background: `#ffffff`
- Text: `#0d0d0d`
- Border: 1px solid `#e5e5e5`
- Padding: 10px 18px
- Radius: 12px
- Hover: background `#fafafa`，border `#d4d4d4`

**品牌強調按鈕**
- Background: `#10a37f`
- Text: `#ffffff`
- Padding: 10px 18px
- Radius: 12px
- Hover: `#0a7a5e`
- 用途：升級方案的高亮行動按鈕、成功路徑

### 卡片
- Background: `#ffffff`
- Border: 1px solid `#ededed`
- Radius: 16px
- Padding: 24px–32px
- Shadow: 預設無；懸停時 `0 4px 16px rgba(13,13,13,0.06)`

### 輸入框
- Background: `#ffffff`
- Border: 1px solid `#e5e5e5`
- Radius: 12px
- Padding: 12px 14px
- Focus: border `#10a37f`，ring `0 0 0 3px rgba(16,163,127,0.12)`

### 膠囊標籤
- Background: `#f5f5f5`
- Text: `#3c3c3c`
- Padding: 4px 10px
- Radius: 9999px
- Font: 12px / 500

## 5. 間距與版面

- **基礎單位**：4px。刻度：4、8、12、16、24、32、48、64、96、128。
- **容器**：最大寬度 1200px，行動裝置 24px 側邊距，桌機 48px。
- **區塊節奏**：主要區塊間垂直間距 96–128px；行動裝置 64px。
- **格線**：桌機 12 欄，行動裝置 4 欄，間距 24px。

## 6. 動態效果

- **持續時間**：懸停 150–220ms；版面切換 280–360ms。
- **緩動函數**：入場使用 `cubic-bezier(0.16, 1, 0.3, 1)`（平滑淡出）。
- **克制原則**：不使用視差效果，不劫持滾動。僅採用細膩的淡入與位移。

## 7. 使用規範

- 中性編輯克制感、柔和圓角與稀疏強調色三者需整體保留；單獨使用綠色強調色並無法還原 OpenAI 風格的介面質感。
- Signifier 風格的展示字型時刻僅限於編輯或公告層級的場景，產品控制元件一律維持在無襯線字型系統中。
- 避免裝飾性動效、厚重陰影與過大的裝飾卡片；整體系統應呈現沉靜、易讀且深思熟慮的氣質。