GeoCheck — 品牌規範與設計系統

🎨 色彩設計變數系統

點擊任意卡片可直接複製代碼

Primary Navy

--gc-navy

#0B3B6F點擊複製

Accent Mint

--gc-mint

#00B8A9點擊複製

Dark Base

--gc-navy-dark

#072A52點擊複製

Surface Light

--gc-bg-alt

#F7F9FC點擊複製

完全採信 (Verified)

--gc-success

#27C93F官方引用驗證命中

未知/防呆 (Unknown/Cap)

--gc-warning

#B97700未成熟數據 / 封頂 69

未可觀測/P1 (Alert)

--gc-danger

#D6453D0 分或最優先修復

📐 標誌與幾何結構

向量幾何 · 支援暗黑模式

亮色模式標誌

GeoCheck.

暗色模式反白標誌

GeoCheck.

幾何構型意義 (Geometry Concept)

標誌融合「探索雷達環」與「驗證勾」。雷達環象徵深入 LLM 搜尋模型探測非品牌搜尋意圖；驗證勾象徵可審計的第一方官方引用背書；右上方交點為數據信賴錨點（Signal Anchor Dot）。

✍️ 字體排印與數據規範 (Typography & Numeric System)

數字分離 · 專業 SaaS 等寬對齊

介面與正文

Noto Sans TC

--gc-font-sans

優美工整的思源黑體，專注於中英混排的高辨識度與親和力。

★ 商業指標與數字

Inter (Tabular Nums)

--gc-font-number

87.5% (24/40)

對標 GA4 / Stripe / Vercel 頂級 SaaS，自然圓潤實心 0，徹底告別代碼斜線零；開啟 tabular-nums 保證表格數字垂直精密對齊。

純程式碼與金鑰

JetBrains Mono

--gc-font-mono

專為開發者代碼編輯器、JSON Payload、API 憑證與底層 Run ID 所保留之專業等寬字體。

★ 應用範圍實裝標註 (Dashboard Scope) 工具 A 行銷儀表板字體配置：Noto Sans TC 一體化架構

作用域: apps/web/app/

為提供行銷工作者極致流暢且和諧的長文閱讀與多維指標觀察體驗，工具 A 行銷儀表板（Dashboard）已全面啟用 Noto Sans TC（思源黑體）一體化排版。UI 介面、數據指標（KPI Scorecards）、搜尋引擎矩陣與 SVG 趨勢圖表均統一套用 Noto Sans TC。

✨ 零筆觸衝突 · CJK 中英高度融洽

繁中文字與數值指標使用同一字型家族，徹底消除中文字與西文字體（如 Inter）混排時的 x-height 基線微落差與字重粗細不均問題。

📊 保留 Tabular Nums 等寬特性

指標全域配置 font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;，即便在思源黑體下亦能確保各週百分比與分數垂直平直對齊。

🛡️ 獨立作用域 · 不影響品牌主站

變更嚴格封裝於 apps/web/app/（app.css 與 index.html），主網站、品牌設計頁與公開白皮書仍維持既定之通用設計系統。

🤖 AI 代理人設計上下文 (Machine-Readable Context for AI)

為未來維護本站的 AI 量身定制

⚡ GeoCheck System Tokens JSON

當未來任何 AI（Claude / Gemini / GPT / DeepSeek）需要修改首頁、新增報告組件或擴充白皮書時，可直接讀取此 JSON，保證 100% 風格相容，杜絕色彩漂移或排版錯亂。

{
  "$schema": "https://geocheck.lslabs.tw/schemas/design-tokens-v1.json",
  "name": "GeoCheck Design System",
  "version": "1.0.0",
  "design_principles": {
    "essence": "From Black-box Speculation to Observable Evidence",
    "tone": "Authoritative, Precise, Transparent, Accessible",
    "aesthetic": "Tactile Modern Tech, Swiss Modernism, Monochromatic with Mint Highlight"
  },
  "tokens": {
    "color": {
      "primary": { "navy": "#0B3B6F", "navy_dark": "#072A52", "navy_light": "#164E8C" },
      "accent": { "mint": "#00B8A9", "mint_dark": "#007F75", "mint_light": "#33C6B9", "mint_soft": "#E9F9F7" },
      "surface": { "page_bg": "#F7F9FC", "card_bg": "#FFFFFF", "border": "rgba(11, 59, 111, 0.1)" },
      "semantic": {
        "success": "#27C93F",
        "unknown_warning": "#B97700",
        "alert_danger": "#D6453D",
        "link_blue": "#175CD3"
      }
    },
    "typography": {
      "display": { "fontFamily": "'Noto Sans TC', sans-serif", "fontWeight": 900, "letterSpacing": "-0.02em" },
      "body": { "fontFamily": "'Noto Sans TC', system-ui, sans-serif", "fontWeight": 400, "lineHeight": 1.7 },
      "numbers_and_metrics": { "fontFamily": "'Inter', -apple-system, sans-serif", "features": "tabular-nums", "fontWeight": 800 },
      "code_and_data": { "fontFamily": "'JetBrains Mono', monospace", "fontWeight": 600 },
      "dashboard_scope": {
        "primary": "'Noto Sans TC', system-ui, sans-serif",
        "numbers": "'Noto Sans TC', system-ui, sans-serif (tabular-nums)",
        "note": "Dashboard A adopts unified Noto Sans TC for both UI and metrics to eliminate CJK-Latin baseline disparity."
      }
    },
    "radii": { "sm": "8px", "md": "14px", "lg": "20px", "pill": "999px" },
    "shadows": {
      "card": "0 8px 30px rgba(11, 59, 111, 0.08)",
      "window": "0 20px 50px rgba(11, 59, 111, 0.12)"
    }
  },
  "ai_rules_for_code_generation": [
    "Rule 1: Always use semantic colors. Do not introduce random purple, neon pink, or yellow outside of --gc-warning.",
    "Rule 2: Any score display MUST honor the 65/35 breakdown: 65% Answer Adoption, 35% Official Citation.",
    "Rule 3: Unknown states must NEVER be rendered as 0. They must use the amber warning tag (#B97700) with label '未知'.",
    "Rule 4: Buttons must use border-radius: 999px (pill style) with --gc-mint background and white bold text.",
    "Rule 5: For comparisons, use .compare-card and .search-compare__grid structure with subtle borders, never heavy solid colors.",
    "Rule 6: Numbers and metrics use tabular-nums. In Dashboard A (apps/web/app/), --gc-font-number is unified to 'Noto Sans TC' for seamless CJK harmony; for public marketing pages and whitepaper reports, Inter is retained for Latin figures."
  ]
}

GeoCheck 品牌設計系統與規範手冊