Guidelines V2.0 · 2026.10

邊境部署品牌視覺規範

EdgeDeploy Brand Visual Guidelines。完整 CIS 文件，涵蓋品牌核心、標誌系統、色彩、字體、間距、圖形語彙、圖示、介面元件、語氣、應用情境與各平台素材，做為對內對外的統一視覺依據。

01 / Brand Core

品牌核心

邊境部署不是拿著既定服務找需求，而是陪品牌與團隊看清問題、比較選項，再把合適解法做出來的合作夥伴。品牌視覺要清楚、克制、可延展。

MISSION

幫助品牌和團隊找出真正的問題，一起選擇並實現適合當下的解法。

POSITIONING

面向中小型品牌與團隊的數位解題夥伴，從問題釐清開始，依情境整合網站、流程與技術能力。

Discover

從現況、目標與限制中找出真正需要解決的問題。

Solve Together

不預設答案，和客戶一起比較可行的解法。

Deliver

把選定方向做成可使用、可驗證、能持續調整的成果。

02 / Logo System

標誌系統

標誌是 E 與 D 兩個平行四邊形互相咬合，所有斜邊都是同一個 59° 角，象徵從邊界出發、逐步咬合出可落地的方向。標誌與文字的距離、比例都已固定，請直接使用提供的檔案。

horizontal

主要版本，標誌加中文與 EDGEDEPLOY 兩行

stacked

方形空間

horizontal-en

英文場合

mark

頭像、favicon 等小尺寸

每種組合都有藍、深藍、白、黑四色；橫式與直式另有 twotone（藍標誌加深藍字），文件或簡報需要沉穩一點時使用。

安全距離與最小尺寸

≥ 1/4 H≥ 1/4 H1/4 H1/4 H EdgeDeploy Symbol

標誌四周至少留出「標誌高度的 1/4」，這個範圍內不放文字、圖片或其他標誌。標誌單獨使用最小 16px（favicon）；橫式組合最小 140px 寬，印刷最小 30mm。再小英文會糊掉，請改用純標誌。

背景搭配

Primary · 品牌藍

Navy · 深藍版

Black · 純黑版

Reversed · 反白版

淺色底（Zircon、白）用藍色或深藍版；藍底、深色底、流體紋理一律用白色版。純黑版僅限單色印刷或無法顯示品牌藍的情境。

禁止用法

不可拉伸或壓扁

維持原始長寬比例，不任意拉伸或壓扁。

不可旋轉

標誌所有斜邊都是同一個 59° 角，旋轉後角度會失去意義。

不可加上效果

不加陰影、外框、漸層或立體、浮雕效果。

不可使用規範外的顏色

只使用藍、深藍、白、黑四色版本，不套用其他色彩。

不可置於紋理或照片上

藍色標誌放在紋理或照片上會被吃掉。這類底一律用白色版。

邊境部署 EdgeDeploy

不可用字體代替標誌

標誌與文字的距離、比例都已固定，請直接使用提供的檔案。

03 / Color System

品牌色彩

以 Governor Bay 為主、Zircon 當底色，大面積留給這兩色；Azure 只用來點出重點。比例是整體畫面的建議占比。

主色約 40%

Governor Bay

#1941B2

標誌、標題、按鈕。對應 edge-blue-800

RGB 25 65 178　CMYK 86 63 0 30

輔色約 10%

Azure Radiance

#3586FC

數字、重點、連結。對應 edge-blue-500

RGB 53 134 252　CMYK 79 47 0 1

淺色約 10%

Tropical Blue

#BDDCFF

暗底上的副文字、圖形。對應 edge-blue-200

RGB 189 220 255　CMYK 26 14 0 0

背景約 30%

Zircon White

#F6F9FD

取代純白的頁面底色

RGB 246 249 253　CMYK 3 2 0 1

深色約 5%

Deep Navy

#152656

內文、深色版標誌。對應 edge-blue-950

RGB 21 38 86　CMYK 76 56 0 66

最深約 5%

Ink

#0B1230

暗底背景、長文字

RGB 11 18 48　CMYK 77 63 0 81

漸層

Gradient #1 · 深邃

Zircon → Governor Bay → Ink，120°

Gradient #2 · 明亮

Azure → Governor Bay，120°

文字與背景對比

文字／背景	對比	可用於
Deep Navy / Zircon	13.8 : 1	內文、任何大小
Governor Bay / 白	8.6 : 1	內文、標題、按鈕
Tropical / Governor Bay	6.1 : 1	藍底上的副文字
Azure / 白	3.5 : 1	只用於 24px 以上大字或數字，不用於內文

Edge Blue 完整色階

#EEF6FF

100

#DAEBFF

200

#BDDCFF

300

#90C7FF

400

#5BA9FF

500

#3586FC

600

#1F66F1

700

#1751DE

800

#1941B2

900

#1A3B8E

950

#152656

Tailwind token：edge-blue-50 至 edge-blue-950，定義於 app/globals.css。50–200 用於背景分段，500–600 用於主視覺強調，700–900 用於主要 CTA 與文字對比，950 僅用於深色區塊背景。

語意色彩

Success

--color-success

成功狀態、表單驗證通過、完成提示

Warning

--color-warning

警示訊息、需要留意但非錯誤的狀態

Danger

--color-danger

錯誤訊息、刪除與不可逆操作

Signal

--color-signal

不屬於品牌色。只用在 live 節點與進行中狀態的提示，不做裝飾

04 / Typography

字體與階層

英文與數字用 TASA Explorer，中文用 Noto Sans TC，兩套都是 Google Fonts 免費商用字體。字體設定寫成 TASA Explorer、Noto Sans TC，中文會自動套用 Noto。

LATIN & NUMERALS

TASA Explorer

字重 400–800。用於標誌英文、數據、標籤與頁碼。標籤用全大寫，並加 0.1–0.25em 字距。

CJK

Noto Sans TC

標題 700、內文 400、標誌中文 600。中文標題不加字距；標誌裡的寬字距只屬於標誌。

Display

邊境部署 Find What Matters

Body

邊境部署 Find What Matters

Caption

邊境部署 Find What Matters

層級	桌面	手機	用途
Display	64–80px	40–48px	首頁主標
H1	48px	36px	頁面標題
H2	32px	28px	區塊標題
Body	16–18px	16px	內文
Caption	12–14px	12px	註解、標籤

05 / Spacing & Radius

間距與圓角

統一的圓角與留白節奏，讓不同頁面之間讀起來像同一套系統。

rounded-lg

0.5rem / 8px

輸入框、小型按鈕、Tag

rounded-2xl

1rem / 16px

卡片、圖片容器、案例縮圖

rounded-3xl

1.5rem / 24px

大型色塊區塊、CTA 容器

rounded-full

9999px

按鈕、標籤、圓形圖示底

Token	用途
py-16 / py-20	手機版區塊上下間距
md:py-24 / md:py-28	桌機版區塊上下間距
max-w-7xl	文字、卡片網格、主要頁面容器，約 1280px

06 / Graphic Language

圖形語彙

使用開放式邊框、探索節點、網格場與路徑線，呈現從未知中找到關鍵問題的過程。四個裝置現在統一收斂成 DeployField 這一個共用元件。

Boundary Frame

左上、右下的開口邊角，象徵邊界與入口，只出現在畫面對角，不封閉成完整框線。

Discovery Point

線索與節點連成一條探索路徑，終點是被辨識出的關鍵問題。

Grid Field

72px 網格背景，建立技術秩序感，作為所有裝置的底層座標。

Signal 狀態色

訊號橙 #FF6A3D 不屬於品牌色，只標示 live 節點與進行中狀態，不做裝飾。

藍色流體紋理

用在情感型版面：封面、OG、品牌限動。上方疊 Ink 5% 到 50% 的漸層，讓白字可讀。

建構線與大型半透明標誌

用在資訊型版面：內頁、數據、簡報。建構線沿標誌的邊延伸，透明度 7–12%。兩種素材不放在同一張圖裡。

DeployField — 全站 Hero 與 Banner 共用的唯一背景元件（components/deploy-field.tsx）

grid field + cursive ED route + live node + boundary corners

取代原本每頁各自複製的模糊漸層背景。新頁面請直接引用 DeployField（tone="light" 或 tone="dark"），不要再手刻漸層或格線。

07 / Iconography

圖示系統

統一使用 Lucide 線性圖示，線寬維持預設 2px，尺寸以 16 / 20 / 24px（size-4 / size-5 / size-6）為主，避免混用填色風格圖示。

MonitorSmartphone

Brackets

Workflow

Search

Wrench

User

Smartphone

Rocket

MessageCircle

Mail

Check

Minus

08 / UI Components

介面元件

網站以 HeroUI 元件庫為基礎，統一按鈕、標籤與卡片樣式，確保各頁面互動元件一致。

按鈕 Buttons

PrimarySecondaryOutline

Primary 用於每頁最主要的行動呼籲（如：說說你卡在哪）；Secondary／Outline 用於次要或並列選項，一個畫面避免出現超過一個 Primary 按鈕。

標籤 Chips

AccentAccent SoftSuccessWarningDanger

Chip 用於分類標籤、狀態提示與眉標（如頁面 SectionTitle 的 01 / Brand Core）。語意色僅用於對應狀態，不作為一般裝飾。

卡片 Cards

問題釐清

白底卡片、圓角 2xl、輕微陰影，統一用於服務、案例與規範內容展示。

解法設計

白底卡片、圓角 2xl、輕微陰影，統一用於服務、案例與規範內容展示。

落地驗證

白底卡片、圓角 2xl、輕微陰影，統一用於服務、案例與規範內容展示。

09 / Voice

品牌語氣

說人話，保留技術含量。不要把每句話都塞進「賦能、顛覆、全方位」攪拌機。

先釐清真正卡住的問題，再討論要做什麼。

從現況與限制出發，一起找到適合的解法。

讓每個建議都有理由，也能在真實情境中被驗證。

提供最頂尖、最全面、最創新的全方位解決方案。

賦能企業數位轉型，打造無限可能新未來。

用 AI 與科技顛覆世界，開創宇宙級服務體驗。

10 / Imagery Style

影像風格

圖片是品牌語氣的延伸，優先選用能反映「問題、脈絡、清楚」的視覺，而不是隨手可得的商務素材。

幾何、系統、介面截圖與能呈現問題脈絡的視覺

留白充足、以品牌藍為主色調的圖像

真實專案畫面、產品截圖與線框示意

浮濫的 AI 生成素材與過度科幻場景

商務握手、辦公室擺拍等制式素材照

高飽和度、雜亂無章的色塊拼貼

11 / Applications

應用情境

視覺規範不是供起來拜的神獸，而是要能真的用在網站、簡報、社群與產品介面。

Website

使用淺底留白、藍色按鈕與清楚卡片層級，讓問題、判斷與下一步被逐步理解。

Presentation

封面可用照片疊上藍黑遮罩；內容頁以白底、淺藍分段與品牌藍建立專業感。

Social

社群圖卡應以白底或淺藍底為主，亮藍只做提示，不要把整張卡刷成高彩度藍色便當。

12 / Platform Assets

平台素材與檔案

網站、OG 分享圖與各社群平台的頭像、橫幅都已依規範做好，下方可預覽並下載全部檔案。

OG 預設 1200×630

流體紋理加白色橫式標誌，全站預設分享圖

OG 淺色 1200×630

Zircon 淺底

OG 深色 1200×630

深色底

Facebook 封面 1640×624

內容集中在中央 1100px

X 標頭 1500×500

標誌靠右，避開左下頭像

LinkedIn 個人橫幅 1584×396

淺色版

社群貼文版型

貼文採三種版型輪流使用：紋理封面、淺色內頁、深色數據。範例文字是示意，套用時換成實際內容。

貼文・封面 1080×1350

紋理底加白字，用來抓住注意力

貼文・內頁 1080×1350

淺色底，編號與內文

貼文・數據 1080×1350

深色底，突顯一個數字

限動・活動 1080×1920

藍色漸層底，附行動按鈕

產生新貼文：在專案根目錄執行 node scripts/brand/make.mjs，用法見 AGENTS.md「品牌素材產生工具」。除了貼文與限動，腳本還能產生文章分享圖（og，1200×630）與 YouTube 縮圖（thumb，1280×720）。各平台尺寸的完整版型（含頭像、精選封面、圖文選單、多頁輪播）可在管理後台的品牌模板編輯器產出。

標誌下載

組合	色版（SVG／PNG 2400px 透明底）
橫式	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNGtwotone　SVG · PNG
直式	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNGtwotone　SVG · PNG
橫式英文	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNG
橫式中文	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNG
純文字標	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNG
標誌	藍　SVG · PNG深藍　SVG · PNG白　SVG · PNG黑　SVG · PNG

社群與網站素材下載

每個檔案都標明用途、尺寸與格式。頭像請優先使用藍底版本。

網站

15 個檔案

圖示與分享圖。網站目前使用的版本已複製到 public/favicon 與 public/og-default.jpg。

網站圖示 SVG

瀏覽器分頁圖示，現代瀏覽器優先使用

SVG · 1 KB

下載 SVG

ICO

網站圖示 ICO

舊版瀏覽器與書籤，內含 16、32、48

48×48 · ICO · 5 KB

下載 ICO

網站圖示 16px

最小尺寸的分頁圖示

16×16 · PNG · 1 KB

邊境部署品牌視覺規範

品牌核心

Discover

Solve Together

Deliver

標誌系統

安全距離與最小尺寸

背景搭配

禁止用法

品牌色彩

Governor Bay

Azure Radiance

Tropical Blue

Zircon White

Deep Navy

Ink

漸層

文字與背景對比

Edge Blue 完整色階

語意色彩

Success

Warning

Danger

Signal

字體與階層

間距與圓角

圖形語彙

Boundary Frame

Discovery Point

Grid Field

Signal 狀態色

藍色流體紋理

建構線與大型半透明標誌

圖示系統

介面元件

按鈕 Buttons

標籤 Chips

卡片 Cards

問題釐清

解法設計

落地驗證

品牌語氣

建議寫法

避免寫法

影像風格

優先使用

避免使用

應用情境

Website

Presentation

Social

平台素材與檔案

社群貼文版型

標誌下載

社群與網站素材下載

網站

Instagram

Threads

Facebook

LINE 官方帳號

YouTube

LinkedIn

X

色彩檔案