厳選・オープン・無料

Mercury

シネマティックな写真と洗練されたヒューマニスト タイポグラフィを組み合わせたプレミアム フィンテック インターフェース。

fintechrefinedsaas
Mercury のスクリーンショット
↓ デザインシステムをダウンロード (31 MB)OpenDesign で開く

オリジナル: https://mercury.com

📦 パックの中身を見る →

01

デザイン DNA

フィンテック銀行スタートアップ信頼モダニティ

信頼性と現代的な革新性を投影する、エディトリアル写真とクリーンな SaaS UI を融合したプレミアム フィンテック スタートアップ。

02

カラー

#5266EBAccent
#EDEDF3Ink
#C3C3CCInk soft
#171721BG
#1E1E2ABG soft
#9CB4E8BG quiet
rgba(237,237,243,0.1)Line

深みのある、静かな暗い背景に、ハイコントラストの明るいテキストと単一の鮮やかなブルー アクセントを配置する。

03

タイポグラフィ

transitional-serif · humanist-sans

目立つディスプレイ ヘッドラインにはトランジショナル セリフを適用し、プレミアムなエディトリアル トーンを確立する。 · 本文とナビゲーションにはヒューマニスト サンセリフを適用し、高い可読性とフレンドリーな雰囲気を確保する。 · 洗練された美学を損なう可能性のある、装飾的または過度にスタイル化されたフォントは避ける。

04

余白

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px

標準 4px ベースグリッドに、特定の水平および垂直パディング増分を設定。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(237,237,243,0.1)

0px 0px 6px 0px rgba(86, 86, 118, 0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルブリードの写真ヒーローに続く、制限のあるグリッドセクション。

07

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

220msmicro
300mssmall
500msmedium
cubic-bezier(0, 0, 0.2, 1)easing

ホバー状態における、スムーズな background-color と text-color のトランジション。 · インタラクティブ要素に対する、微妙な transform トランジション。

300ms にわたる color と background-color のトランジション。 · 300ms にわたる transform scale トランジション。

08

コンポーネント

09

文体と禁止事項

10

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

Mercury — 桌面首屏（hero）
桌面首屏（hero）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mercury — 移动首屏
移动首屏

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

11

System Prompt

深みのある静かな暗い背景と単一の鮮やかなブルー アクセントが特徴のプレミアム フィンテック SaaS デザインシステム。ディスプレイ ヘッドラインにはトランジショナル セリフ、本文にはヒューマニスト サンセリフを採用し、エディトリアルでありながらモダンな感覚を生み出している。レイアウトはクリーンで広々としており、十分なホワイトスペースと中央揃えを活用している。主要カラーは、ダーク ネイビー背景（#171721）、ライト オフホワイト テキスト（#EDEDF3）、プライマリ アクション用のシグネチャー ブルー（#5266EB）。重要な制約：洗練された無駄のない美学を維持する。複数のアクセントカラーを避ける。適切なタイプ コントラストとスペーシングにより高い可読性を確保する。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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