精選 · 開放 · 免費

Rainbowkit

為 Web3 應用程式連接錢包的最佳方式。

01

設計氣質 DNA

一座友善多彩的橋樑，連接開發者與區塊鏈錢包。

02

色彩

以深色、高對比度為基底，搭配鮮豔的藍色與紫色強調色以提升可見度。

03

字型

humanist-sans · monospace

• display52px · 700
• heading24px · 600
• body16px · 400
• caption13px · 400

所有主要 UI 文字皆使用 humanist-sans · 程式碼片段與版本編號使用 monospace · 標題保持緊湊的字距

04

間距

以 4px 遞增為基礎的垂直節奏，首頁區域搭配充裕的 padding。

05

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

1px solid rgba(245, 248, 255, 0.12)

rgba(0, 0, 0, 0.4) 0px 8px 24px 0px · rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset

06

版面

內容密集的章節採用置中單欄版面配置，搭配全寬深色背景。

07

動效與互動

hover 狀態採用流暢的 transform 與 opacity 過渡 · 較長的背景元素使用線性 opacity 淡入淡出

輕微的 transform 縮放與色彩變化 · 即時回饋並重置 transform

08

組件

• button 圓潤的膠囊造型，搭配實色藍色背景與白色文字
• card 深色圓角容器，帶有細緻邊框與內部 padding
• chip 用於版本編號或標籤的小型圓角徽章
• input 深色背景搭配細緻邊框，用於命令列程式碼片段
• hero 大型置中文字，搭配顯眼的行動按鈕與背景漸層

09

文案語氣與禁用清單

• 語氣 技術性、友善且自信
• 標題風格 大膽直接的功能性陳述
• 按鈕文案 清晰的行動導向動詞，例如「檢視文件」與「連接錢包」

• 勿使用淺色主題 — 螢幕截圖顯示嚴格的深色模式介面。
• 勿使用尖銳邊角 — 螢幕截圖顯示主要為圓角與膠囊造型元件。
• 勿使用單一平面色彩 — 螢幕截圖顯示鮮豔的藍色與紫色漸層。
• 勿使用寬鬆、擴展的行高 — 螢幕截圖顯示緊湊的垂直間距。
• 勿使用襯線字體 — 螢幕截圖顯示所有主要 UI 文字皆使用 humanist-sans。
• 勿使用小而擁擠的按鈕 — 螢幕截圖顯示大型、寬裕 padding 的互動元件。
• 避免: 避免過度企業化或正式的語言
• 避免: 避免在首頁區域使用不必要的術語
• 避免: 避免用過多選項使介面雜亂

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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