Mercury

難易度:
有名企業
Mercury プレビュー

プレビュー

デザイントークン

公式ブランド資料とこのスタイルのプロンプトから導出した主要トークン。コピーするか、下の DESIGN.md と合わせて利用できます。

カラー

  • primaryブランドカラー

    主要アクションとハイライト

  • on-primary推定

    プライマリ上のテキスト

  • secondary推定

    タグ、バッジ、副次的な強調

  • on-secondary推定

    セカンダリ上のテキスト

  • neutralプロンプト

    ページ背景

  • on-neutral推定

    背景上のテキスト

  • surface推定

    カード、パネル、オーバーレイ

  • on-surface推定

    サーフェス上のテキスト

  • border推定

    ボーダーと区切り線

角丸と形状

プロンプト
sm · 4px
md · 8px
lg · 12px
full

インタラクティブ要素にはピル型の完全な角丸を使用します。

スペーシング

推定
  • sm8px
  • md12px
  • lg24px

シャドウとエレベーション

プロンプト

階層は柔らかく低コントラストのシャドウで表現します。

タイポグラフィ

推定
  • Ag

    見出し 32px · ボールド

    Inter

  • Ag

    本文 16px · レギュラー

    Inter

  • Ag

    ラベル 13px · ミディアム

    Inter

Mercury はインターフェースを昼と夜の二つの世界に分けます。ホームページは #171721 のインクバイオレットの夜に沈み、製品ページと料金ページは #fbfcfd のほぼ白いキャンバスへ反転しますが、ナビゲーションとフッターはどのページでも夜の色のままです。彩度の高いインディゴ（#5266eb）だけがアクションピルを満たし、ほかの操作は半透明のカプセルです。arcadia と arcadiaDisplay は 360／420／480 の軽い可変ウェイトで階層をつくり、12px のカードは影ではなく塗りで分かれます。

Mercuryフィンテックと暗号資産

プロンプトテンプレート

基本テンプレート
Design a Mercury-inspired interface. - Two native worlds: an ink-violet night homepage (#171721) and near-white product pages (#fbfcfd), framed by the same dark nav and footer; - A single saturated indigo (#5266eb) action pill with 32px corners, while every secondary action is a translucent 40px capsule; - arcadia and arcadiaDisplay at light variable weights (360 body, 420 UI, 480 headlines) with a hair of positive tracking on card titles; - Lavender (#edecfb) feature cards and #1e1e2a raised cards, separated by fill rather than borders; - Tonal elevation only -- 12px cards and faint layered shadows under the pricing table; - Uppercase eyebrows in #554e7b set the section rhythm. Colors: #171721, #5266eb, #fbfcfd, #edecfb, #ededf3 with #5266eb accent. Typography: arcadiaDisplay and arcadia, 360-480.

バリエーションプロンプト

📱 モバイル
Design a mobile banking app with Mercury aesthetics. Deep ink-violet surfaces, one #5266eb pill action, light arcadia weights and 12px cards. Calm, touch-friendly, private-bank feel.
💻 Web
Design a web application with Mercury style. Night nav and footer framing near-white pages, #5266eb accent, translucent secondary pills and lavender feature cards. Precise, spacious, responsive.
📊 ダッシュボード
Design a dashboard with Mercury design language. Ink-violet shell, #5266eb active indicators, tonal 12px cards and light arcadia labels. Data-dense but quiet.
📄 ランディングページ
Design a landing page with Mercury visual identity. Dark hero, #5266eb conversion pill, arcadiaDisplay headlines at 480 weight. Confident, nocturnal, conversion-focused.

使用例

Mercury 口座開設ページ

Web
Build a business banking web app with Mercury design language, #5266eb action pills and an ink-violet shell.

Mercury 資金ダッシュボード

ダッシュボード
Create a treasury dashboard using Mercury style with #5266eb indicators, tonal cards and light arcadia labels.

✅ 適した用途

  • デジタルバンキングと資産管理プロダクト
  • 創業者向け法人口座のランディングページ
  • 夜の雰囲気をまとう金融ブランドサイト

❌ 適さない用途

  • 高彩度のセールキャンペーンページ
  • ゲーム化した家計簿アプリ

DESIGN.md ファイル

design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。

ダウンロード