厳選・オープン・無料
Deel
グローバルチームの採用、管理、支払いのための、クリーンで構造化されたSaaSプラットフォーム。
fintechsaas
01
デザイン DNA
グローバル人材給与計算コンプライアンスプラットフォーム
グローバルチーム管理のためのプロフェッショナルなエンタープライズダッシュボード。
02
カラー
#FAAF00Accent
#1B1B1BInk
#3B3B3BInk soft
#FFFFFFBG
#F7F5F2BG soft
#141414BG quiet
#888888Muted
rgba(0, 0, 0, 0.16)Line
クリーンなホワイトスペースに、高コントラストのダークおよびライトセクションを配置し、鮮やかなプライマリアクセントでgrounding。
03
タイポグラフィ
transitional-serif · humanist-sans · monospace
- display
56px · 560 - heading
36px · 500 - body
16px · 400 - caption
14px · 400
見出しには高級感のあるウェイトを付与するために、トランジショナルセリフフォントを使用。 · 本文には非常に読みやすいヒューマニストサンセリフを使用。 · プライマリテキストカラーは、純粋な黒ではなく、深いチャコール (#1B1B1B)。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
パディング、ギャップ、マージンに適用される、一貫した4pxベースグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
ボーダーは最小限に抑え、精�uvwxyzなシャドウとカラーコントラストでサーフェスを定義。
rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
マルチカラムのヒーローセクションから、フルワイドのダークおよびライトコンテンツバンドへと展開。
07
モーションとインタラクション
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素における滑らかなフィルとカラートランジション。 · ボタンやリンクに対する精緻なhover変形。
インタラクティブ性を示すために、微妙なカラーシフトや不透明度の変化。 · ボタンの押下状態による即座の視覚的フィードバック。
08
コンポーネント
- button 高コントラスト(ホワイトオンブラック、またはブラックオンホワイト)のピル型ボタン。微妙なborder-radius。
- card 軽いシャドウを有する、細かく角丸のコンテナ。プライマリアクションや画像を配置することが多い。
- chip PEO、EORなどの機能を分類するための、アイコン付きの小さな角丸タグ。
- input 明確なラベルと標準的な丸みを帯びたボーダーを持つ、クリーンなフォームフィールド。
- hero 左に大きなテキストブロック、右にライフスタイル画像を配置する分割レイアウト。
09
文体と禁止事項
- トーン プロフェッショナルで、権威があり、率直。
- 見出し 中核的な価値提案を強調する、大型でインパクトのあるステートメント。
- CTA 「デモを予約」「詳細を見る」のような、アクション指向のラベル。
- 明るいネオンカラーは使用しない — スクリーンショットでは、黒、白、チャコールをgroundingとしたパレットが示されている。
- 過度に装飾的なスクリプトは使用しない — スクリーンショットでは、トランジショナルセリフとヒューマニストサンセリフの構造化されたミックスが示されている。
- 激しい純粋な黒の背景は使用しない — スクリーンショットでは、ダークモードセクションに柔らかなチャコール (#141414) が使用されている。
- 角が鋭く、矩形のボタンは使用しない — スクリーンショットでは、非常に丸みを帯びたピル型ボタンが示されている。
- 密集し、雑然としたグリッドは使用しない — スクリーンショットでは、余裕のあるホワイトスペースと明確なセクション分けが示されている。
- 細く、読みにくいフォントは使用しない — スクリーンショットでは、高コントラストでウェイトの効いたタイポグラフィが示されている。
- 避ける: 過度にカジュアルなスラングは避ける。
- 避ける: 雑然としたレイアウトは避ける。
- 避ける: ネオン色やgroundingのないカラーパレットは避ける。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(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
Deelは、グローバル人材管理のためのプレミアムSaaSプラットフォームです。そのデザインDNAは、ホワイト、チャコール (#1B1B1B, #141414)、そして特徴的なゴールデンアクセント (#FAAF00) によるクリーンで高コントラストのパレットに基づいています。タイポグラフィは、太い見出しにプロフェッショナルなトランジショナルセリフを、本文には非常に読みやすいヒューマニストサンセリフを組み合わせています。レイアウトは余裕があり、1280pxコンテナ、広めのホワイトスペース、4pxベースグリッドを活用しています。インタラクションは洗練されており、ピル型ボタン、精緻なシャドウ、滑らかなcubic-bezierトランジションを特徴としています。重要な禁止事項:ネオンカラーの回避、角が鋭い矩形ボタンの回避、密集し雑然としたレイアウトの回避。
en · zh-CN · zh-TW · ja · ko