BOSHENG / COLOR SYSTEM v1.0 · 亮色主题

同一种色彩，
同一个博生。

一种品牌橙，一组中性色。让不同产品拥有共同的识别，让内容容易阅读，让重要操作一眼可见。

沿用 B+ 标识的橙色与深灰，适用于官网、产品后台、Web 与移动端。各产品共享色彩角色，通过内容与功能表达自身特点。

让中性色承载大部分内容让橙色突出少量重点

01 / 基础配色

记住一个橙色，用好几个灰色。

品牌色负责识别，操作色负责可读。按用途选择变量，避免每个产品各自挑选近似色。

B+品牌识别

博生橙 `#EC512D`

Logo、装饰线、图形重点；用于大标题时至少 24px，或粗体至少 19px。

--bs-brand

行动白字按钮

操作橙 `#D14222`

主要按钮、选中项、重点操作。加深一点，让白色按钮文字清楚可读。

--bs-action

回应交互反馈

深橙 `#BC3618`

按钮悬停、正文链接与键盘焦点。浅橙背景统一使用 #FFF1EB。

--bs-action-hover

正文#202527--bs-text

辅助文字#626A6D--bs-text-muted

卡片 / 页面#FFFFFF--bs-surface

底层背景#F5F6F5--bs-canvas

装饰分隔线#DDE0DF--bs-border

输入框边界#7D8588--bs-control-border

深色区域#242C2E--bs-inverse

深色区域使用白色文字（--bs-on-inverse）与 #C4CDCF 辅助文字（--bs-inverse-muted）。浅灰分隔线仅作装饰；输入框等需要识别边界的控件使用更深的控件边框色。

02 / 使用原则

把颜色留给需要注意的地方。

01
少量强调
以中性色约 90%、强调色合计约 10% 为起点，按内容调整。同一操作区只突出一个主要操作，避免整片页面铺满橙色。
02
相同角色，相同颜色
所有产品的主要按钮、正文、背景与链接使用相同变量。新产品先复用这些角色，避免新增一套产品主题色。
03
颜色搭配文字
状态同时提供文字或图标；选中项同时提供边线或字重变化。图表使用标签、形状或线型辅助区分。

应用示例

界面安静，操作明确。

浅灰底、白色卡片、深灰正文。主操作使用操作橙，次要操作保持中性。品牌橙是所有产品共同的识别。

基础规范覆盖亮色主题。暗色主题需要单独配置语义变量与检查对比度，不能直接反转色值。

当前页面

项目设置

清晰的层级，让工作更专注。

项目名称

查看接入方式查看色值

✓ 示例：设置已保存

状态色，只表达业务状态。

成功用绿，提醒用黄褐，错误用红，信息用蓝。保留在标签、提示、校验与通知中。

✓ 成功

操作已完成

#23734D / #EEF7F1--bs-success / -soft

! 提醒

有事项待确认

#8A5700 / #FFF7E6--bs-warning / -soft

× 错误

输入有误，请检查

#B42318 / #FFF0EE--bs-danger / -soft

i 信息

补充说明与帮助

#2463A6 / #EEF5FC--bs-info / -soft

以上每组分别为前景色与浅背景色。例如成功提示使用 --bs-success 文字与 --bs-success-soft 背景。普通文字对比度至少 4.5:1；大字、控件边界和焦点指示至少 3:1。品牌橙不用于白底小字或白字小按钮。

对比度参考：W3C 文字对比度说明 · W3C 非文字对比度说明。

03 / 开发接入

把规范，直接用进产品。

下载变量文件并放进项目。Web 在组件样式之前引入 CSS；移动端或其他技术栈按 JSON 中的同名角色建立主题配置。

下载 CSS 变量下载 JSON 色值

Web 最小接入示例

<link rel="stylesheet" href="/assets/brand-tokens.css">

<style>
/* 应用背景与内容 */
body { background: var(--bs-canvas); color: var(--bs-text); }
.card { background: var(--bs-surface); border: 1px solid var(--bs-border); }
.muted { color: var(--bs-text-muted); }
.link { color: var(--bs-action-hover); text-decoration: underline; }
input { border: 1px solid var(--bs-control-border); }

/* 主要操作与键盘焦点 */
.primary { background: var(--bs-action); color: var(--bs-on-inverse); }
.primary:hover { background: var(--bs-action-hover); }
:focus-visible { outline: 3px solid var(--bs-action-hover); outline-offset: 3px; }
</style>

文件路径按各产品实际目录调整。变量使用 bs 前缀，避免与已有主题冲突。产品内统一引用语义变量，后续更新色值时只需维护主题文件。此页与下载文件均为 v1.0，更新时请同步版本与色值。

同一种色彩，同一个博生。