品牌视觉规范
扁平化设计系统
本站统一使用扁平化设计语言:纯色块、无阴影无渐变、清晰边界、4px 圆角,依靠色彩对比与留白建立层级。
色彩体系
限定色板,四色点缀
正文使用 #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。
标签小字 13px / 500
表单示例
输入控件与焦点态
所有输入框均有可见 label 关联,移动端高度不小于 48px。
规范已应用到全站页面
首页、关于我们、服务列表与详情、团队成员、联系表单均遵循同一套设计变量。