CURATED · OPEN · FREE

Coda

All-in-one collaborative workspace for organized teams.

productivitysaas

Coda screenshot

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://coda.io

📦 Browse pack contents →

01

Identity DNA

collaborativeall-in-oneworkspaceorganizedteams

A unified command center for team projects.

02

Color

#F8AD40Accent

#212121Ink

#666666Ink soft

#FFF6ECBG

#FFFFFFBG soft

#DBEEFABG quiet

#8E8E8EMuted

rgba(33, 33, 33, 0.15)Line

Warm, approachable foundation with high-contrast, functional dark accents.

03

Typography

grotesque-sans · humanist-sans · monospace

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

Heavy weight for primary statements · Negative letter-spacing for tighter headline tracking · Inter for all body and UI text

04

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

A consistent 4px base grid with variable padding for interactive elements.

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgb(33, 33, 33) or 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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard top navigation followed by a massive, centered hero section.

07

Motion & Interaction

150msmicro

200mssmall

250msmedium

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

Subtle background-color transitions on hover · Opacity changes for interactive states

Background-color or color shifts with 0.15s transitions. · Immediate visual feedback via state change.

08

Components

button High contrast primary button (black bg) and ghost/secondary button (white bg, black border) with rounded corners.
card Clean white cards with subtle shadows or borders.
chip Small rounded labels for navigation or tags.
input Simple border-bottom or full-border input fields.
hero Large bold text on a warm background with a mockup of the application interface.

09

Voice & Don'ts

Tone Helpful, direct, and professional.
Headlines Bold, large-scale statements that emphasize collaboration and organization.
CTAs Action-oriented (e.g., 'Get started for free', 'Contact sales').

don't use a cold, clinical blue palette — screenshot shows a warm, peachy-beige hero background (#FFF6EC)
don't use delicate, thin-weight typography for headlines — screenshot shows heavy, bold grotesque-sans headings
don't use sharp, square corners on all elements — screenshot shows frequent use of 8px and 12px radii
don't use complex, multi-colored gradients — screenshot shows flat, solid color fills for backgrounds and buttons
don't use thin, low-contrast borders for primary actions — screenshot shows 1.5px solid borders or solid black fills
don't use small, cramped spacing between sections — screenshot shows generous vertical whitespace in the hero area
Avoid: Jargon
Avoid: Overly casual slang
Avoid: Aggressive sales language

10

Inside the pack — real screenshots

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 — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

Coda is a collaborative workspace tool for teams, positioned as an 'all-in-one' solution to organize work. The design features a warm, approachable aesthetic anchored by a peachy-beige background (#FFF6EC) and high-contrast black (#212121) for text and primary buttons. Typography uses a heavy grotesque-sans for display and a clean humanist-sans (Inter) for body copy, with tight letter-spacing on headlines. Layout is generous with whitespace, focusing on large bold statements and clear, functional UI mockups. Critical donts: avoid cold corporate blues or grays as the primary background; don't use thin or delicate typography for hero statements; and avoid cluttered or cramped layouts, as the site prioritizes clarity and breathing room. The overall feel is refined, productive, and slightly playful through its warm color choices and bold type.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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