Top 12 · Virtual Idol Debut Project

# CYBER ✦ STAR

虚拟偶像出道企划官方网站视觉设计规范。本文档定义品牌识别、色彩、字体、组件、动效、可访问性等全部前端视觉资产，是设计与开发之间的单一来源（Single Source of Truth）。

Version 2.1 2026-05-12 Zero Emoji WCAG 2.1 AA
v2.1 更新（本版）： ① 删除 Hero 内所有按钮（含 Play Debut PV、Debut PV tag）； ② 倒计时加浅紫色边框胶囊； ③ 卡片投票按钮所有排名统一为紫色实心样式； ④ 弹窗去除顶部 2px 紫线； ⑤ 全规范文档与代码 禁用 emoji，所有图标统一 lucide SVG。
01

## Brand Identity · 品牌识别

CYBER STAR 的视觉语言聚焦于「赛博 / 暗黑 / 紫色霓虹 / 太空感」。所有设计决策都应强化这种神秘、未来、高级感的氛围。

### Logo 规范

项 | 规则
--- | ---
主 Logo | 金属铬质 `CYBER STAR` + 星形装饰（PNG 透明背景）
资源路径 | `/public/logo.png`
原始比例 | 约 2.7 : 1
最小展示宽度 | 120 px
顶栏使用高度 | 32 px（对应宽度约 86 px）
简化版 | 仅四角星 SVG + 紫色辉光（favicon、极窄场景）

### 禁忌项

- 不使用扁平色块大面积铺底
- 不使用强烈的彩虹色 / 多色对比
- 不使用阳光、暖色调
- 不使用粗线条 / 卡通风格的图标
- 不使用纯黑 #000 大面积背景
- 不使用任何 emoji（包括心形、播放三角、奖杯等 Unicode 装饰字符）— 唯一例外：CYBER ✦ STAR 字标中的 ✦

02

## Color System · 色彩系统

背景层级越深越亮一点点以营造空间纵深；主调紫色覆盖 8 级亮度阶梯，3-5 档为最常用值。

### 背景层级（暗紫调）

#08051A
Deepest
--color-deepest
页面最底层
#0D0A24
Deep
--color-deep
导航 / Footer
#13102E
Base
--color-base
主要区块
#1A1638
Surface
--color-surface
卡片 / 输入框
#221D4A
Elevated
--color-elevated
浮层 / 弹窗
#1E1840
Card
--color-card
艺人卡片底

### 主调紫 · Royal Violet

#EDE9FE
Purple 100
--color-purple-100
极淡紫
#DDD6FE
Purple 200
--color-purple-200
高亮文字
#C4B5FD
Purple 300
--color-purple-300
文字高亮 ★
#A78BFA
Purple 400
--color-purple-400
边框 / 图标
#8B5CF6
Purple 500
--color-purple-500
主品牌色 ★
#7C3AED
Purple 600
--color-purple-600
按钮 Hover
#6D28D9
Purple 700
--color-purple-700
按钮 Active
#5B21B6
Purple 800
--color-purple-800
渐变深端

### 文字颜色（按透明度）

主标题 · Heading Sample Text
#FFFFFF · 100%
正文阅读 · Body Sample Text
rgba(255,255,255,0.85)
次要说明 · Caption Sample
rgba(255,255,255,0.65)
弱化元数据 · Meta Sample
rgba(255,255,255,0.45)
几近隐藏 · Disabled Sample
rgba(255,255,255,0.25)
紫色强调 · 12.6W 票
var(--color-purple-300)
错误提示 · Error Sample
var(--color-pink-500)

### 边框 · 渐变

Subtle--border-subtle
Default--border-default
Purple--border-purple
Purple Soft倒计时胶囊用
Hero--grad-hero
Purple--grad-purple
Card--grad-card
03

## Typography · 字体系统

4 套字体各司其职。中文严格使用 Inter Fallback 链中的中文字体，不尝试用 Display 字体显示中文。

Font Logo · 标题专用
CYBER STAR
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Orbitron · Weight 500 / 700 / 900 · var(--font-logo)
Font Display · 按钮 / 副标题
VOTE NOW
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Audiowide · Weight 400 · var(--font-display)
Font Label · 英文小写大写标签
CANDIDATES
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Cinzel · Weight 400 / 600 · var(--font-label)
Font Body · 中英文正文
虚拟偶像 Top12 出道企划 Aa 123
中文 + Inter 西文。所有中文一律用此族，不强制 uppercase。
Inter · Weight 400-700 · var(--font-body)

### 字号阶梯

用途 | 桌面 | 移动 | Tracking
--- | --- | --- | ---
Hero 主标题 H1 | clamp(64, 7vw, 96)px | 48px | 0.35em
区块标题 H2 | 18px | 16px | 0.2em
卡片标题 | 14px | 13px | normal
正文 | 14px | 13px | normal
标签 / Eyebrow (uppercase) | 11px | 10px | 0.3-0.4em
票数 / 排名（数字） | 用 `tabular-nums` | normal

04

## Spacing & Layout · 间距与布局

基础栅格 4px，容器最大宽度 1280px。

### 间距阶梯

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-16
64px

### 艺人卡片网格

断点 | 列数 | Gap
--- | --- | ---
< 640px | 2 | 12px
≥ 640px | 3 | 16px
≥ 768px | 4 | 16px
≥ 1024px | 5 | 16px

05

## Radius · Shadow · Glow

### 圆角

0直角，不用
8px输入框 / 按钮
12px卡片 / 容器
16px大卡片
20px弹窗 / Hero
9999胶囊 / 徽章

### 阴影 & 辉光

Cardshadow-card
Purple Glowshadow-purple
Soft Glowshadow-glow

### 文字辉光

CYBER STAR
.glow-text-purple
06

## Motion · 动效规范

动效短促克制，强调反馈即时性。Hover < 200ms，模态进入 ~280ms。

名称 | 时长 | Easing | 用法
--- | --- | --- | ---
Hover 微抬升 | 200ms | ease-out | 卡片 translateY(-2px)
按钮过渡 | 180ms | ease-out | 颜色 / 阴影变化
弹窗进入 | 280ms | cubic-bezier(0.22, 1, 0.36, 1) | scale 0.94→1 + fade
弹窗退出 | 200ms | ease-in | scale 1→0.96 + fade
pulse-glow | 2.4s infinite | ease-in-out | VOTE 按钮 / 当前排名
float | 3s infinite | ease-in-out | 滚动提示
spin-slow | 20s infinite | linear | Hero 装饰光环

### 动效演示

VOTE
pulse-glow
float
spin-slow
07.1

## Navigation · 导航栏

高度 64px，紫色透明黑背景 + 毛玻璃，sticky 顶部。

属性 | 值
--- | ---
高度 | 64px
背景 | rgba(13,10,36,0.85) + backdrop-blur(xl)
底边 | 1px solid rgba(255,255,255,0.08)
位置 | sticky top-0, z-50
Logo 高度 | 32px
搜索图标 | lucide `Search` SVG · 16px
导航项字体 | font-display, 12px, tracking-[0.25em], uppercase
激活态 | --color-purple-300 + 文字辉光 + 底部 1px 紫线

倒计时 不放在导航栏，保留在 Hero 内（设计师明确要求）。
07.2

## Hero Section · Hero 区

全屏视频背景（自动播放、循环、默认静音）。Hero 内不放置任何按钮，仅倒计时（右上）与声音切换（右下）。

TOP 12 · VIRTUAL IDOL DEBUT PROJECT
距离投票结束 12天 03:24:16
CYBER ✦ STAR
虚拟偶像出道企划

属性 | 值
--- | ---
高度 | 70vh（min 480px / max 720px）
圆角 | 20px
背景 | 全屏视频 object-cover + 半透明黑色蒙层
视频行为 | autoPlay loop muted playsInline
禁止在 Hero 内放置按钮 | 删除 Play Debut PV、删除 Debut PV 自动播放 tag
倒计时位置 | 右上角，距边 24px
倒计时容器 | padding 8×16 + 1px solid rgba(196,181,253,0.4) 浅紫边框 + rounded-full + rgba(13,10,36,0.55) + backdrop-blur
倒计时文字 | 12-13px 白字 + 紫色高亮数字 + tabular-nums
声音按钮 | 右下角，36×36 圆形毛玻璃，lucide `VolumeX`/`Volume2`
视频缺失降级 | --grad-hero 渐变

07.3

## Top 12 出道位

圆形头像横排，独立紫色序号圆 + 中文名 + 票数，统一紫色样式，不分 1-3 / 4-12。

