01
设计气质 DNA
社交社区游戏语音聊天俏皮
游戏玩家的虚拟聚集地
02
色彩
#5865f2Accent#ffffffInkrgba(255,255,255,0.7)Ink soft#1a2081BG#353d40Mutedrgba(255,255,255,0.1)Line深靛蓝背景，搭配亮白色文字和标志性的蓝紫色强调色，用于主要操作。
03
字体
- display
61px · 800 - h2
48px · 800 - h3
36px · 700 - body
16px · 400
标题使用紧凑的几何无衬线字体，字重 800 · 正文使用高度易读的人文主义无衬线字体，字重 400
04
间距
4px8px16px24px32px48px64px96px8px 基础网格，主要模块间采用宽松的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
主容器上无可见边框；元素依赖于背景对比度和微妙阴影。
0 0 128px rgba(88,101,242,0.4)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的两栏式首屏，左侧为文字，右侧为复杂的 3D 插图。
07
动效与交互
250msmicro
250mssmall
400msmedium
cubic-bezier(0.8, 0, 0.2, 1)easing
背景元素微妙浮动 · 滚动时淡入
导航链接在 hover 时微妙地降低不透明度或改变颜色 · 主按钮在点击时轻微缩小
08
组件
- button 大号圆角药丸形状，采用纯色背景（白色或蓝紫色），文字居中
- card 大号容器，带有柔和的圆角（12px-16px）和微妙的渐变背景
- hero 全宽深靛蓝区域，配有超大粗体标题、次要的白色文字以及醒目的双 CTA 按钮
09
文案语气与禁用清单
- 语气 俏皮、包容且充满活力
- 标题风格 简短、有力、全大写、粗体
- 按钮文案 直接且以行动为导向，通常包含平台信息（例如‘下载 Mac 版’）
- 不要为标题使用细体或浅体字重 — 截图显示展示文本使用的是字重 800
- 不要使用纯黑背景 — 截图显示使用的是深靛蓝色（#1a2081）背景
- 不要使用小或拥挤的内边距 — 截图显示 UI 元素周围有宽松的内边距（10px 16px）
- 不要使用尖锐的容器圆角 — 截图显示卡片和按钮使用的是圆角（12px-16px）
- 不要为主要操作使用微妙或柔和的颜色 — 截图显示使用的是高对比度的白色和蓝紫色按钮
- 不要使用衬线或装饰性字体 — 截图显示为了现代科技感，仅使用无衬线字体
- 避免: 正式的企业语言
- 避免: 密集的技术术语
- 避免: 没有个性的极简主义美学
10
包内真实截图
11
System Prompt
Discord 的着陆页使用深靛蓝背景（#1a2081），搭配高对比度的白色文字和标志性的蓝紫色（#5865f2）用于主按钮强调色。字体将用于粗体、全大写标题的几何无衬线字体（字重 800）与用于正文的人文主义无衬线字体相结合。关键性的禁忌：永远不要使用纯黑背景，避免为标题使用细体字重，并且始终为交互元素使用宽松的内边距（至少 10px 16px）。布局采用两栏式首屏，右侧是复杂的 3D 插图。交互简洁，带有 0.3 秒的过渡。