精选 · 开放 · 免费

Coda

为有序团队打造的一体化协作工作空间。

productivitysaas

Coda 网站截图

↓ 下载设计系统包 (11 MB)在 OpenDesign 中打开

原站: https://coda.io

📦 浏览包内文件 →

01

设计气质 DNA

协作一体化工作空间有序团队

团队项目的统一指挥中心。

02

色彩

#F8AD40Accent

#212121Ink

#666666Ink soft

#FFF6ECBG

#FFFFFFBG soft

#DBEEFABG quiet

#8E8E8EMuted

rgba(33, 33, 33, 0.15)Line

温暖、平易近人的基础色，搭配高对比度、功能性的深色强调色。

03

字体

grotesque-sans · humanist-sans · monospace

display52px · 700
headline38px · 700
body16px · 400
caption14px · 400

主要陈述使用粗重字重 · 标题使用负字间距以获得更紧凑的排版 · 所有正文和UI文本使用Inter字体

04

间距

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

基于4px的一致基础网格，交互元素使用可变padding。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgb(33, 33, 33) 或 rgb(224, 224, 224)

0px 12px 24px -5px rgba(0, 0, 0, 0.06) · 0px 5px 10px -6px rgba(0, 0, 0, 0.06) · 8px 8px 0px 0px #000000

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

标准顶部导航，后接一个居中的巨大主视觉区域。

07

动效与交互

150msmicro

200mssmall

250msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover时细微的背景色过渡 · 交互状态下的透明度变化

背景色或颜色变化，过渡时间为0.15秒。 · 通过状态变化提供即时视觉反馈。

08

组件

button 高对比度的主按钮（黑色背景）和次要/幽灵按钮（白色背景，黑色边框），采用圆角设计。
card 简洁的白色卡片，带有细微阴影或边框。
chip 用于导航或标签的小型圆角标签。
input 简洁的底部边框或完整边框输入框。
hero 温暖背景上的大号粗体文字，并展示应用程序界面的模型。

09

文案语气与禁用清单

语气乐于助人、直接且专业。
标题风格 大胆、大尺度的陈述，强调协作与组织。
按钮文案 行动导向（例如：‘免费开始’、‘联系销售’）。

不要使用冰冷、临床感的蓝色调色板——截图显示温暖的桃米色主背景（#FFF6EC）
不要在标题中使用纤细、轻薄的字体——截图显示粗重、加粗的无衬线字体标题
不要在所有元素上使用尖锐的直角——截图显示频繁使用8px和12px的圆角
不要使用复杂、多彩的渐变——截图显示背景和按钮使用纯色填充
不要为首要操作使用纤细、低对比度的边框——截图显示1.5px实线边框或纯黑色填充
不要在章节间使用狭窄、局促的间距——截图显示主视觉区域有慷慨的垂直留白
避免: 行话
避免: 过于随意的俚语
避免: 激进的销售语言

10

包内真实截图

Coda — 桌面首屏（hero） — 桌面首屏（hero）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Coda — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Coda 是一个面向团队的协作工作空间工具，定位为组织工作的一体化解决方案。其设计以温暖、平易近人的美学为核心，以桃米色背景（#FFF6EC）和高对比度黑色（#212121）作为文本和主按钮颜色。字体方面，展示部分使用粗重的无衬线字体，正文使用干净的无衬线字体（Inter），标题采用紧凑的字间距。布局慷慨地运用留白，聚焦于大号加粗的陈述和清晰、功能性的UI模型。关键禁忌：避免使用冰冷的企业蓝或灰色作为主背景；不要在主视觉陈述中使用纤细或纤弱的字体；避免拥挤或局促的布局，因为网站优先考虑清晰度和呼吸感。整体感觉是精致、高效，并通过其温暖的色彩选择和大胆的字体略带一丝趣味性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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