精选 · 开放 · 免费

Balsa

一款用于构建软件的文档与项目跟踪工具。

01

设计气质 DNA

一个干净、聚焦的工作空间，帮助产品团队统一目标与任务。

02

色彩

采用高对比度的黑白配色，辅以单一、高饱和度的黄色作为强调色，用于突出关键的界面卡片和提示区域。

03

字体

grotesque-sans · humanist-sans · monospace

• display48px · 700
• heading24px · 700
• body16px · 400
• caption12px · 400

UI标签和状态指示器使用大写字母。 · 主标题使用较重的字重和紧凑的字间距。

04

间距

基于统一的 4px 网格系统，主视觉区域留白充足。

05

表面 (圆角 / 阴影 / 边线)

使用纤细、低不透明度的黑色边框（rgba(0,0,0,0.09））进行微妙分隔。

rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px

06

布局

营销站点采用单栏居中布局，产品界面截图区域则使用复杂的多栏网格。

07

动效与交互

在 hover 和 focus 状态下使用平滑过渡。

交互元素在悬停时发生细微的颜色变化或阴影偏移。 · 通过状态变化提供即时的视觉反馈。

08

组件

• button 主操作使用实心黑色药丸形按钮，次级操作使用带边框的药丸形按钮。
• card 白色卡片带有柔和阴影（例如主产品界面截图），以及用于突出功能的黄色强调卡片。
• chip 带有圆角和背景色的状态指示器。
• input 简洁、带边框且有细微阴影的输入框。
• hero 居中、文字密集的主视觉区域，包含大标题、副标题，下方是突出的产品界面截图。

09

文案语气与禁用清单

• 语气 直接、专业，聚焦于团队效率。
• 标题风格 全大写、加粗、高对比度。
• 按钮文案 清晰、以行动为导向，通常包含在药丸形按钮中。

• 避免使用杂乱的背景 — 截图显示为干净、纯白的背景（#FFFFFF）。
• 避免使用低对比度的强调色 — 截图显示使用高饱和度的黄色（#FFB700）进行强调。
• 避免使用浅色或灰色的主文本色 — 截图显示主标题使用纯黑色（#000000）。
• 避免使用尖锐的直角 — 截图显示主卡片和容器使用圆角（12px）。
• 避免使用深色模式界面 — 截图显示主要为白色/浅色主题。
• 避免使用装饰性、手写体或过度风格化的字体 — 截图显示使用干净、功能性的无衬线字体和等宽字体类别。
• 避免: 随意的语言
• 避免: 复杂的术语
• 避免: 过于密集的文本块

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko