厳選・オープン・無料
Craft
構造性と表現力豊かな創造性を融合させた、プレミアムで落ち着いた生産性ワークスペース。
productdocs
01
デザイン DNA
エレガント思慮深い生産的構造化された穏やかな
現代の思考者向けの、洗練されたデジタルノート。
02
カラー
#030302Ink
#4A4A4AInk soft
#FFFFFFBG
#F5F5F5BG soft
#EBEBEBBG quiet
#E1E1E1Muted
rgba(3,3,2,0.09)Line
読みやすさを重視した、クリーンな背景にハイコントラストのインクカラー。イラストには柔らかなパステルカラーがアクセントとして使用されます。
03
タイポグラフィ
transitional-serif · geometric-sans
ディスプレイ见出しには、エレガントさと思慮深さを伝えるため、セリフ体を使用します。 · 本文、ナビゲーション、UI要素には、明瞭さのためにサンセリフを使用します。 · ディスプレイフォントには、タイトな字間（トラッキング）を維持します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
落ち着いた、息の通ったリーディング体験を生み出すための、たっぷりとした余白。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 14px
lg · 24px
pill · 999px
1px solid rgba(3,3,2,0.09)
0px 20px 40px 0px rgba(0, 0, 0, 0.05) · 0px 3px 10px 0px rgba(0, 0, 0, 0.08)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
強力なタイポグラフィ階層と広々としたセクションを持つ、クリーンで中央揃えの縦型レイアウト。
07
モーションとインタラクション
150msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
ホバー状態における、滑らかな色と不透明度のトランジション。
背景色の微細なシフトや不透明度の変化。 · 即座の、明瞭な応答。
08
コンポーネント
- button ハイコントラストな背景を持つピル型ボタン（プライマリCTAは黒、セカンダリは白）。
- card 関連するコンテンツやタスクをグループ化し、やわらかい角丸と微細なドロップシャドウを持つカード。
- chip 軽いパステルの背景を持つ、ステータスやタグのためのミニマルなピル。
- input サーフェスに馴染む、クリーンでボーダーレスまたは微細なボーダーを持つ入力フィールド。
- hero 表現力豊かでテクスチャのあるコラージュイラストの上に、大きなタイポグラフィステートメントをレイヤリング。
09
文体と禁止事項
- トーン 心を惹きつけ、思慮深く、力を与えるような。
- 見出し エレガントなセリフ体タイポグラフィを使用した、明確でメリット指向のステートメント。
- CTA 即座の価値に焦点を当てた、直接的で鼓励するような表現（例：「無料でCraftを試す」）。
- アクセントカラーを一つだけ使わない — スクリーンショットではイラストに多様なパステルカラーが使われています。
- 重いドロップシャドウを使用しない — スクリーンショットでは深度を出すために微細で柔らかいシャドウが使われています。
- 本文テキストに全角大文字を使用しない — スクリーンショットではカテゴリラベルにのみ大文字が使用されています。
- ダークモードインターフェースを使用しない — スクリーンショットでは主に明るく、明るい背景が使用されています。
- シャープで角張った角を使用しない — スクリーンショットでは非常に丸みのある角（最大24pxまたはピル型）が使用されています。
- igidでグリッド重視のレイアウトを使用しない — スクリーンショットではイラストにおいて、より有機的で流れるような配置が使用されています。
- 避ける: 専門用語が多い、または技術的な言葉の使用。
- 避ける: 攻撃的または騒がしいプロモーショントーン。
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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインは、構造化された組織性と表現力豊かな創造性を融合させた、プレミアムで落ち着いた生産性ツールを表しています。インクブラック（#030302）を基調とし、クリーンなホワイト（#FFFFFF）サーフェスに対してハイコントラストなパレットを使用しています。タイポグラフィは、ディスプレイ见出しにエレガントなトランジショナル・セリフフォント、本文テキストとUIにはクリーンなジオメトリック・サンセリフを組み合わせています。主要なヘックスカラーには、#030302、#FFFFFF、および微細なボーダーカラーのrgba(3,3,2,0.09)が含まれます。重要な禁止事項には以下が含まれます：攻撃的なドロップシャドウを使用しない、シャープな角を使用しない、単一のハイクロマアクセントカラーに依存しない。レイアウトはたっぷりとした余白と中央揃えの縦の流れを重視し、息の通った、集中できるユーザーエクスペリエンスを生み出しています。
en · zh-CN · zh-TW · ja · ko