mph-synthwave-theme

mph-synthwave-theme

「Momentum Phinance」(TraderDaddy) ブランドの美学に完全に一致する、Web インターフェース、ダッシュボード、UI コンポーネントを生成するためのコアスタイリングスキルです。

このスキルを使う場面

ユーザーが UI、ダッシュボード、ウィジェット、Web アプリの構築またはスタイリングを依頼したとき、あるいはユーザーが「my style」「my theme」「synthwave」「traderdaddy」「bloomberg terminal」「neon」に言及したときは、このスキルを使用してください。

美学

ビジュアル言語は、高性能な Bloomberg Terminal と、洗練された サイバーパンク/シンセウェイブ デザインの融合です。トレーダーの目の疲れを軽減するために極めて暗い背景を基調とし、重要なデータに注意を引きつけるために、強烈でコントラストの高いネオンアクセントを効果的に配置します。

1. タイポグラフィ

• 主要データ / 数値: JetBrains Mono または Fira Code。すべてのテーブル、ティッカーシンボル、価格、指標には等幅フォントを使用し、列が完全に揃うようにします。
• UI / 本文テキスト: Inter、Roboto、または Outfit。一般的なテキストには、クリーンで読みやすいサンセリフ体を使用します。
• ブラウザのデフォルトフォントは決して使用しないでください。

2. カラーパレット

• 背景: 非常に暗く、やや寒色寄りのグレー/ブラック。
  • メインボディ: #0a0a0c
  • パネル/カード: #121216 または rgba(20, 20, 25, 0.7)(グラスモーフィズム)
• プライマリアクセント(ネオン):
  • ネオンシアン: #00f0ff(プライマリのボーダー、アクティブ状態、主要なブランディングに使用)
  • ネオンピンク: #ff003c(アラート、ショートポジション、破壊的なアクションに使用)
  • ネオングリーン: #00ff88(ロングポジション、プラスの PnL、「EXECUTE」アクションに使用)
  • エレクトリックパープル: #b026ff(セカンダリアクセント)
• テキスト:
  • プライマリ: #ffffff または #eaeaea
  • セカンダリ/ミュート: #888899

3. グラスモーフィズム & 奥行き

• ダッシュボードカードにフラットで単色のボックスを使用しないでください。
• 半透明の背景と、繊細なバックドロップフィルターを使用してください。

  background: rgba(20, 20, 25, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  

4. マイクロアニメーション & グロー(「ポップ」)

• インタラクティブな要素(ボタン、アクティブな行、ホバーされたカード)には、はっきりと分かるネオングローを必ず付けます。
• ボタン: ボタンには、そのネオンカラーの淡い背景ティント(例: rgba(0, 255, 136, 0.1))、単色のネオンボーダーを付け、ホバー時に背景を強め、box-shadow グローを追加します。

  .btn-execute {
      background: rgba(0, 255, 136, 0.1);
      border: 1px solid #00ff88;
      color: #00ff88;
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
      transition: all 0.2s ease;
  }
  .btn-execute:hover {
      background: rgba(0, 255, 136, 0.2);
      box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  }
  

5. レイアウトのルール

• 密度: 高密度でターミナルスタイル。データを比較する必要がある箇所では余白を最小限に抑えますが、読みやすさは保ちます。
• グリッド/ボーダー: セクションを区切るために、繊細で細い線(1px solid rgba(255,255,255,0.1))を使用します。
• 角: 軽度の丸み(border-radius: 4px から 8px)、完全なピル形状にはしません。

実装ワークフロー

1. ユーザーが「自分のスタイル」で UI を依頼した場合は、上記の CSS ルールを自動的に注入します。
2. Inter と JetBrains Mono の <link> タグが Google Fonts 経由で含まれていることを確認します。
3. デザインを美学のルールに照らしてレビューします。プレミアムでモダンなシンセウェイブのトレーディングターミナルのように見えますか? そうでない場合は、コントラストを高め、グラスモーフィズム/グローをさらに追加してください。