元数据

名称：品牌指南 描述：将品牌指南应用于所有前端页面

概述

此技能提供公司的官方品牌指南，用于创建一致且专业的材料。在前端页面时，请应用这些标准，以确保所有输出均符合视觉识别。Claude 在创建文档时，应参考这些指南。

品牌颜色

品牌色为橙色系，颜色舒适柔和，凸显产品的沉稳、前沿、可信赖感。主要是由品牌色、辅助色、背景色、文字色、透明色以及其它辅助颜色组成。 我们的官方品牌颜色如下：

• 主色：#FA8919 品牌橙
• 辅助色：#FDBA78 面橙色
• 强调色：#FA7C00
• 中性色：#2E2E2E（炭灰色）

字体 标题

：Montserrat 粗体 正文：Open Sans 常规 字体 字号指南：

• H1：32 磅
• H2：24 磅
• 正文：11 磅

圆角

根据不同背景或重要程度酌情使用

筛选框 标签/表格：4px 卡片内元素: 8px 卡片：10px 按钮(大圆角)：20px

阴影

基础阴影：#000000(10%)，Y：4 模糊：16 阴影颜色是以+2的方式进行递增/递减（2、4、6、8） Y轴是以+2的方式进行递增（2、4、6、8） 模糊是以+4的方式进行递增（12、16、20、24） 阴影的不透明度是以4的倍数为递增（4、8、16） 色值可根据不同底色环境/控件色值调整；整体根据不同背景或重要程度酌情使用

分隔线

分隔线有两种值，#EBEBEE 为通用分隔，#F9F9F9 为浅色分隔线

文字

合理的使用不同的字重、字号和颜色来强调界面中最重要的信息；尽可能的使用单种标准字体，混合使用多种字体会让界面看起来零散和草率；遵循 WCAG 2.0 标准，字体在使用时与背景颜色的对比值需满足无障碍阅读的标准。另外也需对文案长度做最优考虑，过长导致信息接收质量降低，过少避免信息解释不明。

适用场景

在创建以下文件时请遵循这些准则： - 编写前端页面时候

资源

请查看资源文件夹以获取标志文件和字体下载。