精选 · 开放 · 免费
Campsite
一款专注的团队沟通工具，用有序的帖子取代嘈杂的聊天。
SaaSProductivityCleanCalmRestraint
01
设计气质 DNA
深思熟虑专注团队沟通
一个安静、井然有序的团队帖子图书馆。
02
色彩
#fb432cAccent
#171717Ink
#737373Ink soft
#ffffffBG
#f5f5f5BG soft
#f0f0f0BG quiet
#a3a3a3Muted
rgba(0, 0, 0, 0.1)Line
高对比度极简主义：以深墨色为锚点的清爽白色界面，并用鲜明的橙红色强调关键操作。
03
字体
humanist-sans · monospace
- display
56px · 500 - h2
32px · 600 - body
16px · 400 - small
14px · 400
大型展示文本采用负字距 · 正文使用常规字重 · 章节标题使用半粗体
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于4px的统一基础网格
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(0, 0, 0, 0.1)
0px 3px 6px -3px rgba(0, 0, 0, 0.05) · 0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 1px 0px -1px rgba(0, 0, 0, 0.05)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的营销网站布局，内容居中且留白充足。
07
动效与交互
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的颜色过渡 · 交互时细微的box-shadow变化
细微的颜色或背景变化。 · 即时的视觉反馈。
08
组件
- button 圆润的药丸形状，采用描边或实心的主色。
- card 干净的白色容器，带有细微边框和柔和阴影。
- chip 带有细微背景的小型圆角标签。
- input 带有浅色边框的标准文本输入框。
- hero 居中的大标题，辅以支持性文案和产品截图。
09
文案语气与禁用清单
- 语气 专业且平易近人。
- 标题风格 简洁、直接、以利益为导向。
- 按钮文案 简洁、行动导向的文本，置于圆角按钮内。
- 不要使用深色或暗色模式背景——截图显示为明亮的白色界面（#ffffff）。
- 不要使用尖锐的直角——截图显示的是药丸形状（9999px）和圆角卡片（8px–12px）。
- 不要使用喧闹、复杂的渐变——截图显示的是干净的纯色背景，配以单一的橙色强调。
- 不要使用过于装饰性或花哨的字体——截图显示的是简洁、功能性的无衬线字体。
- 不要将元素拥挤排列——截图显示了充足的留白（基于4px网格）。
- 不要使用生硬的投影——截图显示的是非常细微、低透明度的box-shadow。
- 避免: 充满行话的语言
- 避免: 过于喧闹或激进的营销文案
- 避免: 视觉混乱
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Campsite是一款为远程团队打造的专注团队沟通工具。其设计基因建立在干净、高对比度的极简美学之上：明亮的白色（#ffffff）界面、深墨色（#171717）文本，以及用于主要操作的鲜明橙红色（#fb432c）强调色。字体采用人文无衬线类别，大型展示文本使用负字距。关键设计约束：不要使用暗色模式或复杂渐变，不要使用尖锐直角（始终使用圆润的药丸形状或柔和的圆角），并且不要拥挤布局（保持充足的留白）。
en · zh-CN · zh-TW · ja · ko