实时 Top12 出道位
查看完整榜单
A
1
艺人 A
12.6W 票
B
2
艺人 B
11.8W 票
C
3
艺人 C
10.5W 票
D
4
艺人 D
9.2W 票
E
5
艺人 E
8.7W 票
F
6
艺人 F
7.9W 票
禁止添加 VOTE NOW 侧栏面板。当前实现中的 `VotePanel` 须删除。
07.4

## Filter Bar · 筛选 + 搜索栏

搜索艺人

元素 | 图标
--- | ---
排序触发 | lucide `ArrowUpDown`
搜索框前缀 | lucide `Search`
网格视图 | lucide `LayoutGrid`
列表视图 | lucide `List`

07.5

## Artist Card · 艺人卡片

所有 35 张卡片的投票按钮完全相同。Top12 与候选区只在「立绘明度 + 边框 + 排名徽章」3 处差异化。

### Top 12 出道位卡片

1
Portrait Placeholder
No.001
艺人 A
樱花校园系
12.5W 票
2
Portrait Placeholder
No.002
艺人 B
古风国风系
11.8W 票

### 13+ 候选区卡片（仅立绘弱化 + 边框 + 徽章变化）

13
Portrait Placeholder
No.013
艺人 M
活力少女
4.8W 票
14
Portrait Placeholder
No.014
艺人 N
冷艳风
4.3W 票

### 差异化对比表

元素 | Top 1-12 | 13+ 候选区
--- | --- | ---
立绘 opacity | 1（鲜艳） | 0.78（轻度暗化）
卡片边框 | --border-purple 紫边 | 14% 白边框
卡片辉光 | --shadow-purple 紫色辉光 | 无辉光
排名徽章 | 紫色实心圆 + 紫色辉光 | --elevated 底 + 55% 白字
投票按钮 | 完全相同：紫色实心 + 白字「投票」
票数颜色 | --color-purple-300 | 55% 白色
组件结构 | 100% 一致，仅 className 差异

07.6

## Footer

07.7

## Buttons · 按钮

### Variants

### Sizes

### 带图标按钮（lucide SVG）

尺寸 | 高度 | Padding-X | 字号 | 用途
--- | --- | --- | --- | ---
sm | 32px | 14px | 10px / 0.15em | 次要按钮、Tag 操作
md | 44px | 24px | 12px / 0.25em | 默认尺寸 ★
lg | 56px | 40px | 14px / 0.25em | Hero CTA、主操作

07.8

## Modal · 弹窗

已去除顶部 2px 紫色横条，保持容器干净。关闭按钮使用 lucide `X` SVG。

A
为 艺人 A 投票
NO.001 · CURRENT RANK #1
1
3
5
ALL

属性 | 值
--- | ---
遮罩 | rgba(0,0,0,0.75) + backdrop-blur(md)
容器 | --elevated 95% + --border-default + rounded-2xl
阴影 | 0 24px 80px black/0.7, 0 0 40px purple/0.12
顶部光条 | 已删除（不要 2px 紫色横条）
关闭按钮 | 右上角 18px lucide `X` · 55% 白色
居中 | position:fixed, inset:0, flex center, z-100

08

## Icons · 图标系统

铁律：禁止使用任何 emoji（奖杯、心形、放大镜、喇叭、播放三角、箭头等所有彩色 / Unicode 装饰字符）。所有图标统一使用 `lucide-react` SVG，stroke 宽度 1.5-2，无 fill 例外（如 Heart 用 fill="currentColor"）。
唯一例外：品牌字标 `CYBER ✦ STAR` 中间的 `✦`（U+2726 BLACK FOUR POINTED STAR）保留原字符，配紫色辉光。

### 项目使用的 lucide 图标清单

Heart
票数前缀
Trophy
Top12 标题
Search
搜索图标
VolumeX
静音状态
Volume2
有声状态
ChevronRight
查看更多
ArrowRight
主跳转
LayoutGrid
网格视图
List
列表视图
ArrowUpDown
排序
X
弹窗关闭
Star (四角星)
favicon / 极窄场景
（CYBER ✦ STAR 字标用 ✦ 字符）
Sparkles
装饰点缀
Loader2
加载中
Play
详情页视频
Pause
详情页视频

### 标准尺寸

用途 | 尺寸
--- | ---
内联小图标（票数、标签） | 12-14px
按钮内图标 | 14-16px
独立操作图标 | 16-20px
大尺寸标题图标 | 24-32px

09

## Responsive · 响应式断点

