精選 · 開放 · 免費
Lens
為鏈上文化與社群奠定基礎的社交層。
web3social
01
設計氣質 DNA
社交協定鏈上去中心化生態系基礎設施
一個簡潔、以基礎設施為導向的去中心化網路社交協定。
02
色彩
#2C2D30Ink
#373737Ink soft
#FFFFFFBG
#F5F5F5BG quiet
rgba(55,55,55,0.4)Muted
以高對比度的黑白單色調為基礎，並依賴色彩鮮明的圖像作為點綴。
03
字型
geometric-sans · humanist-sans · sfmono
- display
56px · 500 - body
16px · 400 - caption
14px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
版面與元件間距均採用一致的 4px 基礎網格。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(55, 55, 55, 0.4)
rgba(0, 0, 0, 0.05) 0px 0px 0px 1px · rgba(44, 45, 48, 0.08) 0px 10px 24px 0px · rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
內容採用居中的單欄版面，生態系展示區則使用寬幅容器。
07
動效與互動
100msmicro
170mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
轉場時的淡入淡出效果 · 互動元素上的細微 hover 狀態
細微的透明度變化或顏色過渡 · 立即回應，視覺回饋最小化
08
組件
- button 圓角膠囊形按鈕，主要（黑色）與次要（白色帶邊框）樣式之間具有強烈對比。
- card 簡潔的卡片，帶有細微邊框或陰影，排版清晰並配有操作按鈕。
- chip 用於標籤或狀態指示的小型圓角膠囊。
- input 簡潔的文字輸入框，帶有細微邊框。
- hero 居中的 hero 區塊，包含大型展示標題、輔助文字與兩個主要操作按鈕。
09
文案語氣與禁用清單
- 語氣 自信、清晰且技術導向。
- 標題風格 大膽、簡潔地陳述產品功能。
- 按鈕文案 直接且以行動為導向，提供明確的價值主張。
- 不要使用複雜的漸層 — 畫面截圖顯示的是平面色彩與細微陰影
- 不要使用裝飾性插圖 — 畫面截圖顯示的是手機中的真實產品模型
- 不要使用多種強調色 — 畫面截圖顯示的是搭配鮮明圖像的單色調色盤
- 不要使用厚重的投影 — 畢面截圖顯示的是細微的 1px 邊框與柔和陰影
- 不要使用緊縮的排版 — 畫面截圖顯示的是開闊、易讀的無襯線字體
- 不要使用繁複的導覽 — 畢面截圖顯示的是簡潔、極簡的頂部導覽，僅包含少數項目
- 避免: 脫離脈絡的過度技術術語
- 避免: 激進的銷售用語
- 避免: 模糊的承諾
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Lens Protocol 的網站設計體現了 web3 社交層簡潔、以基礎設施為導向的美學。關鍵色彩包括白色背景 (#FFFFFF)、黑色主要色 (#000000)，以及用於文字的細微中性色 (#2C2D30)。排版採用幾何與人文無襯線字體類別（如 Saans 和 Inter），字距緊湊。關鍵設計規則：1) 保持充裕的留白與居中版面。2) 主要 UI 元素使用高對比度的黑白配色。3) 避免裝飾性插圖，專注於產品模型。
en · zh-CN · zh-TW · ja · ko