设计规范

本页定义 Elysola 的官方色彩系统并给出设计实例，所有产品、文档与品牌物料的用色以此为准。色彩来源为品牌主图标 icon.svg 的蓝渐变与字标 icon-text.svg 的文字色。

1. 品牌色来源

主图标采用垂直单调蓝渐变，自顶向下由浅到深，不得引入环形或对角线分段。

位置	色值	说明
渐变顶部 0%	#C8E0FD	最浅天蓝
渐变 25%	#9BC5FE	浅蓝
渐变 50%	#70ACFE	中蓝
渐变 75%	#417BDF	深蓝
渐变底部 100%	#3069C9	品牌主蓝
字标文字	#1E63CE	「Elysola」字标填充色

2. 色彩系统（Blue 刻度）

以图标渐变为基准建立品牌蓝刻度，命名采用 50–700 档位，便于在 CSS / 设计工具中直接引用。

Token	HEX	用途
--brand-50	#C8E0FD	渐变顶部、极浅背景、高亮底
--brand-100	#9BC5FE	浅色填充、悬停底色、图示辅助
--brand-200	#70ACFE	渐变中段、图标主色中段
--brand-300	#417BDF	渐变 75%、强调描边、次级按钮
--brand-600	#3069C9	品牌主色、渐变底部、主按钮、链接
--brand-700	#1E63CE	字标文字色、深色强调、标题强调

注：--brand-600 与 --brand-700 为同色系深浅两档，分别承担「填充/交互」与「文字/深强调」角色，不要混用。

3. 渐变规范

• 方向：严格垂直（x1 == x2，由上至下）。
• 色标：0% #C8E0FD → 25% #9BC5FE → 50% #70ACFE → 75% #417BDF → 100% #3069C9。
• 可简化：在面积较小的场景（如按钮、标签）可用两端简写 0% #C8E0FD → 100% #3069C9，但不得改变单调递减顺序。
• 禁止：环形渐变、对角线分段、引入除上表外的其他色相、在渐变中插入品牌蓝以外的颜色。

4. 语义色

基于品牌蓝派生的功能色，保证与中性色协调。

角色	Token	HEX	说明
主按钮 / 链接	--brand-600	#3069C9	主要交互色
主按钮文字	--on-brand	#FFFFFF	蓝底上的文字
标题强调	--brand-700	#1E63CE	深蓝文字
浅色背景	--brand-50	#C8E0FD	区块底色（低饱和）
柔和背景	--surface-soft	#F4F8FE	由 brand-50 派生的页面浅底
描边 / 分割线	--border	#DCE3EC	浅灰蓝边框

5. 中性色（支撑色）

中性色不来自图标，用于正文、次要信息与边框，保持低彩度以免干扰品牌蓝。

Token	HEX	用途
--ink	#0E1726	近黑，最高强调文字
--text	#1F2A37	正文
--text-muted	#5B6B7B	次要文字、说明
--border	#DCE3EC	分割线、输入框边框
--surface	#FFFFFF	页面主背景
--surface-soft	#F4F8FE	浅色区块背景

6. 暗色模式（建议）

暗色下保留品牌蓝作为唯一强调色，背景采用近黑蓝灰，避免高亮蓝大面积铺底。

Token	HEX	用途
--bg-dark	#0B1220	页面背景
--text-dark	#E6EDF6	正文
--brand-dark	#70ACFE	暗底上的品牌蓝（取渐变中段，保证对比）
--border-dark	#243044	暗色描边

7. 可访问性

• --brand-600 (#3069C9) 与白色背景对比约 5.3:1，满足 WCAG AA 正文（≥4.5:1）要求。
• --brand-700 (#1E63CE) 与白色背景对比约 5.6:1，可作深色文字。
• 浅档（--brand-50/100/200）仅用于背景与大色块，不得作为正文文字色（与白底对比不足）。
• 正文文字必须使用 --text / --ink / --brand-700，不得在浅蓝背景上叠加浅色文字。

8. 设计实例

以下组件均基于上述色彩系统，可直接参照实现。

品牌蓝刻度

--brand-50 #C8E0FD

--brand-100 #9BC5FE

--brand-200 #70ACFE

--brand-300 #417BDF

--brand-600 #3069C9

--brand-700 #1E63CE

垂直渐变

按钮与链接

主按钮 次按钮 文字链接

卡片

Elysola

头部使用垂直品牌渐变，正文区域采用浅色背景。

徽章与提示条

信息 浅底徽章

这是一条使用品牌蓝的信息提示条示例。

对应实现（节选）：

<!-- 主按钮 -->
<button class="btn btn-primary">主按钮</button>
<!-- 卡片 -->
<div class="card">
  <div class="card-head">Elysola</div>
  <div class="card-body">头部使用垂直品牌渐变。</div>
</div>
<!-- 信息提示条 -->
<div class="banner">这是一条使用品牌蓝的信息提示条示例。</div>

:root {
  --brand-50: #c8e0fd;
  --brand-100: #9bc5fe;
  --brand-200: #70acfe;
  --brand-300: #417bdf;
  --brand-600: #3069c9;
  --brand-700: #1e63ce;
  --on-brand: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f4f8fe;
  --text: #1f2a37;
  --text-muted: #5b6b7b;
  --border: #dce3ec;
}

.btn-primary {
  background: var(--brand-600);
  color: var(--on-brand);
}
.btn-primary:hover {
  background: var(--brand-700);
}
.card-head {
  color: #fff;
  background: linear-gradient(180deg, #70acfe 0%, #3069c9 100%);
}
.banner {
  border-left: 4px solid var(--brand-600);
  background: var(--surface-soft);
}

9. 禁止事项

• 不得更改图标渐变的色标或方向。
• 不得将品牌蓝替换为主色相之外的颜色（如绿、紫）作为「Elysola 蓝」。
• 不得在浅蓝背景（--brand-50/100/200）上使用浅色或同档文字。
• 不得为图标叠加描边、阴影以外的额外渐变或图案。