断点 | 设备 | 卡片列数 | 布局变化
--- | --- | --- | ---
< 640px | 手机 | 2 | 横滚 Top12，隐藏 nav 文字
≥ 640px | 大手机 / 平板竖 | 3 | —
≥ 768px | 平板横 | 4 | 显示 nav 文字
≥ 1024px | 桌面 | 5 | 完整布局
≥ 1280px | 大桌面 | 5 | 容器 max-w-7xl 居中

10

## UI/UX 通用规范（必须遵守）

10 条网页设计行业铁律，所有页面都必须满足。

#### 10.1 可访问性（WCAG 2.1 AA）

- 所有交互元素必须有 `aria-label` 或可见文字
- 颜色对比度：正文 ≥ 4.5:1，大字 ≥ 3:1
- 不依赖颜色单独传达信息（必须配合图标 / 文字）
- 视频自动播放必须 muted，并提供解除静音控件
- 弹窗：Escape 关闭、聚焦陷阱、`aria-modal="true"`

#### 10.2 焦点指示（Keyboard Nav）

- 所有可聚焦元素必须有可见 `:focus-visible` 轮廓
- 标准：2px 紫色实线 + 2px 偏移，色值 `--color-purple-400`
- 禁止 `outline: none` 而不提供替代焦点样式

#### 10.3 触控目标

- 移动端最小触控目标 44 × 44 px
- 相邻可点击元素至少留 8px 间距

#### 10.4 三态必备

状态 | 视觉
--- | ---
加载中（Loading） | 骨架屏 + lucide `Loader2`，不用 spinner 占整页
空状态（Empty） | 居中插画 / 图标 + 说明 + 可选 CTA
错误（Error） | 居中错误图标（pink-500）+ 描述 + 重试按钮

#### 10.5 表单设计

- Label 始终在输入框上方（不用浮动 label）
- 错误提示：输入框下方红字 + 边框转 pink-500
- Placeholder 不能代替 Label
- 必填字段标 *（紫色）

#### 10.6 语义

- `<button>` 用于触发动作，`<a href>` 用于跳转
- 禁止：用按钮做跳转 / 用链接做提交

#### 10.7-10 信息密度 · 性能 · 暗色模式 · 禁用 emoji

- 同区块 ≤ 3 个字号层级，section 间距 ≥ 40 / 64 px
- 段落最大宽度 ≤ 75 字符
- LCP < 2.5s，CLS < 0.1，图片必须 aspect-ratio 占位
- 暗色模式专属：禁纯黑 #000、禁大面积纯白、阴影改辉光
- 禁止任何 emoji，所有图标统一 lucide SVG（强制铁律）

11

## Content · 文案约定

场景 | 文案
--- | ---
投票按钮 | 「投票」（不用 "Vote"）
顶部 nav | 「首页」「排行榜」
排名榜标题 | `<Trophy size={14}/>` + 「实时 Top12 出道位」
倒计时前缀 | 「距离投票结束」
投票成功 | 「已为 {名字} 投出 {N} 票」
票数耗尽 | 「今日票数已用完，明天再来吧」
卡片票数 | `<Heart size={12} fill="currentColor"/>` + 「12.6W 票」（W 大写）
版权 | 「© {当年} CYBER STAR · All Rights Reserved」

12

## Token 映射 · 设计 ↔ 代码

交付时设计师直接引用 Tailwind 工具类名，开发零成本接入。

Figma 颜色名 | CSS 变量 | Tailwind 工具类
--- | --- | ---
Background / Deepest | `var(--color-deepest)` | `bg-deepest`
Background / Card | `var(--color-card)` | `bg-card`
Brand / Purple 500 | `var(--color-purple-500)` | `bg-purple-500` / `text-purple-500`
Brand / Purple 300 | `var(--color-purple-300)` | `text-purple-300`
Border / Subtle | `var(--border-subtle)` | `border-white/[0.08]`
Border / Purple Soft | `rgba(196,181,253,0.4)` | `border-purple-300/40`
Shadow / Purple Glow | `var(--shadow-purple)` | `shadow-purple-glow`
Gradient / Purple | `var(--grad-purple)` | `bg-grad-purple`
Font / Logo | `var(--font-logo)` = Orbitron | `font-logo`
Font / Display | `var(--font-display)` = Audiowide | `font-display`
Font / Body | `var(--font-body)` = Inter | `font-body`