厳選・オープン・無料

Deel

グローバルチームの採用、管理、支払いのための、クリーンで構造化されたSaaSプラットフォーム。

01

デザイン DNA

グローバルチーム管理のためのプロフェッショナルなエンタープライズダッシュボード。

02

カラー

クリーンなホワイトスペースに、高コントラストのダークおよびライトセクションを配置し、鮮やかなプライマリアクセントでgrounding。

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display56px · 560
• heading36px · 500
• body16px · 400
• caption14px · 400

見出しには高級感のあるウェイトを付与するために、トランジショナルセリフフォントを使用。 · 本文には非常に読みやすいヒューマニストサンセリフを使用。 · プライマリテキストカラーは、純粋な黒ではなく、深いチャコール (#1B1B1B)。

04

余白

パディング、ギャップ、マージンに適用される、一貫した4pxベースグリッド。

05

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

ボーダーは最小限に抑え、精�uvwxyzなシャドウとカラーコントラストでサーフェスを定義。

rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px

06

レイアウト

マルチカラムのヒーローセクションから、フルワイドのダークおよびライトコンテンツバンドへと展開。

07

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

インタラクティブ要素における滑らかなフィルとカラートランジション。 · ボタンやリンクに対する精緻なhover変形。

インタラクティブ性を示すために、微妙なカラーシフトや不透明度の変化。 · ボタンの押下状態による即座の視覚的フィードバック。

08

コンポーネント

• button 高コントラスト（ホワイトオンブラック、またはブラックオンホワイト）のピル型ボタン。微妙なborder-radius。
• card 軽いシャドウを有する、細かく角丸のコンテナ。プライマリアクションや画像を配置することが多い。
• chip PEO、EORなどの機能を分類するための、アイコン付きの小さな角丸タグ。
• input 明確なラベルと標準的な丸みを帯びたボーダーを持つ、クリーンなフォームフィールド。
• hero 左に大きなテキストブロック、右にライフスタイル画像を配置する分割レイアウト。

09

文体と禁止事項

• トーン プロフェッショナルで、権威があり、率直。
• 見出し 中核的な価値提案を強調する、大型でインパクトのあるステートメント。
• CTA 「デモを予約」「詳細を見る」のような、アクション指向のラベル。

• 明るいネオンカラーは使用しない — スクリーンショットでは、黒、白、チャコールをgroundingとしたパレットが示されている。
• 過度に装飾的なスクリプトは使用しない — スクリーンショットでは、トランジショナルセリフとヒューマニストサンセリフの構造化されたミックスが示されている。
• 激しい純粋な黒の背景は使用しない — スクリーンショットでは、ダークモードセクションに柔らかなチャコール (#141414) が使用されている。
• 角が鋭く、矩形のボタンは使用しない — スクリーンショットでは、非常に丸みを帯びたピル型ボタンが示されている。
• 密集し、雑然としたグリッドは使用しない — スクリーンショットでは、余裕のあるホワイトスペースと明確なセクション分けが示されている。
• 細く、読みにくいフォントは使用しない — スクリーンショットでは、高コントラストでウェイトの効いたタイポグラフィが示されている。
• 避ける: 過度にカジュアルなスラングは避ける。
• 避ける: 雑然としたレイアウトは避ける。
• 避ける: ネオン色やgroundingのないカラーパレットは避ける。

10

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

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

11

System Prompt

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