临时视觉

可观测功能色 Business Semantics

告警与状态语义色，勿用腾讯品牌色替代。图表色使用监控色板序列，不与告警语义混用。

状态 / 告警 --obs-*

严重 / 错误

--obs-error

#F55863

警告

--obs-warning

#FFA54C

品牌 / 信息

--obs-brand

#1F69FF

待处理

--obs-pending

#2353B5

处理中 / 已关闭

--obs-processing

#97A8CB

成功 / 启用

--obs-success

#00A870

选中浅底

--obs-surface-selected

#E5EFFF

中性文字层级 Figma 原稿

主标题

--obs-neutral-900

#232A35

正文

--obs-neutral-600

#596376

次要说明

--obs-neutral-500

#757F92

监控图表色板（按序使用）

#5B8FF9 #61DDAA #65789B #796CED #008685 #F08BB4

布局要点

表格列宽为 8 的倍数；表头/单元格行高 40px，左右 padding 16px
侧栏宽 200px；页头标题区高 46px
抽屉常规 560px / 大 800px；底栏高 72px
Tag 常规高 24px；小尺寸高 20px

品牌色彩 Brand Colors

腾讯三色体系：企鹅蓝为品牌主色，微信绿为辅助色，通知橙为强调色。每种颜色配套浅色背景和深色 hover 态。

🔵 企鹅蓝 · Primary

企鹅蓝

--t-blue

#0052D9

浅蓝底

--t-blue-light

#E8F0FE

悬停蓝

--t-blue-hover

#0034B5

🟢 微信绿 · Secondary

微信绿

--t-green

#07C160

浅绿底

--t-green-light

#E8F8EF

悬停绿

--t-green-hover

#06AD56

🟠 通知橙 · Accent

通知橙

--t-orange

#ED6A0C

浅橙底

--t-orange-light

#FFF3E0

🔴 警示红 · Error

警示红

--t-red

#E34D59

浅红底

--t-red-light

#FFECE8

灰度系统 Grayscale

腾讯10级灰度体系，纯中性无彩色倾向，适用于文本、背景、边框等场景。从最深 #1A1A1A 到最浅 #FAFAFA，层次分明。

1

gray-1

#1A1A1A

2

gray-2

#333333

3

gray-3

#5C5C5C

4

gray-4

#888888

5

gray-5

#AAAAAA

6

gray-6

#CCCCCC

7

gray-7

#E7E7E7

8

gray-8

#F3F3F3

9

gray-9

#F7F7F7

10

gray-10

#FAFAFA

语义色映射 Semantic Colors

将原始 Token 映射为语义化变量，使设计系统具备业务含义，便于全局调整和维护。

语义 Token	映射值	用途
`--text-primary`	`--t-gray-1` · #1A1A1A	标题、主文本
`--text-secondary`	`--t-gray-3` · #5C5C5C	正文、说明文字
`--text-tertiary`	`--t-gray-4` · #888888	辅助、次要信息
`--text-placeholder`	`--t-gray-5` · #AAAAAA	占位符文本
`--bg-page`	`--t-gray-10` · #FAFAFA	页面底色
`--bg-card`	#FFFFFF	卡片、容器底色
`--bg-hover`	`--t-gray-8` · #F3F3F3	悬停态背景
`--border-primary`	`--t-gray-7` · #E7E7E7	主边框
`--border-secondary`	`--t-gray-8` · #F3F3F3	次边框、分割线

字体排版 Typography

中文优先系统字体栈，4px 基准的字号阶梯，紧凑的行高系统。

字体栈 Font Stack

        /* 中文优先系统字体栈 */

--font-family: -apple-system, BlinkMacSystemFont,

  'PingFang SC', 'Noto Sans SC',

  'Helvetica Neue', 'Microsoft YaHei', sans-serif;

字体优先级 PingFang SC → Noto Sans SC → Microsoft YaHei

渲染策略 macOS 优先 PingFang，Windows 优先 Noto Sans，回退雅黑

抗锯齿 -webkit-font-smoothing: antialiased

字号阶梯 Type Scale 10 级

--font-size-6xl 黄婷 48px

