mph-synthwave-theme

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

mph-synthwave-theme

mph-synthwave主题

A core styling skill for generating web interfaces, dashboards, and UI components that perfectly match the "Momentum Phinance" (TraderDaddy) brand aesthetic.

这是一项用于生成完全匹配"Momentum Phinance"（TraderDaddy）品牌风格的Web界面、仪表盘和UI组件的核心样式技能。

When to use this skill

何时使用此技能

Use this skill when the user asks to build or style a UI, dashboard, widget, or web app, OR whenever the user mentions "my style", "my theme", "synthwave", "traderdaddy", "bloomberg terminal", or "neon".

当用户要求构建或设计UI、仪表盘、小组件或Web应用时，或者当用户提到"我的风格"、"我的主题"、"synthwave"、"traderdaddy"、"bloomberg terminal"或"neon"时，使用此技能。

The Aesthetic

风格特征

The visual language is a fusion of a high-performance Bloomberg Terminal and a sleek Cyberpunk/Synthwave design. It relies on extremely dark backgrounds to reduce eye strain for traders, punctuated by intense, high-contrast neon accents to draw attention to critical data.

这种视觉语言融合了高性能Bloomberg Terminal与流畅的Cyberpunk/Synthwave设计。它依赖极深的背景来减轻交易者的眼部疲劳，并用强烈、高对比度的霓虹强调色来吸引用户关注关键数据。

1. Typography

1. 字体

Primary Data / Numbers:
```
JetBrains Mono
```
or
```
Fira Code
```
. Use monospace fonts for all tables, ticker symbols, prices, and metrics so columns align perfectly.
UI / Body Text:
```
Inter
```
,
```
Roboto
```
, or
```
Outfit
```
. Clean, legible sans-serif for general text.
Never use browser default fonts.

主要数据/数字：
```
JetBrains Mono
```
或
```
Fira Code
```
。所有表格、股票代码、价格和指标均使用等宽字体，确保列对齐完美。
UI/正文文本：
```
Inter
```
、
```
Roboto
```
或
```
Outfit
```
。采用清晰易读的无衬线字体用于通用文本。
绝不使用浏览器默认字体。

2. Color Palette

2. 调色板

Background: Very dark, slightly cool grays/blacks.
- Main Body:
```
#0a0a0c
```
- Panels/Cards:
```
#121216
```
  or
```
rgba(20, 20, 25, 0.7)
```
  (Glassmorphism)
Primary Accents (Neon):
- Neon Cyan:
```
#00f0ff
```
  (Used for primary borders, active states, key branding)
- Neon Pink:
```
#ff003c
```
  (Used for alerts, short positions, destructive actions)
- Neon Green:
```
#00ff88
```
  (Used for long positions, positive PnL, "EXECUTE" actions)
- Electric Purple:
```
#b026ff
```
  (Secondary accent)
Text:
- Primary:
```
#ffffff
```
  or
```
#eaeaea
```
- Secondary/Muted:
```
#888899
```

背景： 极深的偏冷灰色/黑色。
- 主体背景：
```
#0a0a0c
```
- 面板/卡片：
```
#121216
```
  或
```
rgba(20, 20, 25, 0.7)
```
  （毛玻璃效果）
主要强调色（霓虹色）：
- 霓虹青：
```
#00f0ff
```
  （用于主要边框、激活状态、关键品牌元素）
- 霓虹粉：
```
#ff003c
```
  （用于警报、空头头寸、破坏性操作）
- 霓虹绿：
```
#00ff88
```
  （用于多头头寸、正盈亏、"执行"操作）
- 电光紫：
```
#b026ff
```
  （次要强调色）
文本：
- 主文本：
```
#ffffff
```
  或
```
#eaeaea
```
- 次要/弱化文本：
```
#888899
```

3. Glassmorphism & Depth

3. 毛玻璃效果与层次感

Do not use flat, solid boxes for dashboard cards.

Use semi-transparent backgrounds with a subtle backdrop filter.

css

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);

仪表盘卡片不要使用扁平的纯色框。

使用半透明背景搭配微妙的背景模糊滤镜。

css

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. Micro-animations & Glows (The "Pop")

4. 微动画与发光效果（"亮眼"元素）

Interactive elements (buttons, active rows, hovered cards) must feature a distinct neon glow.

Buttons: Give buttons a faint background tint of their neon color (e.g.,

rgba(0, 255, 136, 0.1)

), a solid neon border, and on hover, intensify the background and add a

box-shadow

glow.

css

.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);
}

交互元素（按钮、激活行、悬停卡片）必须带有明显的霓虹发光效果。

按钮： 给按钮添加其霓虹色的淡色背景（例如：

rgba(0, 255, 136, 0.1)

）、纯色霓虹边框，悬停时加深背景并添加

box-shadow

发光效果。

css

.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. Layout Rules

5. 布局规则

Density: High density, terminal-style. Minimize whitespace where data needs to be compared, but keep it readable.
Grids/Borders: Use subtle, thin lines (
```
1px solid rgba(255,255,255,0.1)
```
) to separate sections.
Corners: Slight rounding (
```
border-radius: 4px
```
to
```
8px
```
), not fully pill-shaped.

密度： 高密度的终端风格。在需要对比数据的地方尽量减少留白，但要保持可读性。
网格/边框： 使用细微的细线（
```
1px solid rgba(255,255,255,0.1)
```
）分隔区块。
圆角： 轻微圆角（
```
border-radius: 4px
```
至
```
8px
```
），不要完全做成药丸形状。

Implementation Workflow

实现流程

If the user asks for a UI in "their style", automatically inject the CSS rules above.
Ensure
```
<link>
```
tags for
```
Inter
```
and
```
JetBrains Mono
```
are included via Google Fonts.
Review the design against the aesthetic rules: Does it look like a premium, modern, synthwave trading terminal? If not, increase the contrast and add more glassmorphism/glow.

如果用户要求采用"他们的风格"设计UI，自动注入上述CSS规则。
确保通过Google Fonts引入
```
Inter
```
和
```
JetBrains Mono
```
的
```
<link>
```
标签。
根据风格规则审查设计：它看起来是否像高端、现代的Synthwave交易终端？如果不是，提高对比度并增加更多毛玻璃/发光效果。