东鹏 UI 视觉设计体系
CtrlK
v1.0.0
DONGPENG UI DESIGN SYSTEM

东鹏 UI
视觉设计体系

基于东鹏品牌视觉提炼的网页版组件库
让每一个业务界面 清晰、一致、有章可循

浏览基础组件 查看页面模板
01

颜色

使用品牌 Token 与语义状态 Token，建立清晰、克制的企业界面层级。

品牌色

品牌识别与主要操作，仅在需要强调的场景使用。

brand-red品牌红#E21413Logo、当前选中与关键强调
action-gradient主操作渐变#F96766 → #E21413
brand-red-subtle品牌弱化背景#FFF5F5

语义状态

状态颜色只表达业务语义，不替代品牌强调。

success成功#16A34A
warning警示#ED6C02
processing处理中#4590E6

基础中性色

用于页面、容器、边界与文本层级。

canvas页面底色#F5F6F8
surface容器底色#FFFFFF
border默认边框#EBEEF5
text-primary文本主色#303133
02

字体

中文界面优先 HarmonyOS Sans SC，数字与特殊西文使用 MiSans。

大标题东鹏全渠道系统 2020 / Bold
中标题业务概览与待办事项16 / Bold
小标题订单查询结果14 / Bold
正文 · 中

用于表单、表格和主要说明文字。

14 / Regular
注释 · 中

用于辅助说明、日期和弱化信息。

12 / Regular
03

间距与圆角

采用 4px 基础网格。紧凑但不拥挤，适应高信息密度的 B 端界面。

4px图标与文字
8px控件内部
16px组件间距
24px区块间距
2px标签 / 表格
4px按钮 / 输入框
8px卡片
04

阴影与动效

层级依靠边界与轻阴影表达；交互动效快速、克制、可预测。

Level 1悬浮按钮、下拉菜单0 2px 8px rgba(0,0,0,.08)
Level 2弹窗、抽屉0 8px 24px rgba(0,0,0,.12)
160–240ms标准过渡时长
05

图标

统一使用 Lucide，线宽固定 2px；16px 用于行内，24px 用于金刚区或标题旁。

24px标题 / 快捷入口
house
clipboard-list
truck
file-text
search
settings-2
06

按钮

主要操作使用品牌红；一个操作区域通常只保留一个主按钮。

<button class="dp-button primary">
  <i data-lucide="plus"></i>创建订单
</button>
<button class="dp-button secondary">导入</button>
07

输入框 / 选择器

表单控件高度统一为 36px，标签与控件保持 8px 间距。

<label>
  <span>订单编号</span>
  <div class="dp-input">
    <i data-lucide="search"></i>
    <input placeholder="请输入订单编号" />
  </div>
</label>
08

数据卡片

关键指标使用大号数字，趋势信息用语义色辅助判断。

年业绩完成率68%同比 +50% ↑　环比 -10% ↓
年业绩8,608元同比 +50% ↑　环比 -10% ↓
采购总额23,868元同比 +50% ↑　环比 -10% ↓
未提货38单同比 +50% ↑　环比 -10% ↓
09

标签页

用于同级页面切换；当前项通过品牌红与底边强调。

10

状态指示

状态不仅依赖颜色，同时保留文字语义以提高可访问性。

已完成待处理已逾期进行中草稿
11

快捷入口

24px 图标搭配简短动宾结构名称，建议每组不超过 6 项。

12

标准表格

表头 44px、数据行 48px；悬停与选中状态保持明确区分。

提货订单
序号时间 负责业务员所属阶段单号变更项金额
12026-06-11 13:00李冬新增320322198612134225申请新增门店58
22026-06-11 13:00徐晓云重装320322198612134226申请装修985
32026-06-11 13:00黄金梁局改320322198612134227门店升级776
13

分页

默认每页 10 条，同时展示总数与当前范围。

14

RTM 首页模板

按照 RTM 高保真原型重建顶部平台导航、侧边栏与完整工作台信息结构。

PAGE TEMPLATE
东鹏 RTM 全渠道系统
订单 / 提货 / 开票 OMS
商机 / 合同 LTC
BASE 客户
更多平台
输入搜索内容
樊樊态　上海东鹏官方旗舰店
首页创建报价单
欢迎来到 东鹏RTM全渠道系统上海东鹏官方旗舰店

本月概况

年业绩完成率68%同比 +50% ↑　环比 -10% ↓
年业绩8,608元同比 +50% ↑　环比 -10% ↓
采购总额23,868元同比 +50% ↑　环比 -10% ↓
未提货38单同比 +50% ↑　环比 -10% ↓

