厳選・オープン・無料
Rippling
AIを活用し、人事、IT、経理、給与計算をシームレスなシステムに統合するプラットフォーム。
fintechsaas
01
デザイン DNA
統合プラットフォームビジネスオペレーションAI駆動効率性統合
企業の単一神経系。数十の断片化されたツールを置き換える存在。
02
カラー
#FFA81DAccent
#000000Ink
rgba(0,0,0,0.7)Ink soft
#7A005DBG
#E1D8D2BG soft
#FFFFFFBG quiet
#383838Muted
rgba(255,255,255,0.15)Line
深く彩度の高い紫色のヒーローとクリーンなホワイトのコンテンツエリアの間に高いコントラストを実現し、鮮やかなオレンジのアクセントで安定感を与えます。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
48px · 500 - heading
32px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 400
大きなディスプレイ見出しには、きめ細かなトラッキングを使用します。 · 小さなUIテキストには、やや緩めのトラッキング（0.25px）を使用します。 · 見出し（500）と本文（400）の間には、明確なウェイト階層を維持します。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
4pxの刻みに基づく一貫した垂直リズム。主要なコンテンツセクション間には十分な余白（40px-64px）を確保しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
ボーダーは最小限に使用。分離は余白と微細な色の変化で実現します。プライマリボーダーカラーはrgb(229, 231, 235)です。
0px 6px 6px 0px rgba(0, 0, 0, 0.06) · 0px 96px 160px 48px rgba(27, 16, 20, 0.6)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
最大幅のコンテナを中央揃えにし、ヒーローには明確な2カラム構造（コンテンツ左、ビジュアル右）を、コンテンツセクションにはフルワイドの中央揃えカラムを採用。
07
モーションとインタラクション
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素に対する微細なフェードとカラートランジション。 · ホバー時の滑らかなbackground-colorとopacityの変化。
インタラクティブ要素のテキストと背景色に対する、微細なカラートランジション（0.15s）。 · 即座のビジュアルフィードバック。通常は微細なスケールまたはカラーシフト。
08
コンポーネント
- button プライマリアクションには、角丸（ピル型）のカラフルなオレンジ（アクセント）ソリッドボタン。セカンダリアクションには、アンダーライン付きのテキストリンク。
- card ライトなベージュ/グレー（bgSoft）のカード。微細なシャドウと角丸（md）を施しています。
- chip ナビゲーションやカテゴリ分類に使用。軽い背景色と微細なボーダーが特徴です。
- input ホワイト背景の入力フィールド。微細なボーダーと角丸（md）を備え、垂直に積み重ねられることが多いです。
- hero 深い紫色の背景を備えたフルワイドセクション。大きなディスプレイ見出しと、目立つメールアドレスキャプチャフォームが特徴。
09
文体と禁止事項
- トーン 自信に満ち、権威があり、ベネフィットを重視。
- 見出し 短く、太字で、断定的なスタイル。コアバリュー・プロポジションに焦点を当てる。
- CTA 直接的でアクション指向。明るくハイコントラストのボタンを使用。
- 紫色の背景に低コントラストのカラープライマリテキストを使用しない — スクリーンショットではハイコントラストのホワイトとブラックテキストが示されています。
- 幅広い種類のフォントウェイトを使用しない — スクリーンショットではウェイト400と500の間の厳格な階層が示されています。
- ボタンやカードに角张った鋭い角を使用しない — スクリーンショットでは角丸（8px、12px、またはピル型）が示されています。
- 忙しない、多色のパレットを使用しない — スクリーンショットでは深い紫、オレンジ、ブラック、ホワイト、ベージュに焦点を当てたパレットが示されています。
- 密集した、コンパクトなレイアウトを使用しない — スクリーンショットでは要素間にゆとりのある余白（24px-64px）が示されています。
- 装飾的なセリフフォントを使用しない — スクリーンショットではクリーンな幾何学的およびヒューマニストサンセリフ系フォントが示されています。
- 避ける: 文脈のない専門用語
- 避ける: 曖昧な約束
- 避ける: 受動態
- 避ける: 雑然としたレイアウト
- 避ける: 一貫性のないタイポグラフィ
- 避ける: 低コントラストのテキスト
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 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはRipplingというB2B SaaSプラットフォームです。そのデザインDNAは、プレミアム、クリーン、権威があり、複雑なビジネスオペレーションの統合に焦点を当てています。プライマリカラーは、ヒーローセクション用の深い紫（#7A005D）、アクセントおよびCTA用の鮮やかなオレンジ（#FFA81D）、コンテンツエリア用のクリーンなホワイト/ベージュです。タイポグラフィは幾何学的およびヒューマニストサンセリフ系フォントを使用し、明確なウェイト階層（見出し用500、本文用400）を維持します。重要な禁止事項：紫色の背景に低コントラストのテキストを使用しない、幅広い種類のフォントウェイトを使用しない、UI要素に鋭い角を使用しない。レイアウトはゆとりがあり、センタード。12カラムグリッドを使用し、最大幅は1280pxです。
en · zh-CN · zh-TW · ja · ko