01
设计气质 DNA
简洁性可访问性响应式
数字工具包的冷静、几何风格欢迎屏幕。
02
色彩
#33ada9Accent#ffffffInkrgba(255,255,255,0.75)Ink soft#24252dBGrgba(255,255,255,0.4)Mutedrgba(255,255,255,0.075)Line深色低饱和度渐变背景上的高对比度白色文字，搭配单一鲜明的青绿色强调色。
03
字体
- display
56px · 700 - heading
34px · 700 - body-lg
24px · 400 - body
16px · 400 - caption
12px · 400
04
间距
4px8px16px24px32px48px64px96px基于 4px 的基础比例，大区域采用宽裕内边距 (32-64px)。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 12px
pill · 999px
微妙的 1-2px 白色边框，采用不同透明度 (0.4 至 0.75)，或纯白描边。
rgba(0, 0, 0, 0.1) 0px 8px 16px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
首屏采用居中单列布局，功能部分过渡为双列网格。
07
动效与交互
200msmicro
250mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停与聚焦时的颜色和透明度过渡 · 页面区域淡入
交互元素上的颜色过渡与微妙透明度变化。 · N/A
08
组件
- button 圆角矩形，主操作按钮填充纯色青绿色，次级操作按钮采用细白边框。
- card 带图片和微妙阴影的卡片，常用于模板预览。
- chip N/A
- input N/A
- hero 全宽居中布局，包含大号标志、标题、副标题和主操作按钮。
09
文案语气与禁用清单
- 语气 乐于助人、极简且平易近人。
- 标题风格 加粗、大号、简洁，常使用单个词汇如「响应式」或「免费」。
- 按钮文案 直接且行动导向，使用类似「选择一个起点」的措辞。
- 避免使用多种竞争性强调色——截图显示仅使用单一青绿色 (#33ada9) 作为唯一鲜明色相。
- 避免使用复杂、多层的渐变——截图显示简单的双色线性渐变叠加。
- 避免使用装饰性或衬线字体——截图显示简洁、标准的 grotesque-sans (Arial/Helvetica)。
- 避免使用厚重、纯黑的背景——截图显示深炭灰色 (#24252d) 作为主要背景。
- 避免按钮使用方形尖角——截图显示一致的 6px 圆角。
- 避免使用宽大、分散的布局——截图显示内容限制在窄的居中栏内。
- 避免: 术语密集的 technical 语言
- 避免: 过于复杂的句子
- 避免: 侵略性或紧迫的语调
10
包内真实截图
11
System Prompt
Carrd 是一款极简、用户友好的工具，用于创建简单的单页网站。设计采用以炭灰色 (#24252d) 为中心的深色、低饱和度调色板，搭配微妙的紫蓝渐变叠加。字体严格遵循功能性，所有展示和正文文字均使用标准系统 grotesque-sans 字体 (Arial/Helvetica)。单一鲜明的强调色是柔和的青绿色 (#33ada9)，专用于主操作按钮以提供清晰视觉引导。关键设计约束包括避免复杂配色方案、严格保持居中单列或简单双列布局，以及交互元素仅使用一致的 6px 圆角。整体基调冷静、克制，高度聚焦于清晰度与易用性。