常用快捷操作

自定义
创建订单订单提货开票申请创建订单经营信息添加常用

仓储费预警 2项

有 9 件商品将在 7 天内逾期，已开始收取仓储费橙色预警信号　2026-06-11　09:00:45

有 3 件商品已逾期，已开始收取仓储费红色预警信号　2026-06-11　09:00:45

通知公告 3项

查看全部
  • “鹏哥”APP操作指引&操作视频
  • 东瓷销字〔2026〕22号 关于2026年零售渠道营销…
  • 东瓷销字〔2026〕19号 2026年上半年零售渠道…
  • 经销商信用评级结果公示
  • 关于3月产品价格调整的通知

待办事项 3项

查看全部
  • 订单 WO20260401023 金额变更待确认
  • 订单 WO20260401023 金额变更待确认
  • 提货单 TH20260400857 收货地址变更待确认
  • LTC项目「龙湖天街」价审待确认
  • 提货单 TH20260400857 收货地址变更待确认
15

RTM 列表页模板

将筛选、主操作、批量操作、数据表格与分页组织为稳定骨架。

PAGE TEMPLATE
提货订单
序号时间负责业务员所属阶段单号变更项金额
12026-06-11 13:00李冬新增320322198612134225申请新增门店58
22026-06-11 13:00徐晓云重装320322198612134226申请装修985
32026-06-11 13:00黄金梁局改320322198612134227门店升级776
16

RTM 表单页模板

按照业务语义分组字段，底部操作区保持固定顺序。

PAGE TEMPLATE
创建提货订单带 * 为必填项
基础信息
收货信息
17

空状态

解释“为什么为空”，并在可恢复时提供明确下一步。

暂无订单数据

当前筛选条件下没有结果，请调整筛选条件后重试。

18

系统视觉路线图

当前版本已完成 RTM 后台、助销宝移动端与汇报 PPT，其他业务系统按统一框架逐步接入。

RTM 后台系统已建立
设计家系统待接入
助销宝系统已接入
IW 系统待接入
ROP 后台待接入
汇报 PPT已接入
22

助销宝 · 色彩 / 图标

助销宝是偏移动端、小程序场景的销售工具，视觉更强调红色渐变、圆角卡片、底部胶囊导航与高识别度业务图标。

MOBILE SYSTEM
客户列表

派单时间：2022-10-08  15:55:11 1分钟未跟进

状态：已到店

地址：四川省南充市南部县京东小区56号

客户标签：豪爽、大气多金

派单时间：2022-10-08  15:55:11 1分钟未跟进

状态：已到店

地址：四川省南充市南部县京东小区56号

客户标签：豪爽、大气多金

移动端主色

助销宝红#FF161F主按钮、选中、强调文字
渐变起色#FF6B71首页头图、登录页背景
浅红底#FFF1F2图标底、弱按钮、空状态按钮
底部导航黑#2B2C31底栏、浮层深色容器
页面底色#F7F7F7移动端页面背景

图标规则

学院
客户报备查询
特殊地址
同城审核
报备公共池
素材库
宣传图
分享案例
分享商品
二维码
渠道活动
带单管理
我的目标
收款管理
退款管理

助销宝业务图标统一使用 50×50 SVG 画布，按红、黄、绿三种业务色分行排列。图形保持原始比例居中展示，不额外叠加卡片底色；通用操作图标仍使用 Lucide 2px 线性风格。

23

助销宝 · 移动组件

从登录、客户新增、接待筛选、提现确认等界面提炼移动端标准组件。

按钮

.zxb-btn / 56px 高 / 999px 胶囊

输入框

账号
密码
左标签 + 右内容，底部分割线

卡片

员工 | 12.15-1.15目标
报备数（个）42609转化率（%）42%
白底 20–24px 圆角，轻阴影

状态

紧急新零售自然到店

使用颜色区分状态优先级

弹窗

确认提示请确认是否提现
居中弹窗，按钮左右等分

图表 / 进度

达成 32026
转化率 32%
小尺寸条形进度，红橙渐变

客户经营业务组件

保留助销宝移动端的信息密度、选中反馈与底部主操作，支持直接点击体验组件状态。

客户跟进信息卡

用于客户详情与回访表单，以清晰的左标签、右侧胶囊值承载关键跟进信息。

客户：张先生

跟进状态
添加回访时间

原因选择标签组

用于流失原因、客户标签与多条件选择，以浅灰默认态和红色描边强化当前选择。

产品原因

客户列表信息卡

聚合客户来源、派单状态、地址标签与常用操作，适用于跟进列表和客户池。

