desktop_rpa/taobao-open-style-card.md

淘宝开放平台风格采集卡

1. 采集信息

• 来源：https://open.taobao.com/index.htm；辅助参考：https://developer.alibaba.com/en/index.htm、淘宝开放平台 Color 颜色文档。
• 采集日期：2026-06-26。
• 视口/页面：首页 HTML、首页公开 CSS、导航/公告/业务入口/能力模块/文档颜色规范。
• 可信度：中。open.taobao.com/index.htm 当前页面为 Rax 应用壳，静态 HTML 只暴露资源入口；本文件的精确色值主要来自公开 CSS 与文档页源码，布局与组件来自可读取首页结构。

2. 一句话风格定位

深色技术导航 + 白底业务入口 + 蓝色交互高亮的 B2B 开放平台风格，强调开发者可信、信息密度和平台能力展示。

3. 风格关键词

• 开发者平台感：顶部深色导航 #373942，二级菜单 #2b2d34，适合承载控制台、文档、解决方案等技术入口。
• 蓝色高亮交互：链接 hover、菜单标题、查看更多使用 #5eb5fe / #6cb5f4，形成“技术服务”而非电商促销的视觉语气。
• 白底轻量内容：业务卡片、公告、能力模块主要使用白底、灰字、细分割线，信息密度高但克制。
• 图片型 Hero：首屏轮播使用 1920 宽大图，外层深背景 #0a091e，品牌视觉主要交给 banner 图承担。
• 低圆角、轻阴影：组件多为直角或小圆角，通知/菜单使用 2–4px 圆角，阴影只在浮层中使用。

4. 配色系统

Token	Hex/RGB	用途	观察证据
color-nav-bg	#373942	顶部/侧边深色导航背景	.openplatform-nav { background:#373942 }
color-nav-panel	#2b2d34	hover 状态、二级菜单背景、激活导航	.top-openplatform-nav ul li.active/hover 与 .sub-nav
color-hero-bg	#0a091e	首页轮播深色承托背景	.slide { background-color:#0a091e }
color-primary	#5eb5fe	菜单标题、链接 hover、阅读更多	.sub-nav dl dt、.page-tips a.read-more
color-primary-hover	#6cb5f4	顶部菜单项 hover	.open-nav-menu > li > a:hover
color-tech-blue	#28a3ef	技术能力模块数字/步骤高亮	.cols-3 .grid .step-1
color-text-main	#333333	主要正文/图标	.cols-1 i、.bottom-item
color-text-heading	#444444	业务入口标题	.cols-1 h4
color-text-muted	#666666	公告、段落、弱信息	.page-tips a、.cols-1 p
color-text-subtle	#7c7c7c	次级说明文本	.cols-3 p
color-nav-text	#e5e9ee	深色导航主文字/Logo	.logo-container h1 a、.top-openplatform-nav a
color-nav-muted	#a3a3a3	二级菜单普通链接	.sub-nav dl dd a
color-border	#e6e6e6	公告底线、表格分割线	.page-tips、.table-bordered
color-nav-border	#383a45	深色菜单内部分割线	.sub-nav dl dd
color-success-bg	#edffe9	成功通知背景	.open-success
color-success	#4ab933	成功通知文字	.open-success
color-error-bg	#fff2f2	错误通知背景	.open-alert
color-error-border	#ffe3e0	错误通知边框	.open-alert
color-danger	#d44044	通知红点 hover / 强提醒	.notify-container.has-message:hover

5. 字体与字号

层级	Font	Size	Weight	Line-height	说明
Body	系统 sans-serif / Bootstrap 默认	12px	400	默认	首页 CSS 明确 body{font-size:12px}，偏传统门户密度。
Nav	系统 sans-serif	14px	400	64px	顶部导航高 64，文字垂直居中。
Logo	iconfont + sans-serif	18px	400	64px	Logo 文案不加粗，依靠图标与深色背景建立品牌识别。
Section H3	系统 sans-serif	22px	400/默认	默认	模块标题使用较大字号但非粗重风格。
Business H4	系统 sans-serif	20px	400/默认	默认	四列业务入口标题。
Paragraph	系统 sans-serif	12–14px	400	1.8–2	段落行高较松，缓解小字号带来的拥挤。
Iconfont	Alibaba iconfont	16–105px	normal	1	大图标用于业务入口和能力模块。

6. 布局与间距

• 页面宽度：核心容器 max-width:1170px，文档页内容 990px。
• 顶部导航：高度 64px，深色通栏，Logo 左置，主导航横排，登录/搜索右置。
• 首页 Hero：全宽轮播，图片 1800–1920px 级别，背景深色兜底。
• 公告条：Hero 下方 15px 上下外边距，底部 1px #e6e6e6 分割线。
• 业务入口：四列栅格 .col-md-3，容器左右内边距 45px，每项图标/图片 + 标题 + 描述。
• Section spacing：模块常用 margin-top:20–80px、margin-bottom:40–60px。
• 信息密度：导航和表格偏紧凑，营销/能力模块留白较多。

7. 组件拆解

Nav

• 尺寸：高 64px，主导航项左右 padding 20px。
• 背景：默认 #373942，hover/active #2b2d34。
• 文本：默认 #e5e9ee，菜单子项 #a3a3a3，标题/hover #5eb5fe。
• 下拉：深色大面板，顶部贴合导航，padding 25px 20px 20px，内部按 dl/dt/dd 分组。
• 动效：hover 展开，opacity 0.3s；箭头旋转 180 度，0.5s。
• 可复用规则：适合控制台型产品的顶栏或左侧导航；导航背景不要纯黑，使用带蓝灰倾向的深 Slate。

