交易平台品牌視覺規範。定義 Signal Orange、交易語義色、Mono 數據聲與發光座艙美學——驅動從行情到成交的每一次觸達。
OpenX 標識由折紙化的 X 記號構成——兩片色帶交疊咬合,象徵開放協議與雙向連結;伴隨的圓點是成交瞬間的信號燈。Signal Orange 實色與漸變填充,傳遞速度與精準。
標識四周需保留至少一個符號高度的淨空,絕不能讓文字、邊緣或其他標識侵入。
低於這些尺寸,符號的鏤空與缺口會開始糊在一起,可讀性明顯下降。
選擇對比度最高的版本。全彩版需要深色或極淺背景;疊在品牌橙或圖片之上一律使用白色版。
只使用主控組件並切換 Color 變體——不可重繪、更改顏色、拉伸變形或添加裝飾。
每個變體提供 SVG(矢量)與 PNG(2048px 透明底)兩種格式
以品牌主色 #FF8200 為錨點,面向卡片密集的交易所 App。畫布加深到 #EEF0F3 拉開與白卡的差距;完整定義主色 11 階、中性 12 階、背景分層、卡片用色與按鈕六類四態。點擊任意色塊複製色值。
11 階橙色,錨點 500 = 品牌主色。淺色用法:50–200 做淺底/填充,500–600 做按鈕,700–950 做文字/圖標。
12 階中性灰。頁面畫布 #EEF0F3 與白卡拉開約 16 級;內嵌同步加深到 #E7EAEF。從 01 白(背景)走向 12 近黑(文字)。
卡片密集頁默認「② 灰底白卡」;數據密集頁(行情/盤口)回到「① 全白發絲線」。
#DCE0E6 發絲線分隔,不填色。行情、盤口、K線、訂單首選。#EEF0F3 + 白卡#E7EAEF| 頁面 | 推薦分層 | 畫布 / 卡片 / 分隔 |
|---|---|---|
| 行情 · 幣種列表 | ① 全白 + 發絲線 | #FFFFFF · #FFFFFF · #DCE0E6 |
| K線 · 交易下單 | ① 全白(不填灰卡) | #FFFFFF · — · 漲跌色區分 |
| 資產 · 首頁 | ② 灰底白卡 | #EEF0F3 · #FFFFFF · 淡陰影 |
| 我的 · 設置 | ② 灰底 + 分組白卡 | #EEF0F3 · #FFFFFF · 淡陰影 |
| 輸入框 · 搜索 · 內嵌塊 | ③ 白底淺灰內嵌 | #FFFFFF · #E7EAEF · — |
一張標準卡片各部位的用色。左側是真實卡片(放在 #EEF0F3 畫布上),右側是每個部位對應的 token。
五類按鈕 × 四態。橙色主按鈕用近黑文字(對比 ≈8:1,白字在橙上會發虛);買賣按鈕用白字;禁用統一走中性灰、不保留品牌色。
成功 / 警告 / 錯誤 / 信息,每組三階:淺(背景)· 標準(主色/圖標)· 深(文字/描邊)。
8 種色相,各 9 階(50–800),標準色錨定 500。淺色用法:50–200 做填充,600–800 做白底文字/描邊。僅用於分類、標籤、數據可視化。
按用戶所在市場動態切換。白底專用值——綠色已從深色亮綠整體加深。絕不能用品牌橙表示漲跌。
白底大面積橙色更刺眼。僅用於主按鈕、關鍵數據、選中態。
畫布 #EEF0F3 + 白卡 + 淡陰影,拉開層級。數據密集頁才回全白發絲線。
淡陰影或描邊二選一,別疊加;嵌套塊用 #E7EAEF 不再加陰影;只做兩級高度。
白字在橙上發虛,用 #1A1206;禁用態統一中性灰、不留品牌色;漲跌綠白底加深。
IBM Plex Sans 撐起英文標題與正文——工程感的人文無襯線,是品牌的英文骨架;Noto Sans TC 承載繁體中文;IBM Plex Mono 是「數據聲」——所有價格、百分比、計數器都用等寬,賦予終端座艙的精準感。
桌面 / 官網 / Deck — 顯示層級放大,負字距收緊以保持精密感。
App / 交易座艙 — 緊湊高密度,適配手機與資訊密集的數據界面。
4px 基準單位,最大內容寬度 1200px 居中。Bento 網格是 OpenX 的標誌性佈局——大圓角磚塊承載數據模組。
與 CHAINISLE 的「零陰影」不同,OpenX 擁抱深度與發光——橙色輝光陰影是座艙能量的來源。大圓角(30/22/16px)構成溫暖的 Bento 磚塊。
遵循以下規則維持 OpenX 品牌一致性。