精选 · 开放 · 免费
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
过渡时淡入淡出 · 交互元素上的细微悬停状态
细微的透明度变化或颜色过渡 · 即时响应，视觉反馈最小化
08
组件
- button 圆润的胶囊形按钮，主按钮（黑色）与次按钮（带边框的白色）之间具有强烈对比。
- card 简洁的卡片，带有细微边框或阴影，具备清晰的排版和操作按钮。
- chip 用于标签或状态指示器的小型圆角胶囊。
- input 带有细微边框的简洁文本输入框。
- 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