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 主标题 H1clamp(64, 7vw, 96)px48px0.35em
区块标题 H218px16px0.2em
卡片标题14px13pxnormal
正文14px13pxnormal
标签 / Eyebrow (uppercase)11px10px0.3-0.4em
票数 / 排名（数字）用 tabular-numsnormal
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
< 640px212px
≥ 640px316px
≥ 768px416px
≥ 1024px516px
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 微抬升200msease-out卡片 translateY(-2px)
按钮过渡180msease-out颜色 / 阴影变化
弹窗进入280mscubic-bezier(0.22, 1, 0.36, 1)scale 0.94→1 + fade
弹窗退出200msease-inscale 1→0.96 + fade
pulse-glow2.4s infiniteease-in-outVOTE 按钮 / 当前排名
float3s infiniteease-in-out滚动提示
spin-slow20s infinitelinearHero 装饰光环

动效演示

VOTE
pulse-glow
float
spin-slow
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-1213+ 候选区
立绘 opacity1（鲜艳）0.78（轻度暗化）
卡片边框--border-purple 紫边14% 白边框
卡片辉光--shadow-purple 紫色辉光无辉光
排名徽章紫色实心圆 + 紫色辉光--elevated 底 + 55% 白字
投票按钮完全相同：紫色实心 + 白字「投票」
票数颜色--color-purple-30055% 白色
组件结构100% 一致，仅 className 差异
07.7

Buttons · 按钮

Variants

Sizes

带图标按钮（lucide SVG）

尺寸高度Padding-X字号用途
sm32px14px10px / 0.15em次要按钮、Tag 操作
md44px24px12px / 0.25em默认尺寸 ★
lg56px40px14px / 0.25emHero CTA、主操作
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 / Deepestvar(--color-deepest)bg-deepest
Background / Cardvar(--color-card)bg-card
Brand / Purple 500var(--color-purple-500)bg-purple-500 / text-purple-500
Brand / Purple 300var(--color-purple-300)text-purple-300
Border / Subtlevar(--border-subtle)border-white/[0.08]
Border / Purple Softrgba(196,181,253,0.4)border-purple-300/40
Shadow / Purple Glowvar(--shadow-purple)shadow-purple-glow
Gradient / Purplevar(--grad-purple)bg-grad-purple
Font / Logovar(--font-logo) = Orbitronfont-logo
Font / Displayvar(--font-display) = Audiowidefont-display
Font / Bodyvar(--font-body) = Interfont-body