EthorX
與我們聊聊
與我們聊聊

Internal reference

Design System Lab

這裡呈現 EthorX 網站目前正在執行的設計規範。每個範例都連回真實 token、layout role 或 production component，方便設計與開發用同一套語言工作。

Direction
Studio White
Typeface
Chiron Hei HK
Accent
#C6FF4E
Status
Current implementation

先確認權責，再使用規範。

如何閱讀這套系統

Lab 是目前實作的觀察介面，不是 source of truth。規則、數值與元件行為各自有清楚的 owner surface。

一個 layer，一個 owner

頁面只組合規範，不重新發明 foundation。若展示與程式不一致，以 design contract 與 executable token 為準。

  • 規則看 design contract
  • 數值看 tokens.css
  • 互動看 shared component
Design contract
website/design/design-system.md 定義使用規則、例外與驗證標準
Executable tokens
src/styles/tokens.css 定義目前實際執行的數值
Shared components
src/components/ 定義元件 API、狀態與互動行為
Design System Lab
/design-system 呈現目前實作，不創造新的規範
1 品牌 accent #C6FF4E
4 Container roles 672-1440px
4 標準 breakpoints 28-80rem
44 控制項最小高度 px

Color foundation

色彩有角色，不只是色碼

Studio White 建立主要閱讀環境，EthorX Green 只用在 primary action、selection 與少量關鍵回饋。

EthorX Green #C6FF4E
--color-brand

深色載體上的識別、黑字填色與 selection

Canvas #FFFFFF
--color-canvas

全站主要背景

Surface #F7F7F7
--color-surface

低干擾內容區

Media Surface #F7F7F7
--color-surface-media

系統視覺與淺色素材容器

Text #111111
--color-text

主要標題與內文

Text muted #565656
--color-text-muted

次要說明文字

Border #E3E3E3
--color-border

內容區隔與結構

Instrument #0A0A0A
--color-instrument

系統視覺與媒體介面

Neutral ramp

同一個冷中性色家族支撐 canvas、surface、border 與文字層級。

0 --color-neutral-0
25 --color-neutral-25
50 --color-neutral-50
100 --color-neutral-100
200 --color-neutral-200
400 --color-neutral-400
600 --color-neutral-600
800 --color-neutral-800
900 --color-neutral-900
950 --color-neutral-950

Typography

字體層級先說清楚，再談大小

Chiron Hei HK 是全站主要字體。HTML heading 負責文件語意，type token 負責視覺角色，兩者不互相取代。

Primary typeface Chiron Hei HK

AI 讓企業營運更清楚，也更有行動力。

Variable weights
450 / 500 / 620 / 650 / 700
Fallback
PingFang TC / Microsoft JhengHei
Direction
精密標題，舒展正文

Type roles

下列數值是目前 implementation snapshot。真正執行值由對應的 CSS token 控制。

Display --type-display 56-92px / 650 / 1.02 品牌宣告與單一首屏重點

讓 AI 成為真正的營運能力。

H1 --type-h1 48-72px / 650 / 1.18 每頁主要標題

企業 AI，不只停在概念。

H2 --type-h2 32-52px / 650 / 1.20 主要 Section 標題

把策略放進可運作的系統。

H3 --type-h3 28-40px / 620 / 1.20 Section 內的子層級

從最重要的流程開始。

H4 --type-h4 22-28px / 620 / 1.32 深層內容標題

建立可管理的導入基礎

Card title --type-card-title 20-22px / 620 / 1.35 資訊卡片與 Bento 卡片標題

以業務流程為核心

Card body --type-card-body 16px / 450 / 1.65 卡片內的簡短說明文字

先釐清營運問題，再將 AI 精準整合進關鍵流程。

Lead --type-lead 18-20px / 450 / 1.72 主敘事與段落開場

我們協助企業把模型、資料與工作流程整合成可持續運作的能力。

Body --type-body 17px / 450 / 1.82 主要閱讀文字

先釐清真正需要改善的營運問題，再決定模型、系統與導入方式。

Small --type-small 14px / 450 / 1.72 補充資訊與次要內容

適用於欄位說明、註解與低優先資訊。

Metric --type-metric 56-80px / 500 / 1.00 數據與關鍵數值

128

Label --type-label 12px / 700 / 1.30 短標籤與分類

ENTERPRISE AI

Button --type-button 15px / 650 / 1.20 控制項與導覽文字

了解導入方式

