概覽
Ruda 是一套為企業銷售與行銷團隊打造的文件追蹤與潛在客戶開發工具，內建 CRM。
- 產品
- Ruda
- 營運方
- Rexplore Inc.
- 設計系統
- Vercel Geist
- 字體
- Geist Sans, Geist Mono
Ruda 的介面以 Vercel Geist 設計系統 為基礎打造。色彩、字級系統、圓角與動態皆遵循 Geist 原版；我們的實作與原版不一致時，以原版為準。
Vercel 的 Geist Sans 與 Geist Mono，採用 SIL Open Font License 1.1 授權。
標誌
標誌是以 Geist Sans 排出的字標 RUDA，沒有圖形符號，也沒有首字母方框。
Ruda
Ruda
規範
- 一律使用大寫 RUDA。內文中的產品名稱寫作 Ruda。
- 字重 600(SemiBold)，不得更粗。
- 字距在所有尺寸下固定為 0.64px，因此字標越大，比例越小。
- 最小尺寸 12px。
- 留白：四周至少保留一個大寫字母高度(0.71 × 字級)。
- 顏色：淺色背景用 #171717，深色背景用白色，不使用其他顏色。
- 螢幕閱讀器會將名稱讀作 Ruda，而不是逐字母朗讀。替代文字、圖說與文件中請寫作 Ruda。
- 字標一律由左至右閱讀，在阿拉伯文頁面中也一樣，且不翻譯、不音譯。
尺寸
| 尺寸 | 字距 | 比例 | 範例 |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
Ruda
禁止用法
錯誤範例小寫
錯誤範例大小寫混用
錯誤範例更動字距
錯誤範例斜體
錯誤範例描邊
錯誤範例陰影
錯誤範例漸層
錯誤範例品牌以外的顏色
錯誤範例首字母方框或圖形符號
色彩
以中性色為先。黑色是品牌色，藍色只用於連結與狀態。對比值由各代號數值分別對白色與黑色計算而得。
AA 代表 4.5:1 以上，足以用於內文。AA 大字代表 3:1 以上，僅用於大字級文字與介面元件。
| 代號 | HEX | 白底 (#ffffff) | 黑底 (#000000) | |
|---|---|---|---|---|
| 品牌 | ||||
| primary主色：按鈕、字標、內文 | #171717 | 17.93:1AA | 1.17:1未達 AA | |
| primary (dark)深色模式的主色填色 | #2e2e2e | 13.58:1AA | 1.55:1未達 AA | |
| cta (dark)深色模式的主要按鈕 | #ededed | 1.17:1未達 AA | 17.94:1AA | |
| 藍色 | ||||
| link連結文字 | #0068d6 | 5.31:1AA | 3.95:1AA 大字 | |
| link-dark深色模式的連結文字 | #52a8ff | 2.50:1未達 AA | 8.40:1AA | |
| toggle-on · toast-success · info開關開啟、成功提示、資訊填色 | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkBeta 標籤，白色文字 | #bd2864 | 5.75:1AA | 3.65:1AA 大字 | |
| badge-pink-dark深色模式的 Beta 標籤 | #b31a57 | 6.56:1AA | 3.20:1AA 大字 | |
| 停用 | ||||
| disabled-bg停用填色 | #f2f2f2 | 1.12:1未達 AA | 18.76:1AA | |
| disabled-fg停用文字 | #8f8f8f | 3.23:1AA 大字 | 6.49:1AA | |
| 灰色 | ||||
| gray-50背景 | #f2f2f2 | 1.12:1未達 AA | 18.76:1AA | |
| gray-100滑過背景 | #ebebeb | 1.19:1未達 AA | 17.62:1AA | |
| gray-200按下背景 | #e6e6e6 | 1.25:1未達 AA | 16.83:1AA | |
| gray-300框線 | #ebebeb | 1.19:1未達 AA | 17.62:1AA | |
| gray-800次要文字 | #4d4d4d | 8.45:1AA | 2.48:1未達 AA | |
| gray-900內文 | #171717 | 17.93:1AA | 1.17:1未達 AA | |
| gray-500 (dark)深色模式的次要文字 | #a0a0a0 | 2.61:1未達 AA | 8.03:1AA | |
| 狀態 | ||||
| success成功圓點與標籤 | #45a557 | 3.10:1AA 大字 | 6.77:1AA | |
| warning警告 | #f5a623 | 2.03:1未達 AA | 10.36:1AA | |
| error錯誤與刪除操作 | #e5484d | 3.91:1AA 大字 | 5.37:1AA | |
停用的控制項不受最低對比要求(WCAG 1.4.3)限制，且一定要加上 disabled 或 aria-disabled。 #8f8f8f / #f2f2f2 = 2.89:1
字體排印
介面與行銷文字一律使用 Geist Sans。Geist Mono 用於程式碼以及 HEX 等數值。
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
標題
| 代號 | 尺寸 | 行高 | 字重 | 字距 |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
內文
| 代號 | 尺寸 | 行高 |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
字重
字重：內文 400，按鈕 500，強調 550，標題與字標 600。不使用 700 以上，建置檢查會直接擋下。
Aa400Aa500Aa550Aa600
其他文字
- 中文、日文、韓文在 Geist 之後使用各自的系統字體(繁體中文為蘋方或微軟正黑體)。24px 以上的標題字距為 -0.02em，20px 以下為 0。
- 泰文與阿拉伯文標題的字距維持 0，避免聲調符號與連寫被破壞。48px 與 56px 的泰文標題行高為 1.2。
- 阿拉伯文頁面由右至左排列，字標、HEX 值與程式碼仍維持由左至右。
形態與間距
圓角
- 6px控制項與輸入框
- 8px卡片、彈出視窗、選單
- 12px對話框
陰影
卡片以 1px 線條取代陰影，表格也不加陰影。陰影只用於浮層：
- 彈出視窗與選單0 8px 24px rgba(0,0,0,.12)
- 對話框0 16px 48px rgba(0,0,0,.16)
間距
間距只使用 4px 的倍數。
4812162432
動態
- 回饋只改變顏色、不透明度或陰影。按下或滑過時不會縮放或移動。
- 轉場時間 150 至 200ms，使用 Geist 減速曲線。
- 彈出視窗與對話框以淡入淡出切換，背景不做模糊。
- 開啟減少動態效果後，所有移動都改為單純的淡入淡出。
cubic-bezier(0, 0, 0.2, 1)
聯絡我們
關於使用 Ruda 名稱或字標的問題，請來信 help@rexplore.xyz。