Design System Setup - 项目案例

价值观阐述

Smart 1.0 设计系统，是在融合了EY品牌DNA，并结合目标用户特征，打造出的展现国际化
设计视野的产物。

本系统建设目标涵盖设计内容资产、设计组件、设计规范、设计特征、设计原则五大核心类
别。通过推行组件化复用机制与标准化设计指南，有效保障产品设计的统一性与规范性，同
时优化设计与研发团队的协作流程，降低沟通与还原成本，最终构建完整、可落地的设计体
系，全面提升设计输出效率与整体工作质量。

原子设计

采用原子设计方法论来构建一个结构化、可复用的设计系统。这种方法将界面拆解为更小、
相互连接的组件，从而简化一致且可扩展的设计创建工作。

tokens

设计的基础变量，决定设计的视觉参数（字体、颜色、间距）。

原子

构成界面的最简单 UI 元素（图标、按钮、复选框、单选按钮、输入框）。

分子

将原子组合为功能组（例如：输入框 + 按钮 = 搜索栏）。

有机体

结合分子与原子形成的复杂组件，用于解决具体需求（例如：头部、卡片、）。

模板

页面布局的雏形，展示有机体、分子和原子如何组合成整体结构。

页面

模板的最终实现，填充真实内容、数据和图像。

颜色

1. Brand 品牌色

Brand/500

#FFE600

2. 24色相

3. 取色思路：

首先参照《Entelligence品牌视觉识别手册》定义品牌色以及辅助色
从自然场景与元素中汲取灵感，丰富组件库的色彩层次与适用性，同时保持与品牌色、既有辅助色的视觉和谐，为产品界面注入「理性专业 × 自然亲和」的平衡质感，满足不同功能模块的视觉区分与情感传递需求

品牌色

统一性：核心色与母品牌(EY VI)保持一致，具有一定的延续性

独立性：鹰睿黑与鹰睿灰体现出与母品牌的一定关联性和品牌独立的调性

鹰睿品牌黄

鹰睿品牌灰

辅助色

鹰睿橙

鹰睿绿

鹰睿青

鹰睿蓝

鹰睿紫

数据可视化

从自然场景与元素中汲取灵感，丰富组件库的色彩层次与适用性，同时保持与品牌色、既有辅助色的视觉和谐，为产品界面注入「理性专业 × 自然亲和」的平衡质感，满足不同功能模块的视觉区分与情感传递需求。

炽焰红

山茶玫

新叶绿

银杏黄

深海蓝

薰衣紫

中性色

鹰睿品牌灰

建立系统级色彩体系

对色彩体系的解读可拆解为两个核心层面，分别是“系统级色彩体系”和“产品级色彩体系”。

问：什么是“系统级色彩体系”？

答：核心是抓住它的全局性与通用性—— 它不是为单一产品或局部场景设计的色彩方案，而是为整个 “系统”搭建的 “色彩基础框架”，所有下属环节、产品的色彩应用，都需基于这个框架展开。

思路：以品牌色、辅助色、自然辅助色为核心原点，每个核心色延伸 100-900 梯度色卡（明度递进、饱和度统一），具备 “通用性、完整性、可扩展性” 三大特征，覆盖绝大多数产品的色彩需求底层；

Neutral Color Palette 中性色（文本&描边&填充）

White/100%

#FFFFFF

White/65%

#FFFFFF

White/45%

#FFFFFF

White/25%

#FFFFFF

Gray/600

#464A5C

Gray/700

#2E2E38

Gray/800

#1A1A24

Gray/900

#0A0A10

Gray/800

#1A1A24

Gray/900

#0A0A10

Support 辅助色（功能色&图表色）

Primary/700

#FFE600

Gray/200

#D0D2DC

Gray/600

#464A5C

Cyan/500

#17E8DD

Orange/500

#FF6B01

Green/500

#1AE561

Blue/500

#0095FF

Purple/500

#7B23F6

Yellow/500

#FCA903

Rosered/500

#F5276C

Red/500

#FF0000

色号库&tokens

建立组件库体系中的 "Primitive Palette"（基础/原子色谱）层

从 "Primitive Palette"（基础/原子色谱）层中“引用”出具体的语义颜色

排版

涵盖字体选择、层级控制、场景适配

Inter Typeface Family

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 →!

(Hello) [World] {9000}
A@B 3 + 9 ≈ 12

Font Size:48px · Line Height:64px · Tracking:0%

Heading

介绍

用于展示标题、文本、段落。

Title H1

Heracles 1.0 B-end Design System is a product forged by integrating EY's brand DNA with the characteristics of target users, showcasing an international design perspective. This system will encompass five major categories: design content assets, design components, design specifications, design characteristics, and design principles.