--font-size-5xl 作品集 36px

--font-size-4xl 设计理念 28px

--font-size-3xl 从业经历 24px

--font-size-2xl 关于AI能力 20px

--font-size-xl 区块标题 18px

--font-size-lg 导航与按钮 16px

--font-size-md 描述文字 15px

--font-size-base 正文内容文字 14px

--font-size-sm 辅助说明文字 13px

--font-size-xs 标签与备注 12px

行高系统 Line Height

1.3

tight · 标题

--line-height-tight

1.6

base · 正文

--line-height-base

1.8

loose · 描述

--line-height-loose

字重体系 Font Weight

Aa

300 Light

Aa

400 Regular

Aa

500 Medium

Aa

600 SemiBold

Aa

700 Bold

间距系统 Spacing

基于 4px 基准网格，11 级间距 Token。紧凑与宽松间距配合，形成视觉节奏。

间距阶梯 4px 基准

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

间距使用场景

Token	值	典型场景
`--space-1`	4px	图标与文字间距、微调
`--space-2`	8px	标签内边距、小元素间隙
`--space-3`	12px	导航项内边距、小组间距
`--space-4`	16px	卡片内边距、表单项间距
`--space-6`	24px	卡片内边距、区块间距
`--space-8`	32px	页面内边距、大区块间距
`--space-10`	40px	Hero 区域内边距
`--space-16`	64px	页面 section 间距

圆角规范 Border Radius

5 级圆角体系，比苹果风格更紧凑。4px 起步，最大 16px，适配腾讯产品的利落感。

4

sm

4px

6

md

6px

8

lg

8px

12

xl

12px

16

2xl

16px

圆角使用映射

Token	值	组件
`--radius-sm`	4px	小标签、代码块、色条装饰
`--radius-md`	6px	按钮、输入框、导航 Tab
`--radius-lg`	8px	图标容器、头像框、时间线子块
`--radius-xl`	12px	卡片、优势卡、项目卡
`--radius-2xl`	16px	Hero 大卡片、照片框、弹窗
`--radius-round`	999px	Pill 标签、徽章、圆形头像

阴影层级 Shadow

4 级极轻阴影，透明度 0.04 ~ 0.10，克制不抢眼。腾讯风格追求平面的整洁感，阴影仅做轻微层次暗示。

shadow-1

0 1px 2px / 0.04

shadow-2

0 2px 8px / 0.06

shadow-3

0 4px 16px / 0.08

shadow-4

0 8px 24px / 0.10

阴影使用场景

层级	CSS 值	场景
shadow-1	`0 1px 2px rgba(0,0,0,0.04)`	默认态卡片（几乎无感）
shadow-2	`0 2px 8px rgba(0,0,0,0.06)`	悬停态卡片、浮动徽章
shadow-3	`0 4px 16px rgba(0,0,0,0.08)`	头像框、悬浮数据卡
shadow-4	`0 8px 24px rgba(0,0,0,0.10)`	弹窗、重要浮层

动效系统 Motion

3 档时长 × 3 种缓动曲线，组成克制的动效体系。强调顺滑过渡而非炫技动画。

时长 Duration

150ms

fast · 快速反馈

--duration-fast

250ms

normal · 标准过渡

--duration-normal

350ms

slow · 慢速展开

--duration-slow

缓动曲线 Easing

--ease-out

cubic-bezier(0,0,0.2,1)

--ease-in

cubic-bezier(0.4,0,1,1)

--ease-standard

cubic-bezier(0.4,0,0.2,1)

典型交互动效

交互	时长	缓动	效果
Tab 悬停	`150ms`	`ease-standard`	背景色渐变
卡片悬停	`250ms`	`ease-standard`	translateY(-2px) + 阴影增强
卡片悬停	`250ms`	`ease-standard`	边框色加深
页面切换	`350ms`	`ease-out`	fadeIn + translateY
滚动揭示	`350ms`	`ease-out`	opacity 0→1 + translateY
聚焦态	`150ms`	`ease-standard`	边框变色 + box-shadow

渐变与特效 Gradients & Effects

品牌渐变、毛玻璃效果和装饰性元素，为界面增添层次与质感。

品牌渐变

Hero 名字渐变 · --t-blue → --t-green · 135deg

Hero 卡片渐变 · 白 → 浅蓝 → 浅紫 · 135deg

毛玻璃效果 Backdrop Filter

层级	参数	场景
导航栏	`blur(12px) saturate(150%)`	半透明白底，滚动内容透出
浮动数据卡	`blur(8px)`	头像区浮层信息
弹窗/遮罩	`blur(16px)`	模态框背景

装饰性元素

元素	样式	场景
区块标题色条	3px 宽 × 18px 高 · --t-blue · radius 2px	section-header 左侧竖线
卡片顶部色条	3px 高 · 全宽 · 蓝/绿/橙	advantage-card ::before
章节左侧色条	4px 宽 · 全高 · --t-blue	chapter-lead 左装饰
时间线圆点	10px · border 2px · 首节点实心	timeline-dot
时间线连接线	2px 宽 · --t-gray-7	timeline-line
Pill 标签	border-radius: 999px · 小内边距	角色标签、技能标签

组件预览 Components

基于设计 Token 构建的核心组件，每个组件可直接从 Token 取值，确保全局一致性。

Button 按钮

Tag 标签

AI产品经理已认证热门默认标签

Input 输入框

Nav Tab 导航

01

企鹅蓝色条卡片

顶部 3px 蓝色装饰线

02

微信绿色条卡片

顶部 3px 绿色装饰线

03

通知橙色条卡片

顶部 3px 橙色装饰线

Timeline 时间线

现任职位 · 首节点实心蓝

2024.06 - 至今

上一份工作 · 空心圆点

2022.03 - 2024.05

更早的经历 · 末节点无线

2020.07 - 2022.02

Navbar 导航栏

黄婷

Token 总览 Complete Token Map

所有 CSS 自定义属性的一览表，可直接复制到项目 :root 中使用。

完整 CSS Variables 代码

        /* ========== 腾讯设计系统：Design Tokens ========== */
:root {
  /* 腾讯品牌色 */
  --t-blue: #0052D9;
  --t-blue-light: #E8F0FE;
  --t-blue-hover: #0034B5;
  --t-green: #07C160;
  --t-green-light: #E8F8EF;
  --t-green-hover: #06AD56;
  --t-orange: #ED6A0C;
  --t-orange-light: #FFF3E0;
  --t-red: #E34D59;
  --t-red-light: #FFECE8;

  /* 腾讯中性色系 - 灰度 */
  --t-gray-1: #1A1A1A;
  --t-gray-2: #333333;
  --t-gray-3: #5C5C5C;
  --t-gray-4: #888888;
  --t-gray-5: #AAAAAA;
  --t-gray-6: #CCCCCC;
  --t-gray-7: #E7E7E7;
  --t-gray-8: #F3F3F3;
  --t-gray-9: #F7F7F7;
  --t-gray-10: #FAFAFA;

  /* 语义色 */
  --text-primary: var(--t-gray-1);
  --text-secondary: var(--t-gray-3);
  --text-tertiary: var(--t-gray-4);
  --text-placeholder: var(--t-gray-5);
  --bg-page: var(--t-gray-10);
  --bg-card: #FFFFFF;
  --bg-hover: var(--t-gray-8);
  --border-primary: var(--t-gray-7);
  --border-secondary: var(--t-gray-8);

  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont,
    'PingFang SC', 'Noto Sans SC',
    'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 36px;
  --font-size-6xl: 48px;
  --line-height-tight: 1.3;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-round: 999px;

  /* 阴影 */
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 2px 8px 0 rgba(0,0,0,0.06);
  --shadow-3: 0 4px 16px 0 rgba(0,0,0,0.08);
  --shadow-4: 0 8px 24px 0 rgba(0,0,0,0.10);

  /* 动效 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* 导航栏 */
  --navbar-height: 56px;
  --sidebar-width: 180px;
}
      

原型索引

全站 164 页静态 HTML 原型导航，按模块筛选浏览。链接在新标签页打开。