精選 · 開放 · 免費

Weights & Biases

一個企業級 AI 平台，採用暗色主題與俏皮的手寫註解，讓複雜的技術工具更具人性化。

01

設計氣質 DNA

帶有一絲個性的高效能工程儀表板

02

色彩

高對比暗色主題，使用鮮明的琥珀色強調色帶來溫暖感，並以標誌性的青色作為次要行動呼籲

03

字型

transitional-serif · humanist-sans · monospace

• display80px · 400
• h148px · 400
• body20px · 400

大型展示文字與權威性標題使用過渡襯線體 (transitional-serif) · 內文與使用者介面元素使用人文無襯線體 (humanist-sans) · 程式碼區塊與類終端機介面使用等寬字體 (monospace) · 手寫註解（例如「easy」）視為覆蓋於標準字體之上的特殊裝飾層

04

間距

標準 4px 網格，搭配充裕的留白以強調規模與重要性

05

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

使用 rgba(43, 48, 59, 1.0) 的 1px 實線邊框，作為細微的容器劃分

rgba(10, 14, 21, 0.5) 0px -1px 16px 0px · rgba(10, 14, 21, 0.5) 0px 16px 16px 0px

06

版面

置中、寬幅格式的佈局，具有清晰的區塊分隔，並運用雙欄網格展示程式碼範例

07

動效與互動

按鈕與互動元素的懸停狀態 · 懸停時細微的背景顏色過渡 · 互動式卡片元素的變換效果

背景顏色略微加深或變亮；游標變為指向圖示。 · 提供即時的視覺回饋，伴隨輕微的縮放或顏色變化。

08

組件

• button 主要按鈕為實心琥珀色配深色文字；次要按鈕為青色配深色文字。描邊按鈕用於導覽連結。
• card 用於程式碼區塊與功能模組的深色、微提升容器，具有圓角與細微陰影。
• chip 邊框半徑為 50% 的小型徽章，用於狀態指示器或裝飾性圓點。
• input 設計為帶有行號的類終端機視窗，具有深色背景與等寬字體。
• hero 大型置中標題，覆蓋有俏皮的手寫註解，輔以清晰的價值主張與顯著的行動呼籲。

09

文案語氣與禁用清單

• 語氣 專業 yet 平易近人，融合技術精確性與俏皮的自信感。
• 標題風格 大膽、宣言式的陳述，偶爾帶有俏皮的修正（例如刪除「hard」寫上「easy」）。
• 按鈕文案 直接且以行動為導向，使用大寫強調（例如「GET STARTED WITH WEAVE」）。

• 不要使用淺色背景——截圖顯示的是以 #202226 為主要背景的暗色主題
• 不要使用無襯線體作為大型展示標題——截圖顯示主標題使用過渡襯線體
• 不要使用紅色作為主要行動呼籲——截圖顯示琥珀色 (#FCBC32) 作為主要強調色
• 不要使用嚴格、純實用的佈局——截圖顯示在標準字體上覆蓋了俏皮的手寫風格註解
• 不要使用狹小、密集的容器——截圖顯示主要元件具有充裕的內距與間距
• 不要使用複雜的漸層作為背景——截圖顯示純色的深色背景，僅在裝飾性元素中偶爾使用細微的漸層
• 避免: 避免過於企業化或生硬的語言
• 避免: 避免雜亂或混沌的佈局
• 避免: 避免使用純粹的極簡主義、冷峻美學
• 避免: 避免使用缺乏視覺輔助的複雜術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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