派单时间：2022-10-08  15:55:11 1分钟未跟进

状态：已到店

地址：四川省南充市南部县京东小区56号

客户标签：豪爽、大气多金

24

助销宝 · 界面模板

集中展示首页、客户列表与流失原因选择等核心业务界面，统一移动端的信息层级与交互样式。

PAGE TEMPLATE
9:41
东鹏七星岩旗舰店 ›••• ◎
2022.10.19–2022.10.19

客户

仅供东鹏内部人员使用
145未接单38未反馈7879跟进中87已交定38已超时68已完成
员工 | 12.15-1.15目标 更多目标 ›
报备数（个）

目标 42609 达成 32026

转化率（%）

目标 42% 达成 32%

常用工具 更多 ›
学院报备查询特殊地址同城审核公共池
设计师雷达 全部 ›

郑在10月20日 09:36　归属导购：张涛

该用户正在浏览设计师案例，请注意跟进！
鹏鹏 AI 智能助手首页统计我的

页面结构

  1. 顶部红色渐变经营卡承载最重要 KPI 与主 CTA。
  2. 白色圆角卡片按“目标 → 工具 → 线索提醒”排列。
  3. 底部深色胶囊导航强调小程序工具属性，AI 入口作为高优先级功能。

可复用组件

Header KPI Card、Target Card、Tool Grid、Radar Feed、Capsule Tabbar。

25

助销宝 · 表单页 / 登录页

表单以分组卡片承载长流程，底部固定主操作；登录页使用红色品牌头图与白色浮层表单。

PAGE TEMPLATE
9:41

‹ 新增客户

客户类型意向报备
带单人请选择
客户阶段已测量
客户来源自然进店

【客户基础信息】

姓名方梦雨
性别女
手机号14688909906
省市区广东省 佛山市 禅城区

【客户需求信息】

装修风格奶油风
用砖时间请选择
套内面积请输入㎡
26

助销宝 · 弹窗 / 成功

结果页确认关键操作结果；弹窗只用于必要的二次确认，避免放入复杂信息。

9:41

‹ 结果

申请成功

审核通过后自动发放至微信零钱
请注意查收！

9:41

‹ 积分兑换

确认提示请确认是否提现
DONGPENG CORPORATE REPORT

东鹏汇报 PPT
视觉与生成体系

以集团 PPT 标准模板为视觉锚点，将红白品牌语言、12 种 DP 标准版式和 dongpeng-ppt-editor 接入设计体系。

打开网页版 PPT 下载集团模板
DONGPENG16 : 9
东鹏企业汇报
视觉模板 CORPORATE REPORT SYSTEM 点击进入横向翻页演示
28

PPT 视觉规范

红色仪式页承载章节与关键节点，白底红晕页负责信息表达。

品牌主色#E60012封面、章节、重点数字
中文字体微软雅黑标题稳重，正文清晰
标准画布16 : 9适合会议室与大屏投影
品牌页脚以此为主精于此道
保持红白主叙事不引入蓝紫、霓虹或暗黑科技渐变。
图片直角呈现产品与空间图片不添加圆角和卡片阴影。
数据突出结论图表使用东鹏红系，不做多色 dashboard。
29

12 种标准版式

按集团 PPT 红白视觉重绘缩略页，并把图片、图标、图表、表格等关键界面样式对应到 DP 版式。

DP01DONGPENG
封面红色渐变仪式页 项目汇报 / 年会开场
DP02目录
目录章节总览
  1. 项目背景
  2. 关键数据
  3. 落地计划
DP0301
章节页节奏切换 阶段标题 / 重点转场
DP04观点
标语观点结论先行 · 证据展开
DP05图文
左文右图案例与证据
DP06图标
文字重点三列内容 / 能力拆解
DP07数据
数据大字报KPI 汇报
68%8,60823,868
DP08关系
关键词关系圆形节点 / 逻辑链路
品牌系统组件页面
DP09图片
产品矩阵系列展示 / 图片墙
DP10图表
图表趋势分析
DP11表格
表格结构化数据
DP12END
收尾品牌结束页 精于此道 · 以此为主
30

PPT Skill

接入基于东鹏集团 PPT 标准模板制作的 dongpeng-ppt-editor，用统一流程生成可横向翻页的企业汇报网页。

已接入
dongpeng-ppt-editor

根据东鹏集团 PPT 标准模板沉淀 DP01–DP12 版式，支持把大纲、数据、图片、图标、图表与表格生成红白品牌风格的网页版汇报。

01导入集团模板02整理大纲与素材 03匹配 DP 版式04生成网页汇报
查看示例 打开 Skill 仓库
代码已复制