厳選・オープン・無料

Mollie

モダンなビジネスのための決済インフラストラクチャ

01

デザイン DNA

規模と信頼を前面に出した、ヨーロッパのStripe

02

カラー

戦略的なオレンジアクセントを加えた高コントラストのモノクローム

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display64px · 400
• heading48px · 400
• body16px · 400

ディスプレイタイポグラフィは tightened tracking を使用 · Font weights range from 400 to 500 for hierarchy · Line heights are generous for readability

04

余白

4px単位に基づいた垂直リズム

05

サーフェス (角丸 / 影 / 罫線)

rgba(166,166,166,0.6)を使用した、subtle 1pxのボーダー

0px 4px 8px 0px rgba(0, 0, 0, 0.08) · 0px 16px 32px 0px rgba(0, 0, 0, 0.08) · 0px 0px 1px 0px rgba(0, 0, 0, 0.15)

06

レイアウト

フルワイドのヘッダーとヒーローセクションと、制限されたコンテンツ領域

07

モーションとインタラクション

Subtle hover state transitions · スムーズなページスクロール

インタラクティブ要素上の微細なカラートランジション · ステート変化による即座の視覚フィードバック

08

コンポーネント

• button ハイコントラストのプライマリ（黒背景、白テキスト）とsubtleなセカンダリ（グレー背景）
• card 大きな角丸画像カード、豊かなパディングとsubtleなシャドウ
• chip スクリーンショットでは確認できません
• input シンプルなアンダーライン付きインプット
• hero フルワイドのライフスタイル画像の上に中心配置された大きなタイポグラフィと、オーバーレイUIカード

09

文体と禁止事項

• トーン プロフェッショナルで信頼性が高く、自信に満ちている
• 見出し 規模と信頼性を強調する、大きく力強いステートメント
• CTA 直接的でアクション指向（Get started、Contact sales）

• 明るいネオン色を使用しない — スクリーンショットでは、黒、白、グレーが支配的な落ち着いたパレットが示されています
• 装飾的またはセリフ体のディスプレイフォントを使用しない — スクリーンショットでは、見出しにクリーンなジオメトリックサンセリフが使用されています
• 要素でレイアウトを散らかさない — スクリーンショットでは、豊かな余白とフォーカスされたコンテンツが示されています
• 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは、豊かな行間を持つ大きく読みやすいタイポグラフィが使用されています
• すべての要素に鋭い直角の角を使用しない — スクリーンショットでは、最大24pxの大きなボーダーラジアスが使用されています
• 細く軽いボタンを使用しない — スクリーンショットでは、明確なコントラストを持つ、しっかりとしたプライマリボタンが使用されています
• 避ける: 専門用語の多用
• 避ける: 過度な感嘆符
• 避ける: 無難すぎるカジュアルなトーン

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko