OpenX · Internal Brand Guidelines
Brand Guidelines v1.0

OpenX
Brand System

交易平台品牌視覺規範。定義 Signal Orange、交易語義色、Mono 數據聲與發光座艙美學——驅動從行情到成交的每一次觸達。

July 2026 — Trading Cockpit Identity
Colors

Color System

深色優先。一個信號主橙、一組橙→赤→紅的品牌漸變、鄰近的暖色家族與冷調中性灰——每一個色值都是文件中的 Token。點擊任意色塊複製色值。

主色 · 漸變 · 金屬
Signal Orange
#FE8200 · 254, 130, 0 · Primary
Brand Signature
#FFA13A → #FE8200 → #F0530A → #C10801 → #2A0700
Metallic
#B8B8B8
Atmosphere · 氛圍漸變

用於 Hero 與大面積留白背景的分層放射網格漸變——橙色融入赤紅、近乎全黑。已存為 Paint Style,僅用於大面積空白背景,切勿疊在正文之下。

Atmosphere · Orange
ORANGE / EMBER / ROSSO
Atmosphere · Ember
ROSSO / SCARLET / ORANGE
Orange Scale · 橙色階

品牌主色(#FE8200 = 500)的深淺變體。400–600 用於互動狀態;800–900 用於深底品牌填色。

Orange/50
#FFF5EB
Orange/100
#FFE8D1
Orange/200
#FFD2A3
Orange/300
#FFB970
Orange/400
#FF9D38
Orange/500 ★
#FE8200
Orange/600
#E37400
Orange/700
#B85E00
Orange/800
#8A4600
Orange/900
#5C2F00
Analogous · 鄰近色

品牌橙的暖色鄰居——漸變經過的色系家族。用於插畫、數據系列與漸變節點,不用於大面積 UI 表面。

Gold
#F5A623
Amber
#FF9D38
Signal Orange
#FE8200
Ember
#F0530A
Vermilion
#E5301C
Rosso Corsa
#C10801
Auxiliary · 輔助色(Secondary)

赤陶與勝紅是次級強調色——用於層次、緊迫感與品牌內 hover;金屬銀是材質點綴。三者面積都須遠低於主色。

Ember
#F0530A
Rosso Corsa
#C10801
Metallic
#B8B8B8
Neutrals · 中性

冷調灰階——輔助工作色的主力。950 畫布 · 900/800 表面 · 50–300 深底文字。純黑白僅保留給 Logo。

Neutral/Black
#000000
Neutral/950
#0A0B0D
Neutral/900
#111318
Neutral/800
#1A1D23
Neutral/700
#262A31
Neutral/600
#363B44
Neutral/500
#4E545E
Neutral/400
#6E7681
Neutral/300
#969DA8
Neutral/200
#C2C7CF
Neutral/100
#E2E5EA
Neutral/50
#F4F5F7
Neutral/White
#FFFFFF
Opacity · 透明度

用於疊層、遮罩、邊框與著色狀態的透明度階。疊加在底色之上使用,而非另選一個實色。

品牌橙 — 淺色調 / 焦點環 / hover 填色
100%
#FE8200 · 100%
72%
#FE8200 · 72%
48%
#FE8200 · 48%
32%
#FE8200 · 32%
16%
#FE8200 · 16%
8%
#FE8200 · 8%
白色 — 深底上的分隔線 / 邊框 / 疊層
100%
#FFFFFF · 100%
64%
#FFFFFF · 64%
40%
#FFFFFF · 40%
24%
#FFFFFF · 24%
12%
#FFFFFF · 12%
6%
#FFFFFF · 6%
黑色 — 圖片與淺底上的遮罩
100%
#000000 · 100%
72%
#000000 · 72%
48%
#000000 · 48%
32%
#000000 · 32%
16%
#000000 · 16%
Semantic · Dark Mode

別名基礎色、可自動翻轉的工作 Token。

Background/Canvas
#0A0B0D
Background/Surface
#111318
Background/Raised
#1A1D23
Border/Default
#262A31
Text/Primary
#F4F5F7
Text/Secondary
#969DA8
Brand/Default
#FE8200
Feedback & Market

狀態色加上交易漲跌色。警告色維持黃色,避免與品牌色衝突。

Feedback/Success
#16C784
Feedback/Danger
#EA3943
Feedback/Warning
#FFC53D
Feedback/Info
#4A9EFF
Market/Up
#16C784
Market/Down
#EA3943
Data Visualization

分類色盤。品牌橙領銜第一序列;暖色鄰近色與冷色對比維持圖表可讀性。

Data/Orange
#FE8200
Data/Ember
#F0530A
Data/Cyan
#2DD4BF
Data/Blue
#4A9EFF
Data/Purple
#A78BFA
Data/Pink
#F472B6
Data/Yellow
#FBBF24
Data/Green
#16C784
Typography

Type System

Orbitron 是科技幾何數字體,用於大號品牌數字與信號球,Inter 撐起標題與正文,Noto Sans TC 承載繁體中文,JetBrains Mono 是「數據聲」——所有價格、百分比、計數器都用等寬,賦予終端座艙的精準感。

ORBITRON
科技幾何數字體 — 大號品牌數字 / 信號球 / Step 編號
OPENX   0123456789   ABCDEFGHIJKLM
Inter
Display + Body — 英文 / 標題 / 正文(Regular / Medium / Semi Bold / Bold / Extra Bold)
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789 &→!
Noto Sans TC
繁體中文 — 標題 / 正文 / 說明(OpenX 用繁體,有別於 CHAINISLE 簡體)
交易與轉化體系 真實交易員 可持續收益 從內容到交易型 IP
JetBrains Mono
數據聲 — 價格 / 百分比 / 計數器(Medium / Bold / Extra Bold)
0123456789 +12.4% -3.27% $1,024.00

Inter — Web 桌面端字級 参考 CHAINISLE 放大比例

桌面 / 官網 / Deck — 顯示層級放大,負字距收緊以保持精密感。

Text StyleSizeLine HeightWeight
Display / Hero72px76pxExtra Bold
Heading / H148px54pxBold
Heading / H236px44pxSemi Bold
Heading / H324px32pxSemi Bold
Body / Large20px30pxMedium
Body / Regular16px26pxRegular
Caption / Regular14px20pxRegular

Inter — App 移動端字級 Figma 原生規範

App / 交易座艙 — 緊湊高密度,適配手機與資訊密集的數據界面。

Text StyleSizeLine HeightWeight
Heading / Display34px41pxExtra Bold
Heading / H128px34pxBold
Heading / H222px28pxSemi Bold
Heading / H318px24pxSemi Bold
Body / Large17px24pxMedium
Body / Regular15px22pxRegular
Caption / Regular13px18pxRegular
Footnote / Regular11px16pxRegular

JetBrains Mono — 數字層級

Text StyleSizeLine HeightWeight
Number / Balance40pxAUTOExtra Bold
Number / Price24pxAUTOSemi Bold
Number / Small15pxAUTOMedium
Spacing & Layout

Spatial System

4px 基準單位,最大內容寬度 1200px 居中。Bento 網格是 OpenX 的標誌性佈局——大圓角磚塊承載數據模組。

xxs
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
xxl
48px
section
80px

Breakpoints

Mobile
< 768px — 單列,Bento 堆疊
Tablet
768 – 1024px — 2 列 Bento
Desktop
> 1024px — 完整 Bento 網格
Elevation & Shape

Depth & Radius

與 CHAINISLE 的「零陰影」不同,OpenX 擁抱深度與發光——橙色輝光陰影是座艙能量的來源。大圓角(30/22/16px)構成溫暖的 Bento 磚塊。

L0 Flat
底面
L1 Hairline
1px 描邊
L2 Shadow
深色投影
L3 Glow
橙色輝光

Border Radius — 大圓角暖 Bento

xs
12px
sm
16px
md
22px
lg
30px
pill
9999px
Guidelines

Do's & Don'ts

遵循以下規則維持 OpenX 品牌一致性。

Do 應該

用 Signal Orange 實色 #FF8200,或品牌漸變 #FF8200→#D56D00 作為品牌電壓色。
綠漲紅跌貫穿所有價格 / 收益信號。
所有數字 / 百分比 / 計數器用 JetBrains Mono。
用大圓角(30/22/16px)構成暖 Bento 磚塊。
用橙色輝光陰影賦予座艙核心模組深度。
用中性冷灰暗色表面(#141417 / #202027),保持克制。
標題 / 正文用 Inter,Logo 與品牌數字用 Orbitron。
中文用繁體 Noto Sans TC。
數字編號 / 標籤用 Mono 大寫 + 正字距。

Don't 不要

不把品牌漸變用在大面積背景,僅限 Logo / 圖標 / 關鍵強調。
不對調綠漲紅跌,不把交易語義色用於裝飾。
不用 CHAINISLE 的 #FF9B30→#FF4528 漸變代替 OpenX 的 #FF8200→#D56D00。
不用暖調 / 橙染的暗色表面,暗底保持中性冷灰。
不用簡體中文字體(OpenX 用繁體 TC)。
不用銳利小圓角(那是 CHAINISLE 8px,OpenX 用大圓角)。
數據展示不用比例字體,必須等寬 Mono。
聯名時 CHAINISLE 排第一:CHAINISLE × OpenX。