厳選・オープン・無料
Brex
カード、バンキング、AIを活用した経費管理を組み合わせた、エンタープライズグレードの金融ソフトウェア。
fintechsaas
01
デザイン DNA
企業金融モダンバンキング速度制御AI自動化
モダン企業向けの高性能ファイナンシャルオペレーティングシステム。
02
カラー
#FF5900Accent
#15191EInk
#FFFFFFBG
#F3F3F7BG soft
#8B8D98Muted
rgba(21, 25, 30, 0.1)Line
コンバージョンアクションを誘発するための、単一でアグレッシブなアクセントを持つ、高コントラストの基盤。
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
48px · 400 - heading
36px · 400 - body
16px · 400
プレミアム感を出すための、ディスプレイテキストに対するきつい負の文字間隔 · 全サイズで最大限の可読性を保つための、一貫したウェイト400 · スキャンニング性を高めるための、本文に対するゆとりある行間
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
清潔なアラインメントを維持するための、ゆとりあるホワイトスペースパディング（72px水平コンテナ）を持つ、一貫した4pxグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
構造要素のための、暗いニュートラル（#15191E）の最小限の1pxソリッドボーダー。
0px 1px 0px 0px rgba(66, 87, 138, 0.15) · 0px 1px 1px 0px rgba(0, 0, 0, 0.04)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
テキスト/イラストのフィーチャーロウを交互に配置する、単一カラムのヒーロー。
07
モーションとインタラクション
125msmicro
200mssmall
500msmedium
cubic-bezier(0, 0, 0.38, 0.9)easing
状態変化のための微細なリニアトランジション · 複雑なビジュアルシフトのための標準的なease-in-out
インタラクティブ要素の微細な不透明度や色の変化。 · 最小限のアニメーション遅延による、即座の状態変化。
08
コンポーネント
- button プライマリアクションにはソリッドアクセントフィル、セカンダリナビゲーションにはゴーストまたはテキストスタイル。
- card フィーチャーハイライト用の、角丸（12px）を持つソフトグレー（#F3F3F7）背景。
- chip 統合パートナー向けの標準化されたタグスタイル。
- input 角丸と統合されたプライマリCTAを持つ、清潔なボーダーフィールド。
- hero ニュートラルなベース上に、高精細な3Dプロダクトレンダーを組み合わせた、大きなディスプレイタイポグラフィ。
09
文体と禁止事項
- トーン 権威があり、効率的で、非常に専門的。
- 見出し 速度と規模を強調する、直接的で利益を主張するステートメント。
- CTA アクション指向で簡潔（例：「始めを見る」「デモを見る」）。
- 暖色系や遊び心のあるカラーパレットを使用しない — スクリーンショットは厳格な黒/白/オレンジの配色を示しています。
- UIカードに過度なドロップシャドウや3D効果を適用しない — スクリーンショットはフラットで清潔な表面を示しています。
- ディスプレイテキストに装飾的またはセリフフォントを使用しない — スクリーンショットは清潔で、きついサンセリフを使用しています。
- 複数の競合するアクセントカラーでレイアウトを雑踏させない — スクリーンショットはオレンジを唯一のハイライトとして使用しています。
- 重要な情報に低コントラストのテキストを使用しない — スクリーンショットはダークインクで高い可読性を維持しています。
- ヘッダーにゆったりとした、隙間のある文字間隔を作成しない — スクリーンショットはインパクトのためにきついトラッキング（-0.96px）を使用しています。
- 避ける: 遊び心のある、または無難すぎるカジュアルな言葉遣い
- 避ける: 不必要な専門用語や複雑な金融用語
- 避ける: 受動的な表現や弱い動詞
- 避ける: 具体的な価値提案のない曖昧な約束
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
これはBrex向けのプレミアムフィンテックSaaSデザインです。清潔な白（#FFFFFF）背景、深いニュートラルインク（#15191E）、コンバージョンポイントのための単一のアグレッシブなオレンジアクセント（#FF5900）が特徴です。タイポグラフィは、ディスプレイヘッドライン（サイズ48、ウェイト400、ls -0.96px）には清潔できついgrotesque-sans、本文コピーには高い可読性を持つhumanist-sansに依存しています。レイアウトは、24pxのガターと72pxの水平パディングを持つ厳格な12カラムグリッドに従い、ゆとりあるホワイトスペースと高精細な3Dプロダクトレンダーを強調しています。重要なデザイン制約には、遊び心のあるトーンの回避、単一アクセントカラー戦略の維持、すべてのディスプレイテキストにきつい文字間隔を使用して速さと精度を伝えることが含まれます。
en · zh-CN · zh-TW · ja · ko