厳選・オープン・無料
Knock
複雑な製品メッセージングのための明確性と情報階層を優先する、清潔で機能的、そして開発者中心のデザインシステム。
devsaas
01
デザイン DNA
開発者ファーストメッセージングインフラAIネイティブコンポーザブル運用
複雑なコミュニケーションシステムを構築するための精密な儀器。明確性と制御が何より重要。
02
カラー
#E8673CAccent
#000000Ink
#222222Ink soft
#F9F9FBBG
#60646CMuted
rgba(200, 206, 213, 1)Line
抑制されたパレットは、可読性のために深みのあるニュートラルを、プライマリアクションの合図として単一の鮮やかなウォームアクセントを使用します。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
56px · 500 - headline
40px · 500 - subtitle
24px · 400 - body
16px · 400 - label
14px · 500
見出しには幾何学サンセリフを使用し、正確さと近代性を伝える。 · 本文テキストにはヒューマニストサンセリフを使用し、最適な可読性を実現する。 · コードスニペットや技術データにはモノスペースを使用する。 · サイズとウェイトを使用し、色ではなく厳密なタイポグラフィ階層を維持する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクションを区切り、注意を集中させるための余裕のあるホワイトスペースを持つ、一貫した4pxベースグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid #C8CED5
rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
余裕のあるパディングと明確なコンテンツ階層を持つ、構造化されたカラムベースレイアウト。
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
フィードバックのためのインタラクティブ要素上の滑らかな遷移。 · コンテンツ出現のための微細なフェードインアニメーション。 · ホバー状態のための変形。
インタラクティブ要素上の色または背景の変化。標準のcubic-bezier遷移。 · 微細な変形や色の変化を通じた、即座のビジュアルフィードバック。
08
コンポーネント
- button 4pxの角丸を持つ、ソリッドなプライマリ（コーラル）およびアウトラインのセカンダリボタン。清潔で機能的、かつ高コントラスト。
- card 関連情報をグループ化するために使用される、微細な1pxボーダーと角丸を持つ白いカード。
- chip 「新着」などのステータスインジケーターに使用される、角丸のピル-shapedバッジ。
- input 装飾より機能に焦点を当てた、微細なボーダーを持つクリーンなテキスト入力。
- hero 大きな見出し、明確なサブテキスト、2つの目立つアクションボタンを持つ、中央揃えの広々としたヒーローセクション。
09
文体と禁止事項
- トーン 権威があり、明確で、技術的に熟達している。開発者に直接語りかける。
- 見出し 直接的で宣言的、かつ利益を志向。能動態の動詞を使用。
- CTA アクション志向で具体的。「Get started」や「Read our docs」のような明確な命令を使用。
- 明るく競合するアクセントカラーを使用しない — スクリーンショットでは、ニュートラルパレットに対して単一のプライマリコーラルアクセントが示されている。
- 装飾的なセリフフォントを使用しない — タイポグラフィは厳密に幾何学サンセリフおよびヒューマニストサンセリフ。
- 重いドロップシャドウを使用しない — シャドウは最小限で機能的、微細な浮き上がりに使用。
- カードに12px以上の大きな角丸を使用しない — デザインはタイトで正確な半径を使用。
- レイアウトを雑然とさせない — スクリーンショットには十分なホワイトスペースと明確なビジュアル階層が示されている。
- プライマリインターフェースにダーク背景を使用しない — デザインは主にライトで、高コントラストのテキスト。
- 避ける: マーケティングのフリップ
- 避ける: 説明のない業界用語
- 避ける: 過度にカジュアルなトーン
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Knockは顧客エンゲージメントのための開発者中心のSaaSプラットフォームで、清潔で正確、かつ強力なツールとしてポジショニングされています。デザインDNAは、抑制の効いたライトニュートラルパレット（#F9F9FB背景、#000000インク）と、プライマリアクションのための単一の高彩度コーラルアクセント（#E8673C）が特徴です。タイポグラフィは、見出しに幾何学サンセリフ、本文にヒューマニストサンセリフを混在させ、すべて優れた可読性でレンダリングされます。重要な注意点：装飾的なセリフは決して使用せず、競合するアクセントカラーを避け、余裕のあるホワイトスペースを活かしたレイアウトを雑然とさせないこと。デザインは、技術的な聴衆向けに、明確性、階層、機能的な優雅さを優先します。
en · zh-CN · zh-TW · ja · ko