Skip to content

颜色

VISTA B 色彩分为品牌色、功能色和中性色。品牌色来自钉钉文档里的蓝绿渐变,功能色沿用 Element Plus。

品牌色

一级按钮使用品牌色渐变,从蓝到绿。

蓝绿渐变#0086C1 → #00B5AE

用于一级按钮、关键操作和当前选中状态。

功能色

功能色只表达状态,不做装饰。成功、警告、失败沿用 Element Plus 的语义。

成功#18BB60

成功提示、完成状态。

警告#FFAA00

风险提醒、待处理状态。

失败#F06060

错误提示、危险操作。

链接#13AEC5

文字链接、可点击文本。

中性色

中性色用于文字、背景、边框和分割线。页面信息层级主要靠中性色深浅区分。

标题 / 正文#001A26
正文 / 图标#334851
辅助文字#66767D
占位 / 禁用#99A3A8
页面背景#F1F2F3
Hover 背景#F6F6F7
表单边框#D0D2D7
分割线#E7E8EB

使用规则

  • 大面积背景不要直接使用品牌色。
  • 一级按钮使用品牌渐变,普通按钮沿用组件库样式。
  • 功能色只用于明确状态,不混用。
  • 中性色优先用于阅读和边界,不靠加粗堆层级。

HOMEVISTA 设计规范