赛博动漫风

赛博动漫风 — 风格参考

驾驶舱 HUD 加动漫光效：斜切角、八角网格、三层霓虹。

Theme: dark

赛博动漫把机甲驾驶舱的 HUD 与动漫的光效语言合在一起：主容器四角带斜切角标（clip-path 或用两条边线拼出），背景用六边形网格而不是方形网格，霓虹是多层叠加而非单层发光，微交互像座舱按钮——hover 快速上浮、按下压实、光晕在 180 到 280ms 内 amplify。它的禁令很硬：不许柔和粉彩与自然有机色、不许衬线、不许全圆角（一切形状必须带角）、不许浅色主背景、不许弹跳弹簧动画。

Colors

Typography

Chakra Petch — 几何无衬线，带科技切角感。全大写并放宽字距 0.16em，像 HUD 标签。

• Substitute: 'Segoe UI', 'Arial Narrow', sans-serif
• Weights: 400, 600, 700
• Sizes: 11, 13, 15, 20, 28, 40
• Line height: 1.15 (display), 1.25 (headings), 1.6 (body)
• Letter spacing: 0.04em on display, 0.16em on uppercase labels

JetBrains Mono — 数值、坐标与状态码。座舱里的读数必须是等宽的。

• Substitute: ui-monospace, 'Courier New', monospace
• Weights: 400, 700
• Sizes: 11, 12, 14
• Line height: 1.4 (display), 1.4 (headings), 1.55 (body)
• Letter spacing: 0.04em on display, 0.16em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 4px Density: compact

Spacing Scale

Border Radius

• Page max-width: 1320px
• Section gap: 48px
• Card padding: 24px
• Element gap: 12px

Components

Bracket Panel

Role: 斜切角面板（核心组件）

紫 8% 填充、零圆角、1px 机体紫 40% 描边、内边距 24px。四角各用两条伪元素画 L 形支架（2px 机体紫、长 16px），并用 clip-path 切掉右上与左下各 12px 形成斜切。外发光三层：紫 12px、青 24px 35%、粉 48px 20%。hover 时发光 amplify 到 18/36/72px，整体上浮 2px，过渡 220ms。

• States: hover: glow amplified, lift 2px

HUD Button

Role: 主行动按钮

机体紫填充、白字、零圆角、1px 浅蓝 30% 描边，用 clip-path 切掉左上与右下各 10px。11px 等宽全大写 0.16em、padding 12px 28px，三层发光。hover 时填充提亮到 #8b4ff5、发光 amplify；按下时位移 1px 并让发光收到 8/16/28px。过渡 180ms。

• States: hover: brighter, amplified glow; active: translate 1px

Hex Field

Role: 六边形背景网格

用两层 repeating-linear-gradient 各转 60 度叠出六边形网格，线宽 1px、机体紫 8%，单元尺寸 32px。全页固定覆盖，pointer-events: none。它必须比方形网格更弱，否则会压过内容。

Holo Projection

Role: 全息投影面板

青色 8% 填充、1px 青 30% 描边、零圆角、16px 模糊，叠一层 4px 间隔的青色扫描线（8%），边缘用 clip-path 做出轻微梯形（上窄下宽 4%）。用于展示角色或机体数据，允许轻微上下浮动 2px（4s 循环）。

Status Readout

Role: 状态读数条

高 28px、零圆角、1px 机体紫 25% 描边，左段等宽显示标签（11px 全大写）、中段显示分段条（10 格、间隔 2px）、右段显示数值。正常青、警告粉、离线灰。分段条必须以离散格填充，不用连续渐变。

Do's and Don'ts

Do

• 四角 L 形支架加斜切角
• 六边形网格而非方形
• 霓虹三层叠加
• 微交互 180 到 280ms
• 深底加半透明面板
• 几何无衬线或等宽

Don't

• 不要用柔和粉彩与自然色
• 不要用衬线字体
• 不要用全圆角
• 不要用浅色主背景
• 不要用弹跳弹簧动画
• 不要混用两种切角尺寸

Surfaces

Elevation

• Triple glow: 0 0 12px #7c3aed, 0 0 24px rgba(6,214,160,0.35), 0 0 48px rgba(255,0,110,0.20)
• Amplified: 0 0 18px #7c3aed, 0 0 36px rgba(6,214,160,0.45), 0 0 72px rgba(255,0,110,0.30)

Imagery

动漫角色与机体的霓虹剪影、全息投影、数据可视化与 HUD 叠层。允许把角色立绘处理成双色调加发光边缘。不使用柔和粉彩、自然风景与写实人像。

Layout

上限 1320px、容器内边距 16px，面板间距 12px，形成密集座舱。允许面板以 1px 线拼接。所有切角固定 10px 或 12px，混用即为错误。

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #e8e6f5
• background: #0f0f1a
• violet: #7c3aed
• teal: #06d6a0
• pink: #ff006e
• blue: #38bdf8

EXAMPLE COMPONENT PROMPTS:

1. 做一个赛博动漫风面板：背景 rgba(124,58,237,0.08)、零圆角、1px rgba(124,58,237,0.4) 描边、内边距 24px、clip-path 切掉右上与左下各 12px、box-shadow 0 0 12px #7c3aed, 0 0 24px rgba(6,214,160,0.35), 0 0 48px rgba(255,0,110,0.2)。四角各用 2px 机体紫画 16px 的 L 形支架。全页叠一层 32px 单元的六边形网格（1px 线、rgba(124,58,237,0.08)）。hover 时发光 amplify 到 18/36/72px 并 translateY(-2px)，transition 220ms。页面底色 #0f0f1a。

Similar Brands

• Cyberpunk Neon — 同为赛博霓虹，但那边是街头招牌，这里是座舱 HUD 与斜切角
• Mecha — 同为机甲语言，但机甲更军规克制，赛博动漫加动漫光效与紫调

Quick Start

:root {
  /* Colors */
  --color-deep-violet-black: #0f0f1a;
  --color-frame-violet: #7c3aed;
  --color-neon-teal: #06d6a0;
  --color-neon-pink: #ff006e;
  --color-electric-blue: #38bdf8;
  --color-pale-blue: #51b1ff;

  /* Typography — Font Families */
  --font-display: 'Chakra Petch', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 40px;
  --leading-display: 1.15;
  --tracking-display: 0.04em;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: 0.04em;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: 0.04em;
  --text-body-lg: 15px;
  --leading-body-lg: 1.55;
  --text-body: 13px;
  --leading-body: 1.6;
  --text-label: 11px;
  --leading-label: 1.4;
  --tracking-label: 0.16em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1320px;
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 12px;
  --density: compact;

  /* Border Radius */
  --radius-cards: 0;
  --radius-buttons: 0;
  --radius-inputs: 0;
  --radius-dots: 999px;

  /* Surfaces */
  --surface-deep-violet-black: #0f0f1a;
  --surface-panel: rgba(124,58,237,0.08);
  --surface-hex-grid: hexagonal pattern;
}