01
设计气质 DNA
狂欢派对在线交互式游戏多人游戏
数字虚空中霓虹灯照耀的舞池
02
色彩
#e0e0e0Ink#a0a0a0Ink soft#0a0a0aBG#666666Mutedrgba(255, 255, 255, 0.15)Line在深邃的黑色背景上使用高对比度的霓虹强调色,营造沉浸式的低光俱乐部氛围
03
字体
- display
72px · 400 - subtitle
28px · 400 - label
11px · 500
04
间距
4px8px12px16px24px32px48px64px96px慷慨的垂直间距,为交互元素之间创造呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.2)
0 0 20px rgba(100, 50, 255, 0.3) · 0 0 40px rgba(255, 50, 100, 0.2) · inset 0 1px 0 rgba(255, 255, 255, 0.1)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中的垂直堆叠布局,键盘控制键分布于两侧
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的霓虹发光脉冲 · 带有渐变扫动的进度条动画
微妙的亮度提升或发光增强 · 通过缩放或亮度变化提供视觉反馈
08
组件
- button 带有微妙边框和圆角的键盘键帽样式,下方带有文字标签
- card 带有微妙边框的深色面板,用于包含键盘快捷键
- input 圆角输入字段,带有左对齐的图标和占位符文本
- hero 带有发光效果的大型霓虹渐变标题和装饰性副标题
09
文案语气与禁用清单
- 语气 趣味且沉浸
- 标题风格 大型、装饰性的霓虹渐变文本,带有发光效果
- 按钮文案 带有图标前缀的简单文本输入
- 不要使用明亮的背景——截图显示通篇使用深黑色(#0a0a0a)
- 不要为标题使用普通的无衬线字体——截图显示使用装饰性的哥特体展示字体
- 不要回避霓虹色——截图采用了青色-品红渐变和发光效果
- 不要让输入框占满全宽——截图显示为受限的、居中的输入字段
- 不要隐藏键盘控制键——截图在两侧显著显示了按键映射
- 不要使用平面、静态的元素——截图通过霓虹发光效果暗示了运动感
- 不要使用复杂的排版层次——截图保持了简单、清晰的文本结构
- 避免: 企业化语言
- 避免: 正式语气
- 避免: 复杂的说明
- 避免: 明亮的背景
- 避免: 用于展示文本的无衬线字体
11
System Prompt
这是一个以键盘驱动交互为核心的黑暗、沉浸式在线狂欢派对游戏界面。调色板以深黑色(#0a0a0a)为主,辅以霓虹青色和品红色强调,营造出迷幻的发光效果。排版方面,主标题使用装饰性哥特体,UI元素使用简洁的无衬线体。布局居中,键盘控制键分列两侧,创造出类似游戏的界面。关键设计约束:切勿使用明亮的背景,始终保持黑暗的俱乐部氛围,使用霓虹渐变进行强调,并使键盘控制键清晰可见且突出。该网站融合了游戏UI模式与狂欢派对文化美学。