HTML semantic mapping

Heading level 表達內容結構，視覺角色則由 token 決定。

<h1> H1 頁面主標題，每頁一個
<h2> H2 主要 Section 標題
<h3> H3 Section 內的子區段
<h4> H4 深層內容標題
<h5> H4 保留語意層級，共用 H4 視覺
<h6> Label 最深層短標題，極少使用

Spacing

間距有尺度，也有用途

4px primitive scale 提供一致節奏，semantic spacing 則說明該用在哪裡。Page、Section、Surface 與 Control 各自負責不同層級。

Primitive scale

下方每一條都使用真實 token 寬度，不以另外的示意比例繪製。

4px --space-1
8px --space-2
12px --space-3
16px --space-4
24px --space-5
32px --space-6
48px --space-7
64px --space-8
96px --space-9
128px --space-10

Semantic roles

Primitive 是數值，semantic token 才是元件應優先使用的語言。

Text stack --space-stack-text 16px

標題、段落與短文字群組

Component stack --space-stack-component 24px

元件內的內容群組

Content stack --space-stack-content 32px

較大的內容區塊

Page gutter --padding-page-inline 20-64px

所有裝置共用的左右安全邊界

Page gutter

左右 gutter 使用 fluid clamp，在小螢幕保留 20px，隨 viewport 增長，最大到 64px。

Content safe area clamp(1.25rem, 4vw, 4rem)

Section rhythm

三種角色使用真實 vertical padding，讓差異可以直接被感受到。

Compact 48-80px
--padding-section-block-compact

較短、資訊集中或相鄰關係強的 Section

Default 64-104px
--padding-section-block

全站主要 Section 節奏

Transition 72-128px
--padding-section-block-transition

需要明顯敘事轉換的 Section 起點

Padding responsibility

不要讓同一個元素同時承擔 page gutter、section rhythm 與 surface padding。

Page --padding-page-inline

頁面左右安全距離

Section --padding-section-block

Section 垂直節奏

Surface --padding-surface

卡片與 bounded surface 內距

Spacious --padding-surface-spacious

需要更多呼吸的 surface

Control --padding-control-inline

按鈕與操作控制項左右內距

Layout and responsive

先選內容角色，再決定欄數

Page gutter 控制左右安全距離，container 控制最大內容寬度，grid 只負責內容內部排列。這三層不應混在同一個 padding 裡。

Container roles

所有 container 都置中並扣除全站 page gutter。下方寬度直接使用實際 max-width token。

Page Shell / Wide 1440px
--layout-wide-max

Header、Footer、大型視覺與複合 Section 外框

Section 1200px
--layout-section-max

一般多欄內容與中型區段

Content 896px
--layout-content-max

Hero 文字與主要敘事內容

Reading 672px
--layout-reading-max

文章、長段落與說明文字

Responsive grid

12-column 是可使用的版面工具，不是每個 Section 的強制模板。此 specimen 在標準 breakpoint 收斂為 8 欄與 4 欄。

123456789101112
--layout-grid-columns: 12 --layout-grid-gap: 16-24px

Standard breakpoints

Breakpoint 由 design contract 管理。只有內容在標準點前已實際破版時，元件才能增加局部 breakpoint。

Compact 28rem
448px

極窄手機內容調整

Medium 48rem
768px

主要單欄與多欄重排

Large 64rem
1024px

Navbar 與大型版面切換

Wide 80rem
1280px

超寬內容的必要增強

Validation viewports

每次 foundation 或 shared component 變更，都至少檢查這四個寬度。

375px 20px gutter

Page Shell edge 20px、mobile navigation

768px 約 31px gutter

Page Shell edge 約 31px、Medium 重排起點

1024px 約 41px gutter

Page Shell edge 約 41px、Large 切換邊界

1440px 約 58px gutter

Page Shell edge 約 58px

1600px 64px gutter

Wide max 生效，Page Shell edge 80px

1920px 64px gutter

Wide max 生效，Page Shell edge 240px

Shape

兩種圓角角色就足夠

Surface 表達內容容器，Action 表達可操作控制項。圓角不是自由裝飾，而是幫助辨識元件角色。

Surface
16px --radius-surface

Cards、媒體框與 bounded content surface

Action
8px --radius-action

Button、input、menu trigger 與其他控制項

Usage rules

新增元件前，先判斷它是 surface 還是 action。

角色固定

Surface 與 Action 各有一個 radius role，不建立頁面專用圓角。

