企业主题视觉规范避坑清单

企业主题的目标不是好看，而是让不同角色在不同场景下看到一致的层级关系。主题一旦失控，常见表现是同一类操作在不同页面颜色不同、同一级标题字号飘忽、深浅模式切换后对比度崩掉。下面从规范制定到落地验收给出清单。

一、先定语义，再定颜色

直接给一堆色值命名，最后没人记得住哪个该用在哪。更稳的做法是先定义语义角色：主操作、次操作、危险操作、成功提示、警示提示、信息提示、禁用、分隔、背景层级。每个角色对应一个色值，页面只引用角色不引用色值。这样换肤或调整品牌色时只改映射表。

要限制角色数量。角色越多，选择越随意，一致性越差。建议把常用角色控制在十余个以内，超出部分通过透明度或层级变化派生，而不是新增角色。

二、层级靠字号与间距，不靠颜色堆叠

很多主题用大量颜色区分层级，结果页面花且难以维护。标题层级应主要由字号、字重、间距三者建立，颜色只做辅助。检查方法是把页面转成灰度观察：若层级仍然清晰，说明结构成立；若一片模糊，说明过度依赖颜色。

间距也要有刻度。随意写间距值会让对齐关系漂移。建议定义一组间距刻度并只允许从中取值，容器内边距、元素间距、区块间距各用固定档位。评审时看间距是否落在刻度上，比看像素值更高效。

三、深浅模式与对比度

深浅模式不是把颜色反过来。深色背景下高饱和色容易刺眼，浅色背景下浅灰文字容易读不清。要为两套模式分别校验文字与背景的对比度，尤其是次要文字、占位文字、禁用态文字这三类最容易被忽略。

还要检查非文字元素：图标、边框、聚焦轮廓在两种模式下是否仍然可辨。聚焦轮廓尤其重要，键盘操作时若轮廓与背景接近，使用者会失去位置感。

四、组件状态要成组定义

按钮、输入框、标签这类组件，必须把默认、悬停、按下、聚焦、禁用、加载六种状态成组定义，而不是只画默认态。缺失状态定义会导致实现者各自发挥，最终同一组件在不同页面行为不一。

危险操作要有区别于主操作的视觉与二次确认规则。仅靠颜色区分不够，应配合文案与确认步骤，避免误触造成不可逆后果。

五、落地验收清单

语义角色是否覆盖常用场景且数量受控；页面是否只引用角色不引用色值；灰度下层级是否仍清晰；间距是否落在刻度上；深浅两套模式是否分别校验对比度；次要文字与禁用态是否可读；聚焦轮廓是否可辨；组件六种状态是否成组定义；危险操作是否有二次确认；主题变更是否有映射表可追溯。十项通过，主题才算可维护。