前端组件库样式统一规范手册

前端组件库样式统一规范手册一、总则说明（一）适用范围。本规范适用于公司所有前端项目组件库的样式设计、开发与维护，确保跨项目、跨团队的样式一致性，提升用户体验与开发效率。（二）基本原则。遵循标准化、模块化、可扩展的设计理念，以用户感知优先，技术可行为基，实现全局统一。二、色彩体系规范（一）主色调定义。主色调为0056b3，用于品牌标识、关键按钮等核心视觉元素，饱和度不低于60%，亮度适中。（二）辅助色分级。一级辅助色4CAF50（成功状态）、二级辅助色FFC107（警告状态）、三级辅助色F44336（错误状态），需与主色调形成合理对比。（三）中性色应用。基础色FFFFFF（白）、F5F5F5（浅灰）、333333（深灰）、000000（黑），用于背景、文本、分割线等，确保WCAGAA级无障碍标准。三、字体排印标准（一）标题层级。一级标题使用思源黑体（小四号加粗），二级标题使用思源宋体（小四号常规），三级标题使用思源黑体（五号加粗）。（二）正文格式。正文使用思源宋体（五号常规），行间距1.5倍，首行缩进2字符，段落间距0.5行。（三）特殊符号。全角标点优先，破折号统一使用——，连接号使用-，货币符号￥需左对齐。四、布局间距规则（一）栅格系统。基础网格为8像素倍数，组件外边距统一为16/24/32像素的倍数组合，内边距遵循外边距减半原则。（二）间距层级。S（4px）、M（8px）、L（16px）、XL（24px）四档间距，用于容器、元素间距控制，优先使用M/L层级。（三）响应式适配。断点设置在375px（手机）、768px（平板）、1024px（桌面）三档，组件尺寸需适配各断点缩放比例。五、交互状态规范（一）基础状态。默认状态使用标准色块，悬停状态降低10%亮度，聚焦状态添加2px描边，禁用状态转为E0E0E0色系。（二）动画参数。过渡时间统一为150-200ms，使用easeInOut缓动函数，避免突然状态切换。（三）图标规范。图标尺寸为16/24/32/48像素矩阵，线条粗细1px，空心图标填充透明，实心图标描边透明。六、组件样式细则（一）按钮组件。标准按钮高度44px，圆角4px，文字与背景色对比度不低于4.5:1，危险按钮需添加红色警示边框。（二）输入控件。文本框边框为1pxsolidD1D5DB，聚焦状态边框变为0056b32pxsolid，错误状态添加F44336底纹。（三）卡片组件。阴影使用02px8pxrgba（0,0,0,0.1），圆角统一为8px，内容区与边框间距16px。七、特殊场景适配（一）暗黑模式。基础色改为1F1F1F，主色调转为64B5F6，确保所有组件在暗环境下可读性，通过prefers-color-scheme媒体查询实现。（二）无障碍设计。键盘聚焦顺序与视觉层级一致，ARIA属性标注完整，色盲模式使用红绿蓝三色区分状态。（三）国际化适配。文本方向优先左至右，数字格式遵循本地习惯，长文本组件需支持自动换行。八、维护与迭代机制（一）版本管理。新规范发布需通过设计评审会，重大变更需发布兼容性说明，组件库更新需同步文档修订。（二）责任分工。设计团队负责标准制定，开发团队负责实现，测试团队负责验证，产品团队负责宣贯。（三）验收标准。新组件需通过色差仪校验、键盘可访问性测试、跨浏览器兼容性测试，通过率需达95%以上。九、附则说明（一）文档更新。本规范每年修订一次，重大技术升级需即时补充，修订版本号需标注在文档首页。（二）违规处理。未按规范执