精选 · 开放 · 免费
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
文案语气与禁用清单
- 语气 直接、自信、技术性。
- 标题风格 简短有力的句子。
- 按钮文案 清晰且可操作。
- 不要使用细字体权重——截图显示为粗体/中等权重。
- 不要在主要按钮上使用尖锐边角——截图显示为药丸形状。
- 不要使用浅色背景——截图显示为深靛蓝色。
- 不要使用复杂渐变——截图显示为纯色或非常微妙的渐变。
- 不要使用装饰性字体——截图显示为简洁的无衬线字体。
- 不要让布局显得杂乱——截图显示清晰、聚焦的主视觉区域。
- 避免: 模糊的承诺。
- 避免: 过度的营销套话。
- 避免: 非技术性术语。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个面向开发者和创作者的去中心化社交协议。采用深靛蓝色背景（#361AAC），搭配白色文字和醒目的紫色强调色（#7959FF）。使用简洁的人文主义无衬线字体（Inter），并通过粗体权重实现强调。按钮为全圆角（药丸形状）。布局简洁聚焦，避免杂乱。关键禁忌：不要使用尖锐的按钮边角，不要使用浅色背景，不要使用细字体权重。
en · zh-CN · zh-TW · ja · ko