🎨 品牌视觉规范
更新日期：2026 年 9 月
本规范用于统一「风语社」及其开放平台（WSO）相关产品的对外视觉表达。
一、品牌核心
「风语社」（Whisper Software）成立于 2024 年 2 月，是一支国内新兴的原创游戏制作组。我们以创作一个好的故事为理念，专注于叙事驱动的视觉小说。
「风语社」开放平台（WSO）为旗下所有站点提供统一身份认证、用户数据管理与跨域服务支持，并致力于为创作者提供一个安全、可信、开放的统一身份与协作平台。
二、品牌色彩
主题色方案
品牌提供两套主题色方案，并对应两套不同配色的 Logo 图样，以供灵活选用。
方案 A：暖风桃红 (Warm Peach)
最经典的配色，从建立开始沿用至今，带有温暖包容的视觉感受。
| 颜色名称 (英文) | 颜色名称 (中文) | 色值 (HEX) | 色值 (RGB) | 色值 (CMYK) | 品牌视觉应用建议 |
|---|---|---|---|---|---|
| Muted Peach | 柔粉桃红 | #E9B3A2 | 233, 179, 162 | 12, 35, 28, 0 | 主标志文字、大标题、主视觉背景板 |
| Coral Rose | 珊瑚桃红 | #F18A78 | 241, 138, 120 | 5, 58, 45, 0 | 渐变过渡色、重点按钮、图标、强调文字 |
| Soft Pink | 浅雾粉色 | #FCE2DF | 252, 226, 223 | 2, 10, 8, 0 | 辅助背景色、卡片底色、装饰线条 |
| Neutral Base | 基础底色 | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | 页面留白底色，确保视觉呼吸感 |
方案 B：清风浅蓝 (Fresh Mist Blue)
最清爽的配色，简约明快，富有科技感，适用于专业理性的视觉体验。
| 颜色名称 (英文) | 颜色名称 (中文) | 色值 (HEX) | 色值 (RGB) | 色值 (CMYK) | 品牌视觉应用建议 |
|---|---|---|---|---|---|
| Periwinkle | 雾霭蓝紫 | #99A6E3 | 153, 166, 227 | 38, 28, 0, 0 | 主标志文字、大标题、主视觉背景板 |
| Ice Blue | 冰川天蓝 | #8DD1EE | 141, 209, 238 | 40, 6, 0, 0 | 渐变过渡色、重点按钮、图标、强调文字 |
| Light Mist | 浅蓝微光 | #E4F0FA | 228, 240, 250 | 8, 3, 0, 0 | 辅助背景色、卡片底色、装饰线条 |
| Neutral Base | 基础底色 | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | 页面留白底色，确保视觉呼吸感 |
中性色
| 名称 | 色值 | 用途 |
|---|---|---|
| 深灰 | #1e1e2e | 正文、标题 |
| 中灰 | #6b6b7b | 辅助文字 |
| 浅灰 | #e8e8ee | 边框、分割线 |
| 白色 | #ffffff | 主背景 |
| 深色背景 | #0d1117 | 深色模式主背景 |
原则：主题色为主，克制使用；深色模式下主题色可适度提亮。
三、品牌字体
- 品牌字体：Sarasa UI SC（更纱黑体修改版，SIL OFL 1.1）
- 备选回退：
-apple-system→BlinkMacSystemFont→'Segoe UI'→Roboto→sans-serif
| 用途 | 字重 | 字号 |
|---|---|---|
| 品牌标题 | 700 | 24–48px |
| 页面标题 | 700 | 20–32px |
| 正文 | 400 | 14–16px |
| 辅助文字 | 400 | 12–13px |
字体版权详见《开源内容使用与版权声明》。
四、使用规范
Logo
- 安全空间：Logo 周围保留至少一个「w」字符宽度的空白区域
- 禁止：拉伸、压扁、改色、用于非品牌上下文；自行重新绘制 Logo 而不使用原版。
- 单色版本：白色用于深色/彩色背景，黑色用于浅色背景
图标
在空间不足的情况下，您可以单独截下 Logo 的首字母「w」作为图标。除此之外，我们不允许使用任何其他剪裁方式。
- 线性图标（outline），线宽 1.5–2px
- 圆角（round）
- 尺寸：16、20、24px
- 默认色：
var(--text-secondary)，hover/active 用品牌色 - Emoji 可适度用于通知、提示，避免杂乱
排版与布局
- 基础网格：8px
- 内容最大宽度：1200px
- 边距：桌面
1.5rem，移动0.8–1rem - 卡片：背景
var(--bg-secondary)，边框1px solid var(--border-color)，圆角8px，内边距桌面1.8–2.2rem、移动0.8–1.2rem
语气与文案
- 友好但不轻浮，清晰但不冰冷，专业但不傲慢
- 使用主动语态，避免术语堆砌，保持简洁
- 中英文混排时，英文与中文之间留一个空格
- 使用中文全角标点，数字用阿拉伯数字
- 链接用描述性文字，不用「点击这里」
五、品牌资产与联系
品牌资产（Logo SVG、色板、字体）仅供官方及授权合作方使用。