厳選・オープン・無料

Campsite

騒がしいチャットを整理された投稿に置き換える、集中型チームコミュニケーションツール。

01

デザイン DNA

チームの投稿のための、静かで整理された図書館のような空間。

02

カラー

ハイコントラストミニマリズム：鮮明な白いサーフェスを濃いインクのテキストで固定し、主要なアクションには鮮やかなオレンジレッドのアクセントカラーを使用。

03

タイポグラフィ

humanist-sans · monospace

• display56px · 500
• h232px · 600
• body16px · 400
• small14px · 400

大きなディスプレイテキストにはマイナスの文字間隔 · 本文にはレギュラーウェイト · セクション見出しにはセミボールド

04

余白

一貫した4pxベースグリッド

05

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

1px solid rgba(0, 0, 0, 0.1)

0px 3px 6px -3px rgba(0, 0, 0, 0.05) · 0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 1px 0px -1px rgba(0, 0, 0, 0.05)

06

レイアウト

中央揃えのコンテンツと豊かな余白を持つ、標準的なマーケティングサイトレイアウト。

07

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

ホバー時の滑らかなカラートランジション · インタラクション時の繊細なボックスシャドウの変化

繊細なカラーや背景のシフト。 · 即座のビジュアルフィードバック。

08

コンポーネント

• button 角丸のピル形状、アウトラインまたは塗りつぶしのプライマリカラー。
• card 繊細なボーダーと柔らかなシャドウを持つ、清潔な白いコンテナ。
• chip 繊細な背景を持つ小さな角丸ラベル。
• input 薄いボーダーを持つ標準的なテキストフィールド。
• hero サポートするサブテキストと製品スクリーンショットを伴う、大きく中央揃えのヘッドライン。

09

文体と禁止事項

• トーン プロフェッショナルでありながら親しみやすい。
• 見出し 簡潔で、直接的、かつベネフィット重視。
• CTA 角丸ボタン内のシンプルでアクション指向のテキスト。

• ダークモードや暗い背景を使わない — スクリーンショットは明るい白のサーフェス（#ffffff）を示しています。
• 角が鋭く、角が丸まっていない要素を使わない — スクリーンショットはピル形状（9999px）と角丸カード（8px～12px）を示しています。
• 騒がしく複雑なグラデーションを使わない — スクリーンショットは明るい白の平らな背景に、単一のオレンジアクセントを示しています。
• 過度に装飾的またはスクリプト系のフォントを使わない — スクリーンショットは清潔で機能的なサンセリフを示しています。
• 要素を詰め込まない — スクリーンショットは豊かな余白（ベース4pxグリッド）を示しています。
• 硬いドロップシャドウを使わない — スクリーンショットは非常に繊細で、低不透明度のボックスシャドウを示しています。
• 避ける: 専門用語が多い言葉遣い
• 避ける: 過度に騒がしく、または攻撃的なマーケティングコピー
• 避ける: ビジュアルの雑然とした印象

10

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

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

11

System Prompt

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