Color
System,
色彩
色彩对产品的视觉传达和多维度信息的承载有着很重要的影响。按照颜色类型和功能的不同，TUHU 将色彩分为品牌色、功能色、中性色和遮罩色。
通过 HSB 色彩模式参数化途虎红（HSB 7/96/100），以 H=7 为基础依次递减定义 9 种色相；品牌色取自基础色板第一列红色 #FF270A，中性色则定义了一款偏蓝的「blackblue」，大量用于文字、背景、边框与分割线。
彩色色相选取逻辑Hue
品牌色Brand
中性色Neutral
项目介绍
TUHU Design System for Mobile 是途虎养车移动端的设计规范体系，由 Design Token 样式库（色彩、栅格）与 UI Components 组件库（按钮、标签、图标）两部分组成，服务于途虎养车 APP 及各业务线页面。
规范以途虎红 #FF270A（HSB 7/96/100）为基础推导出 9 种彩色色相及配套色板，采用 12 栅格体系，并将按钮、标签、图标等高频元素沉淀为可复用的 Figma 组件，让设计与开发使用同一套语言。
目前已沉淀 1100+ 个图标、7 种尺寸 × 3 种层级的按钮体系，以及覆盖营销、会员、优惠券场景的 7 种标签类型。
规范模块
Color
以途虎红为基础，定义品牌色、功能色、中性色与遮罩色
Grid
12 栅格体系，统一屏幕密度、列宽与槽宽
Button
Primary / Secondary / Tertiary 三级，44–20 共 7 种尺寸
Tag
7 种标签类型，覆盖营销、会员、优惠券等场景
Icon
14 类功能图标 + 商标类，共 1100+ 个
9
种彩色色相
12
栅格体系
7×3
按钮尺寸 × 层级
1100+
图标数量
色彩
色彩对产品的视觉传达和多维度信息的承载有着很重要的影响。按照颜色类型和功能的不同，TUHU 将色彩分为品牌色、功能色、中性色和遮罩色。
通过 HSB 色彩模式参数化途虎红（HSB 7/96/100），以 H=7 为基础依次递减定义 9 种色相；品牌色取自基础色板第一列红色 #FF270A，中性色则定义了一款偏蓝的「blackblue」，大量用于文字、背景、边框与分割线。
栅格
栅格系统用于规范化信息布局，辅助设计人员提高布局视觉的一致性、韵律感与秩序感，并尽可能保证设计与开发过程的规范高效。
TUHU 采用 12 栅格体系，数字 12 可被 1、2、3、4、6、12 整除，为多种尺寸的元素提供了很大的灵活性；同时统一了 dp / sp / pt 等屏幕密度单位与列宽、槽宽（移动端推荐 12pt/dp）。
按钮
按钮用于触发即时操作。TUHU 按视觉权重将按钮分为 Primary、Secondary、Tertiary 三个层级，并提供 44 / 40 / 36 / 32 / 28 / 24 / 20 共 7 种尺寸，适配从页面主操作到卡片内轻量操作的不同场景。
每种按钮均定义了 Enabled、Pressed、Disabled 以及 Loading、Progress 状态，支持单行与双行文案、图标与箭头组合；此外还提供 Link-Button、Icon-Button 与 Pop-Button 等辅助形态。
图标
图标库按使用场景分为方向指示、选择提示、购买、社区、工具、用户信息、影音图像、编辑列表、商标认证、地图定位、排行、通用等 14 类功能图标，以及商标类图标，共计 1100+ 个。
所有图标统一线性 / 面性两种风格与绘制网格，作为组件发布到团队库，设计与开发可按名称直接检索调用。
标签
Tag 是一种内容组织方式，是相关性很强的关键字，帮助用户轻松地描述和分类内容，以便于检索和分享。在途虎养车中，标签被广泛用于商品、门店、会员与优惠信息的透出。
标签由背景容器、文字、icon（可选）与图片（可选）构成，规范定义了纯图片、单色/渐变 + 图片/icon + 文字、纯色 + 文字、线框 + 文字、渐变 + 文字、优惠券等 7 种类型，以及对应的背景样式与使用规则。
