厳選・オープン・無料
Ramp
財務自動化および法人支出管理のためのプレミアムSaaSプラットフォーム。
fintechsaas
01
デザイン DNA
プロフェッショナル効率的自動化エンタープライズグレード
スピードと効率性を追求して設計された、エンタープライズグレードの財務オペレーティングシステム。
02
カラー
#DFFF00Accent
#000000Ink
#333333Ink soft
#FFFFFFBG
#F4F2F0BG soft
#F5F5F5BG quiet
#808080Muted
rgba(0, 0, 0, 0.1)Line
単一のエレクトリック・イエローのアクセントで焦点を引き出す、ハイコントラストの中立的配色。
03
タイポグラフィ
geometric-sans · monospace
- display
56px · 400 - heading
42px · 400 - subheading
36px · 400 - body
18px · 400 - caption
12px · 400
すべてのテキストは、クリーンで中立的なジオメトリック・サンセリフで設定されます。 · 大きなディスプレイテキストには、 tightening された文字間隔を使用します。 · クリーンな美学を維持するため、ほとんどの要素には一貫して400フォントウェイトを採用します。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
厳格な4pxグリッドによる十分なホワイトスペースを確保し、明確な視覚的分離を実現します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
鋭い線を避けつつ境界を定義するため、rgba(0, 0, 0, 0.1)を使用した微妙な1pxボーダー。
rgba(0, 0, 0, 0) 0px 0px 0px 0px · rgba(0, 0, 0, 0) 0px 0px 0px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
最大幅1280px、コンテンツを中央揃えにした、構造化された12カラムグリッド。
07
モーションとインタラクション
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hoverおよびfocus時の、滑らかなカラーおよび背景トランジション。 · インタラクティブ要素に対する、微妙なtransformおよびbox-shadowの変化。
インタラクティブ性を示すための、カラー変化および微妙な背景シフト。 · 背景カラーの変化による即座の視覚的フィードバック。
08
コンポーネント
- button 特徴的なエレクトリック・イエローの背景と黒色テキストを持つ、ハイコントラストのプライマリボタン。
- card クリーンな白色のサーフェスに、微妙なボーダーやソフトシャドウを配置。複雑なUIプレビューを含むことが多い。
- chip データポイントやステータスインジケーターに使用される、小さく丸みのあるピル型タグまたはバッジ。
- input 主にボトムボーダーや微妙な背景塗りつぶしで定義される、ミニマリストなインプットフィールド。
- hero 顕著なヘッドライン、サブヘッドライン、焦点を絞ったメールインプットフィールドを特徴とする、大きなタイポグラフィ中心のセクション。
09
文体と禁止事項
- トーン 効率性と財務成果に焦点を当てた、プロフェッショナルで直接的、かつ権威のあるトーン。
- 見出し 主要な価値提案を強調する、太字で直接的な声明または質問。
- CTA アクション导向で明確。即時の次のステップや利益を強調することが多い。
- 特徴的なエレクトリック・イエロー以外のプライマリカラーを使用しないでください — スクリーンショットでは、唯一の高彩度アクセントとして表示されています。
- テキストにセリフフォントを使用しないでください — スクリーンショットでは、厳密にサンセリフのタイポグラフィシステムが示されています。
- UI要素に重いドロップシャドウや複雑なグラデーションを使用しないでください — スクリーンショットでは、最小限の奥行きを持つフラットなサーフェスが示されています。
- 過度に装飾的なアイコンや絵文字を使用しないでください — スクリーンショットでは、クリーンでアイコンが最小限のインターフェースが示されています。
- ダークバックグラウンドをプライマリコンテナとして使用しないでください — スクリーンショットでは、主にホワイトと明るいグレーのパレットが示されています。
- プライマリテキストコンテンツに複数カラムレイアウトを使用しないでください — スクリーンショットでは、焦点を絞った単一カラムの読書幅が示されています。
- 避ける: 過度にカジュアルな言葉遣いや、点多すぎる感嘆符は避けてください。
- 避ける: コアメッセージを損なうような、ごちゃごちゃしたまたは過度に複雑なビジュアルレイアウトは避けてください。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
Rampは、法人支出管理と自動化のために設計されたプレミアムフィンテックSaaSプラットフォームです。ビジュアルシステムは、ホワイト(#FFFFFF)と明るいグレー(#F4F2F0)を基調としたクリーンでハイコントラストの中立的パレットの上に構築されています。深い黒のテキスト(#000000)で安定感を出し、ボタンや主要なハイライトには特徴的なエレクトリック・イエロー(#DFFF00)がプライマリアクションカラーとして採用されています。タイポグラフィはジオメトリック・サンセリフのみを使用し、明瞭さとモダンさを重視しています。重要なデザイン制約には、セリフフォントの絶対不使用、複雑なグラデーションや重いシャドウの回避、十分なホワイトスペースの維持が含まれます。全体的な美学はプロフェッショナルで効率的、かつエンタープライズグレードであり、データの明瞭さとタスク完了に焦点を当てています。
en · zh-CN · zh-TW · ja · ko