厳選・オープン・無料

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時の微細なbackground-colorトランジション · インタラクティブ状態における不透明度の変化

background-colorまたはcolorのシフトに、0.15sのトランジション。 · 状態変化による即座の視覚フィードバック。

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 エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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