厳選・オープン・無料
Pleo
集中型ビジネス支出および経費管理プラットフォーム
fintechsaas
01
デザイン DNA
金融効率ビジネス支出自動化管理
現代の金融オペレーティングシステム
02
カラー
#FFFFFFAccent
#000000Ink
#333333Ink soft
#F5F5F5BG soft
#888888Muted
rgba(0, 0, 0, 0.1)Line
明瞭さと信頼のために高コントラストのモノクロパレット
03
タイポグラフィ
neo-grotesque-sans · monospace
- display
64px · 400 - h2
45px · 400 - body
23px · 400 - caption
16px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
80pxのセクションパディングを備えた十分な垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 4px
lg · 8px
pill · 159984px
インタラクティブ要素に1px solid rgba(0, 0, 0, 0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
セントリングされたシングルコラムのヒーローと、交互配置のコンテンツブロック
07
モーションとインタラクション
130msmicro
230mssmall
400msmedium
cubic-bezier(0.4, 0, 1, 1)easing
hover時の滑らかな色および背景トランジション
控えめな色のトランジションまたは背景のシフト · 最小限の遅延での即時応答
08
コンポーネント
- button 高コントラスト(黒背景/白テキストまたは白背景/黒テキスト)のピル型
- card 角丸付きの控えめな背景ブロック
- hero 簡潔な補足テキストと2つのCTAボタンを持つ、大ボールドヘッドライン
09
文体と禁止事項
- トーン 直接的、賦権的、専門的
- 見出し 命令形で利益を重視
- CTA 明確で実行可能
- 装飾的なグラデーションを使用しない — スクリーンショットはフラットな単色背景を示している
- カードにドロップシャドウを使用しない — スクリーンショットは控えめなボーダー付きのフラットなサーフェスを示している
- 重いフォントウェイトを使用しない — スクリーンショットは一貫した400ウェイトのタイポグラフィを示している
- 鮮やかなアクセントカラーを使用しない — スクリーンショットは厳密なモノクロパレットを示している
- ヒーローで複雑なマルチカラムレイアウトを使用しない — スクリーンショットはセントリングされたシングルコラムのヒーローを示している
- 小ボーダー半径の角丸長方形を使用しない — スクリーンショットはフルピル型ボタンを示している
- 避ける: 専門用語
- 避ける: 複雑な金融用語
- 避ける: アグレッシブな営業言語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはビジネス支出管理に焦点を当てたプレミアムフィンテックSaaSプラットフォーム。デザインは、信頼と効率を伝えるために、厳密なモノクロパレット(黒、白、ライトグレー)を用いた洗練されたミニマルな美学を採用。タイポグラフィはクリーンなネオグロテスクサンセリフで、大型の高コントラストヒーローセクション。主要なHEXカラーは#000000、#FFFFFF、#F5F5F5。重要なデザイン制約:装飾的なグラデーションや重いドロップシャドウの不使用、一貫した400ウェイトフォントの使用、標準的な角丸長方形の代わりにピル型ボタンの実装。複雑なマルチカラムヒーローレイアウトや鮮やかなアクセントカラーは避ける。
en · zh-CN · zh-TW · ja · ko