層級清楚

外層 surface 的圓角可以大於內部 control，但同類元件必須一致。

拒絕裝飾性 pill

一般 Button 不使用 full pill；只有真正的 tag 或 filter 才考慮膠囊形。

Layers and system behavior

層級靠 surface 與 border 建立

靜態內容預設不使用 shadow。Canvas、Section、Surface 與 Accent 各自有語意，只有真正脫離文件流的介面才使用較高 z-index。

Layer composition

由外向內依序使用真實 layer token。

Canvas --layer-canvas
Section --layer-section
Surface --layer-surface
Accent --layer-accent

Border roles

邊界用於組織內容，不作為每一個元素的裝飾外框。

Subtle --border-subtle 1px / #E3E3E3

一般內容區隔

Strong --border-strong 1px / #BDBDBD

加強一般結構；不可單獨作為必要控制項邊界

Glass on media

透明 surface 只用在媒體或 instrument context，並提供不透明 fallback。

Media overlay 穩定對比優先於透明效果 --color-glass-surface
Surface
rgb(10 10 10 / 82%)
Backdrop
blur(1rem) saturate(112%)
Fallback
--color-instrument-raised

Z-index roles

只使用命名層級，不使用任意大數字。

0 Base --z-base
100 Sticky --z-sticky
200 Overlay --z-overlay
300 Modal --z-modal

Motion roles

動態只用來表達 feedback、interface change 或 emphasis。

Feedback 180ms
--duration-feedback

Hover、press、focus

Interface 280ms
--duration-interface

Menu 與狀態切換

Emphasis 520ms
--duration-emphasis

短暫重點轉場

Components

同一套視覺，保留正確語意

Button 執行操作，ButtonLink 前往目的地。Primary、Secondary 與 Text 表達行動層級，不是任意裝飾選項。

Action hierarchy

使用滑鼠、鍵盤與觸控直接檢查真實 production component。

Primary Button <Button variant="primary">
Secondary ButtonLink 查看規則 <ButtonLink variant="secondary">
Text ButtonLink 閱讀規範 <ButtonLink variant="text">
Primary

頁面最重要且唯一的主要行動

variant="primary"
Secondary

重要但不主導流程的替代行動

variant="secondary"
Text

低干擾導覽與補充行動

variant="text"

Size and target

Default 用於 Section CTA；Compact 用於 desktop 與 mobile Navbar。兩者皆保留 44px 真實 hit target。

Default · Section 聯絡我們 44px control / rolling label
Compact · Navbar 聯絡我們 44px target / 36px shell / rolling label

Interaction states

狀態不只靠顏色表達，focus、active 與 disabled 都有可辨識的行為。

Default Primary 使用黑底白字；Secondary 使用白底黑字
Hover Primary 與 Secondary 皆使用相同節奏的文字向上輪替
Focus visible 鍵盤操作同樣觸發文字輪替，並保留全站雙層 focus indicator
Active 文字維持輪替位置，整體向下位移 1px 回應按下動作
Disabled / Reduced motion Disabled 移除互動與導覽；Reduced motion 停用文字位移
Disabled Button
Unavailable ButtonLink 目前不可用

Semantic contract

先決定行為，再選視覺 variant。

<button> Button

提交表單、開啟介面、改變狀態或執行操作。

<a href> ButtonLink

前往頁面、Section 或核准的外部目的地。

aria-disabled Unavailable link

輸出不可導覽的 link role，不保留 href。

States and accessibility

狀態必須有意義，也必須看得清楚

功能色沿用首頁 Hero 的綠、藍、黃與珊瑚紅，分別表示成功、資訊、警告與錯誤。只在需要表達狀態時使用，並搭配文字或圖示；品牌 lime 保留給品牌強調與選取狀態。

每組提供 accent 原色、深色前景與 surface 淺色背景。以下展示深色前景搭配淺色背景；文字請使用前景色，勿直接以明亮原色取代。深色背景與其他配色組合須另行確認對比。

Success 已完成 --color-success
Information 提供資訊 --color-information
Warning 需要檢視 --color-warning
Danger 需要處理 --color-danger
4.5:1 一般文字最低對比
3:1 大型文字與必要邊界
44px Touch target 原則下限
1 每頁 main 與 H1

Keyboard focus

按 Tab 移入下方控制項，可直接檢查全站 focus-visible 樣式。

--color-focus + --color-focus-accent