精選 · 開放 · 免費

Evidence

將資料儀表板視為程式碼的商業智慧平台，結合開發者工作流程與乾淨、專業的使用者介面。

01

設計氣質 DNA

一個為開發者導向的分析工具打造的現代化文件網站

02

色彩

以中性灰為基調，搭配單一藍色強調，體現技術精確感

03

字型

transitional-serif · humanist-sans · geometric-sans

• display56px · 500
• heading36px · 500
• body16px · 400
• caption14px · 400
• micro12px · 500

大寫微文字使用 letter-spacing 0.4px · 大型展示標題使用 letter-spacing -1.5px · 16px 正文維持 1.5 行高 · 正文中的強調文字使用 weight 600 · 互動元素使用 weight 500

04

間距

以一致的 4px 基礎格線為基礎，章節間採用寬裕的垂直間距

05

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

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

版面

內容置中，搭配寬裕的水平內距與清晰的視覺層級

07

動效與互動

懸停狀態的顏色與透明度流暢轉場 · 彈出視窗與下拉選單出現時的細膩淡入效果

200 毫秒的流暢顏色轉場與透明度變化 · 提供即時視覺回饋，採用標準按鈕按下狀態

08

組件

• button 圓角膠囊造型，具高對比；主要按鈕為黑色實心，次要按鈕為白色邊框
• card 白色背景，搭配細微陰影與 1px 邊框
• chip 小型膠囊造型標籤，採用大寫微文字
• input 簡潔的邊框欄位，帶有細微陰影
• hero 大型置中標題，搭配次要副標題與雙重行動呼籲按鈕

09

文案語氣與禁用清單

• 語氣 專業、技術性、充滿自信
• 標題風格 清晰、簡潔、以行動為導向，並具強烈的字體層級
• 按鈕文案 直接且帶指令性，使用如「立即開始」與「預約演示」等動詞

• 不使用深色模式 — 螢幕截圖顯示深色文字 (#111827) 搭配淺色背景 (#FFFFFF)
• 不使用厚重陰影 — 螢幕截圖顯示細微的 1px 邊框與最小化浮凸效果
• 不使用裝飾性襯線字體作為內文 — 螢幕截圖中所有可讀文字均採用無襯線字體
• 不使用多色強調 — 螢幕截圖僅顯示單一藍色強調 (#1D4ED8) 搭配中性灰色調
• 不使用圓角矩形按鈕 — 螢幕截圖顯示全圓角的膠囊形按鈕
• 不隨處使用大寫文字 — 螢幕截圖僅在微文字標籤保留大寫
• 不在主要內容區使用漸層背景 — 螢幕截圖顯示純白平面
• 避免: 過度口語或非正式的語言
• 避免: 缺乏脈絡的技術術語
• 避免: 過多的驚嘆號
• 避免: 模糊或抽象的價值主張

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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