精選 · 開放 · 免費
Evidence
將資料儀表板視為程式碼的商業智慧平台,結合開發者工作流程與乾淨、專業的使用者介面。
databi
01
設計氣質 DNA
分析開發者版本控制資料產品
一個為開發者導向的分析工具打造的現代化文件網站
02
色彩
#1D4ED8Accent
#111827Ink
#4B5563Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F3F4F6BG quiet
#6B7280Muted
rgba(229, 231, 235, 1)Line
以中性灰為基調,搭配單一藍色強調,體現技術精確感
03
字型
transitional-serif · humanist-sans · geometric-sans
- display
56px · 500 - heading
36px · 500 - body
16px · 400 - caption
14px · 400 - micro
12px · 500
大寫微文字使用 letter-spacing 0.4px · 大型展示標題使用 letter-spacing -1.5px · 16px 正文維持 1.5 行高 · 正文中的強調文字使用 weight 600 · 互動元素使用 weight 500
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
64px
以一致的 4px 基礎格線為基礎,章節間採用寬裕的垂直間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 6px
lg · 8px
pill · 9999px
1px solid #E5E7EB
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
內容置中,搭配寬裕的水平內距與清晰的視覺層級
07
動效與互動
200msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
懸停狀態的顏色與透明度流暢轉場 · 彈出視窗與下拉選單出現時的細膩淡入效果
200 毫秒的流暢顏色轉場與透明度變化 · 提供即時視覺回饋,採用標準按鈕按下狀態
08
組件
- button 圓角膠囊造型,具高對比;主要按鈕為黑色實心,次要按鈕為白色邊框
- card 白色背景,搭配細微陰影與 1px 邊框
- chip 小型膠囊造型標籤,採用大寫微文字
- input 簡潔的邊框欄位,帶有細微陰影
- hero 大型置中標題,搭配次要副標題與雙重行動呼籲按鈕
09
文案語氣與禁用清單
- 語氣 專業、技術性、充滿自信
- 標題風格 清晰、簡潔、以行動為導向,並具強烈的字體層級
- 按鈕文案 直接且帶指令性,使用如「立即開始」與「預約演示」等動詞
- 不使用深色模式 — 螢幕截圖顯示深色文字 (#111827) 搭配淺色背景 (#FFFFFF)
- 不使用厚重陰影 — 螢幕截圖顯示細微的 1px 邊框與最小化浮凸效果
- 不使用裝飾性襯線字體作為內文 — 螢幕截圖中所有可讀文字均採用無襯線字體
- 不使用多色強調 — 螢幕截圖僅顯示單一藍色強調 (#1D4ED8) 搭配中性灰色調
- 不使用圓角矩形按鈕 — 螢幕截圖顯示全圓角的膠囊形按鈕
- 不隨處使用大寫文字 — 螢幕截圖僅在微文字標籤保留大寫
- 不在主要內容區使用漸層背景 — 螢幕截圖顯示純白平面
- 避免: 過度口語或非正式的語言
- 避免: 缺乏脈絡的技術術語
- 避免: 過多的驚嘆號
- 避免: 模糊或抽象的價值主張
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Evidence.dev 是一個開發者導向的分析平台,將商業智慧呈現為程式碼。設計採用乾淨的白色背景 (#FFFFFF) 搭配主要黑色文字 (#111827) 與單一藍色強調 (#1D4ED8)。字體結合了用於英雄標題的過渡襯線字體,以及用於內文的人文無襯線字體,主要字族使用 Geist。佈局採用寬裕的留白、置中內容,並透過淺色邊框營造細微的卡片浮凸感。關鍵禁忌:切勿使用深色模式,避免在內容區域使用厚重陰影或漸層,切勿使用裝飾性字體處理技術內容。此介面優先考慮可讀性與專業可信度,以服務建構資料產品的技術受眾。
en · zh-CN · zh-TW · ja · ko