Button / CTA

• 首页强 CTA 不突出；更多使用链接、图片卡片、btn-knowmore。
• btn-knowmore：高 44px，透明蓝背景 rgba(80,133,177,0.8)，边框 #3199f4，hover 背景 rgba(49,153,244,0.8)。
• 可复用规则：主按钮可使用蓝色描边/半透明填充，不要大面积淘宝橙；橙色只适合品牌点缀或营销态。

Card / Business Entry

• 结构：图标/图片在上，h4 标题，p 描述。
• 背景：白底或透明，无明显卡片边框。
• Hover：整项文字/图标变蓝 #5eb5fe。
• 尺寸：图形资源约 135px × 85px；标题 20px。
• 可复用规则：入口卡片应轻边界、重图标，避免厚重阴影。

Announcement Bar

• 结构：公告图标 + 多条横向链接 + “查看更多”。
• 颜色：普通链接 #666，查看更多 #5eb5fe。
• 行为：文本单行截断，宽度约 16em，适合密集公告。

Tech Grid

• 形态：蜂窝/网格图形背景，hover 翻转 rotateY(180deg)。
• 高亮：数字/步骤用 #28a3ef，hover 后白字。
• 动效：transform 0.3s ease-in-out。
• 可复用规则：可用于“能力矩阵”“流程步骤”“开放能力”展示。

Notification

• 浮层：高 46px，顶部 fixed，阴影 0 2px 5px rgba(0,0,0,.26)，圆角 2px。
• 成功：#edffe9 背景、#dcf9d6 边框、#4ab933 文本。
• 错误：#fff2f2 背景、#ffe3e0 边框、red 文本。

8. 圆角、边框、阴影、质感

• Radius scale：2px 用于通知，3px 用于选中胶囊，4px 用于下拉菜单；整体偏低圆角。
• Border：浅色分割线 #e6e6e6；深色菜单分割线 #383a45。
• Shadow：只在通知和下拉菜单中使用；菜单阴影 1px 1px 5px rgba(0,0,0,.75)，通知阴影 0 2px 5px rgba(0,0,0,.26)。
• Texture：部分模块使用背景图纹理，不是纯色卡片风格；复用时建议用极淡网格/渐变替代老旧纹理图。

9. 动效与交互

• 顶部下拉：hover 展开，opacity 0.3s ease-in-out。
• 箭头旋转：0.5s。
• 搜索框：border-color 0.3s，input width 0.3s。
• 技术网格：hover 翻转，transform 0.3s ease-in-out。
• 云环境卡片：hover 后内容上移/淡入，all 0.3s。
• 复用建议：保留 0.2–0.3s 的快速反馈；避免大面积 3D 翻转，可改为轻微 translate/opacity 以现代化。

10. 可复用主题 Tokens

:root {
  --tbop-bg: #ffffff;
  --tbop-bg-muted: #f7f8fa;
  --tbop-nav-bg: #373942;
  --tbop-nav-panel: #2b2d34;
  --tbop-hero-bg: #0a091e;

  --tbop-primary: #5eb5fe;
  --tbop-primary-hover: #6cb5f4;
  --tbop-tech-blue: #28a3ef;
  --tbop-link: #5eb5fe;

  --tbop-text: #333333;
  --tbop-text-heading: #444444;
  --tbop-text-muted: #666666;
  --tbop-text-subtle: #7c7c7c;
  --tbop-text-inverse: #e5e9ee;
  --tbop-text-inverse-muted: #a3a3a3;

  --tbop-border: #e6e6e6;
  --tbop-border-dark: #383a45;

  --tbop-success: #4ab933;
  --tbop-success-bg: #edffe9;
  --tbop-success-border: #dcf9d6;
  --tbop-error: #d44044;
  --tbop-error-bg: #fff2f2;
  --tbop-error-border: #ffe3e0;

  --tbop-font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  --tbop-font-size-xs: 12px;
  --tbop-font-size-sm: 14px;
  --tbop-font-size-md: 20px;
  --tbop-font-size-lg: 22px;

  --tbop-radius-xs: 2px;
  --tbop-radius-sm: 3px;
  --tbop-radius-md: 4px;

  --tbop-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.75);
  --tbop-shadow-notify: 0 2px 5px rgba(0, 0, 0, 0.26);

  --tbop-nav-height: 64px;
  --tbop-container: 1170px;
  --tbop-doc-container: 990px;
  --tbop-transition-fast: 0.2s ease-in-out;
  --tbop-transition-normal: 0.3s ease-in-out;
}

11. 适合用于 / 不适合用于

• 适合：开放平台、开发者门户、插件市场、企业 SaaS 控制台、API 文档中心、技术生态官网。
• 不适合：强消费转化型落地页、年轻化社交产品、移动端优先 C 端 App、需要大量圆角/玻璃拟态的现代品牌页面。

12. 复刻注意事项

• 保留：深色技术导航、蓝色交互高亮、白底四列能力入口、公告条、能力矩阵、低圆角与轻阴影。
• 避免：直接复制淘宝/阿里 Logo、banner 原图、iconfont 字形、具体文案和品牌名称。
• 现代化变体：保持 #373942 + #5eb5fe 的骨架，把小字号从 12px 提升到 14px，把老式图片纹理替换为浅蓝渐变/网格背景，把 3D 翻转改为轻微浮起与淡入。
• 用于当前 RPA 工作站原型时：可将左侧导航改成 #373942 深 Slate，激活/hover 用 #2b2d34，图标高亮用 #5eb5fe，内容区继续保持白底与 #e6e6e6 分割线。