色彩系统适配
- Pantone 转 HEX/RGB 色值校准
- 主色/辅色/中性色三阶层级定义
- 暗色模式配色映射
- 无障碍对比度 WCAG AA 校验
- 渐变与透明度使用规范
- 色彩命名规范（语义化命名）
VI ADAPT / S12
品牌视觉VI网页适配 / 跨媒介一致性
把线下品牌 VI 系统翻译落地到网页端，色彩、字体、图形、栅格规范统一，确保跨媒介视觉一致性，让品牌识别在线上线下保持同频。
VI TRANSLATION / VI 翻译落地
VI 不是一本手册，是品牌的一致性纪律
很多品牌花重金做了线下 VI 手册，上线官网时却发现颜色对不上、字体用不了、图形比例失调。芭彼小镇的 VI 网页适配服务，把线下 VI 系统翻译为可执行的网页设计规范，确保品牌识别在线上不变形、不走样。
- 色彩翻译：Pantone 转 RGB/HEX，处理屏幕显色差异
- 字体适配：线下字体不可商用时提供网页端替代方案
- 图形规范：Logo 安全区、最小尺寸、配色变体全定义
- 组件库：基于 VI 抽象出可复用的网页组件 Token
VI CHECKLIST / 适配清单
四大维度 · 24 项落地校验
24 ITEMS
字体系统适配
- 中文字体网页端可商用替代方案
- 西文字体 Web Font 加载策略
- 字号阶梯（H1-H6/正文/辅助）
- 行高、字距、段落间距规范
- font-display 加载性能优化
- 字体子集化（仅加载用到的字）
图形与图标
- Logo 安全区与最小尺寸定义
- Logo 配色变体（深底/浅底/单色）
- 辅助图形元素的网页端复用
- 图标库统一（线性/面性风格一致）
- SVG 矢量化与 sprite 合并
- 图片风格滤镜规范
栅格与间距
- 12 列栅格系统定义
- 8px 基线网格规范
- 断点体系（320/414/768/1024）
- 组件间距 Token 化
- 圆角、阴影、边框统一
- 响应式比例缩放规则