精選 · 開放 · 免費

Optimism

以開發者為中心、具備高端美感的企業級區塊鏈基礎設施。

CryptoL2

Optimism 網站截圖

↓ 下載設計系統包 (8 MB)在 OpenDesign 中開啟

原站: https://www.optimism.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

區塊鏈企業開發者基礎設施加密貨幣

區塊鏈技術的高端企業級基礎設施供應商

02

色彩

#111111Ink

#7B7B7BInk soft

#F4F4F0BG soft

#FAFAF9BG quiet

rgba(17,17,17,0.5)Line

採用暖色調米白色背景的高對比度單色色板，確保最大的可讀性與專業語調。

03

字型

humanist-sans · monospace

display65px · 400
heading40px · 400
body16px · 400
small14px · 400

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

採用 4px 網格的寬裕留白，營造高端且不擁擠的感覺。

05

表面 (圓角 / 陰影 / 邊線)

sm · 6px

md · 8px

lg · 12px

pill · 999999px

使用 1px solid rgba(17,17,17,0.5) 作為細微的區隔線

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的單欄首頁區塊，下方搭配多欄卡片網格

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0.0, 0.2, 1)easing

互動元素上細微的懸停過渡效果 · 流暢的頁面滾動效果

按鈕與連結的顏色過渡效果，細微的背景變化 · 提供即時回饋，帶有輕微的縮放或顏色變化

08

組件

button 採用深色背景或外框邊界的膠囊形按鈕，搭配高對比度文字
card 乾淨的矩形卡片，採用最少邊框，用於見證與統計數據
chip 用於「金融科技」、「交易所」等分類標籤的圓角膠囊形標籤，並帶有圖示
input 乾淨、極簡的輸入欄位，帶有細微邊框
hero 全寬度、居中的首頁區塊，採用大型字體排印與顯眼的行動呼籲按鈕

09

文案語氣與禁用清單

語氣專業、自信且具權威感，同時對開發者保持親和力
標題風格 簡短、有力的陳述，使用強而有力的動詞，常以系列形式呈現
按鈕文案 直接且以行動為導向，使用「開始建構」、「進一步了解」等詞彙

不要使用鮮豔的強調色 — 截圖顯示的是無主導色彩強調的單色色板
不要使用裝飾性字體 — 截圖中的所有文字皆使用乾淨的人文無襯線字體
不要使佈局過於擁擠 — 截圖顯示每個視窗畫面都有寬裕的留白與最少的元素
不要使用複雜的漸層 — 截圖顯示的是實色與極簡的背景處理
不要使用小而擁擠的字體排印 — 截圖展示的是大而自信的標題，並採用寬裕的尺寸
不要使用圓形、俏皮的使用者介面元素 — 截圖顯示的主要是矩形或微微圓角的元件
避免: 大量使用術語的語言
避免: 過於隨意的語調
避免: 侵略性的行銷用語

10

包內真實截圖

Optimism — 桌面首屏（hero） — 桌面首屏（hero）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Optimism — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個面向企業與開發者受眾的高端區塊鏈基礎設施網站。定位強調透過區塊鏈技術實現的可靠性、效能與營收成長。關鍵色碼包括 #111111 用於背景/墨色、#F4F4F0 用於柔和背景，以及 #7B7B7B 用於柔和文字。字體排印採用人文無襯線字體類別，搭配寬裕的尺寸（65px 標題）與緊湊的字間距（-0.65px）。關鍵注意事項：1) 不要使用鮮豔的強調色，因為色板嚴格採用單色，2) 不要使佈局過於擁擠 — 保持寬裕的留白以營造高端感覺，3) 不要使用裝飾性或手寫字體 — 保持字體排印乾淨且專業。此設計優先考量金融科技應用的清晰度、權威性與可信度。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko