精選 · 開放 · 免費
Farcaster
建構。分享。成長。
web3social
01
設計氣質 DNA
去中心化社群開發者開放協議
為建造者打造的去中心化社群協議。
02
色彩
#7959FFAccent
#FFFFFFInk
rgba(255, 255, 255, 0.8)Ink soft
#361AACBG
rgba(255, 255, 255, 0.5)Muted
rgba(255, 255, 255, 0.25)Line
深靛藍背景搭配白色文字,實現高對比度。
03
字型
humanist-sans
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基礎網格。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 300px
無,依賴背景對比度。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準網頁佈局,行動裝置優先。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
流暢的懸停過渡效果。
縮放或顏色變化。 · 輕微縮小。
08
組件
- button 圓角膠囊形狀,包含主要與次要樣式。
- card 手機應用程式預覽採用深色玻璃效果。
- chip 無可見元素。
- input 無可見元素。
- hero 分割式版面,包含手機模型與號召性用語。
09
文案語氣與禁用清單
- 語氣 直接、自信、技術性。
- 標題風格 簡短有力的句子。
- 按鈕文案 清晰且具可操作性。
- 不要使用細字重——截圖顯示為粗體/中等字重。
- 不要在主要按鈕上使用銳角——截圖顯示為膠囊形狀。
- 不要使用淺色背景——截圖顯示為深靛藍色。
- 不要使用複雜漸層——截圖顯示為純色或非常 subtle 的漸層。
- 不要使用裝飾性字體——截圖顯示為簡潔的無襯線字體。
- 不要雜亂版面——截圖顯示清晰、專注的首頁區塊。
- 避免: 模糊的承諾。
- 避免: 過度的行銷用語。
- 避免: 非技術性術語。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個面向開發者與創作者的去中心化社群協議。深靛藍背景 (#361AAC) 搭配白色文字與鮮活的紫色強調色 (#7959FF)。使用簡潔的人文主義無襯線字體 (Inter),並以粗體字重強調重點。按鈕為完全圓角(膠囊形狀)。版面簡潔且專注,避免雜亂。關鍵禁忌:不要在按鈕上使用銳角,不要使用淺色背景,不要使用細字重。
en · zh-CN · zh-TW · ja · ko