Opinion Trade·Design System

Opinion Trade Design System

app.opinion.trade 正在用的設計系統，以可互動的真組件呈現。token 與組件都鏡像自 production 的 @olab/components，不是另一套平行設計。

這個站是什麼

一個地方看到產品真正長什麼樣、為什麼這樣長。

Code 即 spec：每個組件頁跑的是真組件、吃的是真 token。設計與工程看同一個畫面，不用在 Figma 跟實作之間來回對齊。

跟 production 的關係

Token 唯一真相：packages/configs/style/style.css
組件：@olab/components 本地 mirror，最後同步 2026-10-16 · 來源 0ac828f
同步策略：用 npm run sync-mirror 從 production 抓 packages/ 覆蓋（預設 dry-run，白名單保護 TextLink 與 dist），本 repo 不改鏡像原始碼；用法見 docs/mirror-sync.md，改成直接依賴 production package 的提案見 docs/mirror-strategy-proposal.md
這裡的改動不會直接上線；要進 production 得交付到 OpinionLabs/frontend

裡面有什麼

Foundations：token 的每一階長什麼樣、何時用
Components：27 個真組件 × 所有 state
Patterns：產品級組件與整頁範例（Markets、Sports、Asset Prediction）
Guidelines：顏色語意、數字、互動、icon 的使用規則

怎麼開始用

在 production repo：import { Button } from "@olab/components"
在本 repo：組件包進 .live-scope 讓 token 正確解析
Dark 為基準；light 由 token 自動切換，不另外設計

這個站不是什麼

不是 production 程式碼——上線的是 OpinionLabs/frontend，這裡是它的鏡像與提案場
不是 Figma 的替代品——Figma 看 layout 與內容意圖，顏色 / 間距 / 字級以這裡為準
Patterns 裡的產品組件有三種身分：已被 production 收下、提案中、探索中——各頁的 Provenance 段會寫

Quick Tour

建議依序瀏覽

Foundations

Color、Typography、Spacing、Radius、Shadow、Motion —— 全部來自 style.css。

View foundations

Components

@olab/components 的 27 個真組件，每頁有 Interactive Demo 與 State Matrix。

Browse components

Patterns

Opinion Trade 產品級組件：Market、Trade、Sports、Asset Prediction。

See patterns

Guidelines

顏色語意、數字、互動狀態、icon —— 用的時候要守的規則。

Read guidelines

Rules at a glance

三條硬規則（完整見 Guidelines；協作流程見側欄 Internal）

Compose over create

先查 @olab/components 有沒有真組件，再查 Patterns，最後才手刻。禁止自造 ad-hoc div 或重複既有結構。

Token only

顏色、間距、圓角必走 semantic token（text-primary、bg-secondary、border-primary、outcome-yes-solid）。禁止 raw Tailwind 色階、寫死 hex 與 arbitrary value。

Preview = QA surface

每個組件頁都要有 Interactive Demo + Static State Matrix；hover / pressed / disabled 看得到才算完成。

Status 怎麼讀

Patterns 與 Templates 每一頁都標了它跟 production 的關係

Adopted

在本 repo 設計、production 已採用。站上是設計端的版本，production 實作可能已再調整。

Proposed

已交付 spec 或 patch，等 production 決定。

Reference

照 app.opinion.trade 線上產品重建的對照版，用來量測與討論。不是 production 的程式碼。

Concept

產品概念探索。production 沒有這個產品或功能，不代表已排入開發。

Foundations、Guidelines、Components 不標狀態：它們就是 production 本身（style.css 與 @olab/components）。

Full catalog

所有公開頁面（維護者文件見側欄 Internal）

Foundations

Color

Typography

@olab/components

Spacing

Radius

Shadow

Motion

Layout

@olab/components

Data Viz

Guidelines

Color Semantics

Numbers

Interaction States

Icons

Mobile

Patterns · Market

MarketHeroCarousel

Opinion Trade Design System

一個地方看到產品真正長什麼樣、為什麼這樣長。

跟 production 的關係

裡面有什麼

怎麼開始用

這個站不是什麼

Quick Tour

Rules at a glance

Status 怎麼讀

Full catalog

Foundations

Guidelines

Components

Patterns · Market

Patterns · Sports

Patterns · Asset

Templates