厳選・オープン・無料

Cargo

プラットフォームの装飾よりもタイポグラフィとクリエイティブワークを優先するミニマルサイトビルダー。

01

デザイン DNA

クリエイター向けのギャラリーグレードのデジタルキャンバス

02

カラー

厳密にモノクロでニュートラル。ハイコントラストの白い背景を使用し、ユーザーのカラフルなクリエイティブワークが唯一の焦点として残るようにします。

03

タイポグラフィ

humanist-sans

• display80px · 400
• heading40px · 400
• body14px · 400

ディスプレイサイズでトラッキングをタイトにし、洗練されたカスタムレタリング感を生み出す · インタラクティブ要素にはのみ中太（500）を使用し、明確なアフォーダンスを提供する

04

余白

リニアな垂直リズムではなく、明示的なグリッド配置による非対称レイアウト。

05

サーフェス (角丸 / 影 / 罫線)

ヒーローには NONE は表示されず、分離にはスペースとタイポグラフィのみに完全に依存。

06

レイアウト

デスクトップでは非対称分割グリッド。左揃えのブランド表示と右揃えのアクション。

07

モーションとインタラクション

ホバー状態での即時トランジション · ページ入場時のスタッガードアニメーション

テキストリンクで背景変化なしにカーソルがポインタに変化。 · 知覚されるレイテンシなしの即時状態変化。

08

コンポーネント

• button 青い塗りつぶしボタン（反転状態）またはアンダーライン付きのテキストのみリンク。
• card ボーダーラディウスがゼロで、イメージブリードを多用したテンプレートプレビューカード。
• chip コンテンツビューを区切るシンプルなタブ型区切り。
• input 基本的なパディング付きの標準ボーダーテキストインプット。
• hero 対角にアンカーされた巨大なタイポグラフィを備えた、フルスクリーンの非対称分割レイアウト。

09

文体と禁止事項

• トーン 洗練され、率直で、少し不遜。
• 見出し パンチのある、ミニマルな二単語のコマンドまたはステートメント。
• CTA 角括弧で囲まれた、またはシンプルなテキストリンクのアクション指向テキスト。

• プライマリコンテナに border-radius を使用しない — スクリーンショットは完全に四角いエッジを示している
• 奥行きのためにドロップシャドウを使用しない — スクリーンショットは完全にフラットな面を示している
• 本文にセリフフォントを使用しない — スクリーンショットは全体を通してヒューマニストサンセリフを示している
• 大きなテキストブロックを中央揃えにしない — スクリーンショットは厳密な左揃えまたは右揃えの配置を示している
• 鮮やかな背景色を使用しない — スクリーンショットは厳密に白またはオフホワイトのキャンバスを示している
• 見出しにワイドな文字間隔を使用しない — スクリーンショットはタイトなネガティブトラッキングを示している
• 避ける: マーケティング用語
• 避ける: 装飾的なグラデーション
• 避ける: セールスコピー的な感嘆符

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

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