品牌视觉规范

扁平化设计系统

本站统一使用扁平化设计语言:纯色块、无阴影无渐变、清晰边界、4px 圆角,依靠色彩对比与留白建立层级。

类别:企业官网 年代:2010s Modern 复杂度:Low 最适合:企业 · SaaS · 服务型品牌 圆角:4px 阴影:none

色彩体系

限定色板,四色点缀

正文使用 #22313F 保证对比度,强调色仅用于按钮、图标与徽标。

--blue #2471A3

--blue-dark #1D5D88

--red #C0392B

--green #1E8449

--orange #E67E22

--ink #22313F

--grey #ECF0F1

--bg #FFFFFF

排版层级

Rubik 字重建立层级

显示级 / Hero 标题

品茶见真味

章节标题 1.5–2rem / 700

卡片标题 18px / 700

正文 16px / 400 / 行高 1.6,段落最大宽度约 34em。

次级文字 14–15px / 400

标签小字 13px / 500

按钮与控件展示

交互态一目了然

悬停、按下、禁用与键盘焦点均有明确反馈;过渡时长 150–200ms。

chip 默认 chip 描边 chip 实心

主按钮 / 悬停 / 按下 / 禁用

次按钮 / 幽灵按钮 / 强调按钮

小尺寸次按钮

开关 toggle(可点击试用)

徽标 badge

New 在库 限量 售罄 草稿

图标按钮(含 aria-label)

链接与焦点环

正文中的文本链接使用 --blue,键盘 Tab 聚焦时显示橙色焦点环。

表单示例

输入控件与焦点态

所有输入框均有可见 label 关联,移动端高度不小于 48px。

企业标识请提供 AI / SVG / PDF 矢量文件。

规范已应用到全站页面

首页、关于我们、服务列表与详情、团队成员、联系表单均遵循同一套设计变量。

返回首页