精選 · 開放 · 免費

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 基礎網格，互動元件使用可變的內距。

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）
不要使用細薄字重的字體做為標題 — 示意圖顯示使用粗重的 grotesque-sans 標題字
不要在所有元件上使用尖銳的直角 — 示意圖顯示頻繁使用 8px 與 12px 的圓角
不要使用複雜、多彩的漸層 — 示意圖顯示背景與按鈕使用平面、純色的填充
不要為主要操作使用纖細、低對比度的邊框 — 示意圖顯示使用 1px 實線邊框或實心黑色填充
不要在區塊之間使用狹小的間距 — 示意圖顯示主視覺區域有充裕的垂直留白
避免: 術語
避免: 過於隨意的俚語
避免: 侵略性的銷售用語

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）作為文字與主要按鈕的顏色。字體方面，標題使用粗重的 grotesque-sans，內文則使用簡潔的 humanist-sans（Inter），標題字母間距緊湊。佈局留白充裕，著重於大膽粗體的聲明與清晰、功能性的 UI 示意圖。關鍵的避免事項：避免使用冰冷的企業藍或灰色作為主要背景；不要在主標題上使用纖細或精緻的字體；並避免擁擠或狹窄的佈局，因為此網站優先考慮清晰度與呼吸空間。整體感覺精緻、高效，並透過溫暖的色彩選擇與大膽字體，帶有一絲趣味性。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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