큐레이션 · 오픈 · 무료

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

주요 문구에는 무거운 굵기 사용 · 헤드라인 간격을 좁히기 위한 음수 자간 · 본문 및 모든 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

컴포넌트

09

보이스와 금지 목록

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 목업에 초점을 맞춥니다. 중요 금지 사항: 기본 배경으로 차가운 기업용 블루나 그레이를 사용하지 말 것; 히어로 문구에 얇거나 섬세한 서체를 사용하지 말 것; 밀집하거나 빡빡한 레이아웃을 피할 것. 이 사이트는 명확성과 여유 공간을 우선시합니다. 전반적인 느낌은 따뜻한 색상 선택과 굵은 서체를 통해 세련되고 생산적이며 약간 장난스러운 느낌을 줍니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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