跳到主要内容
Aimer Li
Living Styleguide

设计系统.

本站全部 Design Token 与组件的实渲染展示。色块直接引用 CSS 变量，右上角切换主题即可对照两套色板；唯一定义源是 portfolio-v2.css。

01色彩Color Tokensoklch · L C H
02字体Typography
SansInter Variable → PingFang SC → Source Han Sans SC
MonoJetBrains Mono Variable → SF Mono → ui-monospace
Displayclamp(38px, 6.6vw, 64px) · 700 · -0.02em · lh 1.12
Welcome.
H-Sectionclamp(28px, 4.4vw, 44px) · 700 · -0.01em · lh 1.24
你好，我是 Aimer Li
H320–23px · 700 · -0.02em
设计工程化
Leadclamp(16.5px, 2vw, 19px) · lh 1.7 · text-2
把体验问题转化成可落地的工程方案。
Body16px · lh 1.74 · text
拥有 7 年以上 UI/UX 设计经验，参与 30 多个 B 端项目，涵盖企业管理、数据平台与智慧水利。
Mono Label11px · 0.18em · uppercase · JetBrains Mono · 仅限区块级引导（页头 / section 头 / 分组标题），每区块至多一组
Design Engineering
Mono SM12px · 0.05em · JetBrains Mono · 元数据与卡片内小字（日期 / 页码 / 图注 / 卡片 kicker）
2024.1 - 2025.3 · CASE 01
03间距与圆角Spacing & Radius
圆角Radius Scale
3pxbadge
4pxcard / --radius
5pxbutton
6px--radius-lg
100pxchip / pill
容器与节奏Container & Rhythm
  • --w-page1120px · 页面容器
  • --w-prose780px · 文章正文
  • 首页区块clamp(72px, 10.5vw, 136px)
  • 案例区块clamp(44px, 6.5vw, 78px)
  • --gutterclamp(24px, 5vw, 64px)
04动效Motionprefers-reduced-motion 全部降级
  • --ease-outcubic-bezier(0.22, 1, 0.36, 1)
  • 按压反馈0.15s · scale(0.96–0.98)
  • 颜色/描边0.2s ease
  • 悬停位移0.25–0.35s · translateY(-2~-4px)
  • 入场 reveal0.65s · 16px 上移 · animation
  • 阅读进度CSS scroll-driven（零 JS 监听）
01
入场 · 悬停 · 按压

悬停看位移与投影，按下看压感，点右下按钮重播入场。

05全局组件Primitives
徽章与标签.badge / .chip
EXPERIMENTALWORK IN PROGRESS设计系统AI Agent

badge 用于状态与分类（3px 角）;chip 用于关键词（全圆角）。

区块头.section-head
0X区块名SECTION LABEL右侧插槽

编号 + 中文名 + 英文 mono 标签，ds 分幕签名，全站统一。

媒体占位MediaSlot.astro
▢ 示例占位Figma 000:0000 · 待替换

斜纹底 + 节点标注；替换真实图片时换成 <img> 即可。

深色带区.band / --band-*
BAND · 明暗节奏
05

带区内使用独立的 band token 族，两种主题下都保持深色。

用于案例页的关键幕（目标/Loop/转场）,源自 ds 原型深色帧。

复制按钮[data-copy]

点击写入剪贴板，标签短暂变为「已复制」，aria-live 播报。

正文排版.prose

三级标题

正文 16px / 1.9,内联 code 样式 与 链接下划线。

引用块：左侧强调线 + 次级填充底。
  • 列表圆点使用 text-3
  • 图片自带描边与圆角，失效图降级为斜纹占位

承载 105 篇博客正文（含 2015 年起的原始 HTML 存量文章）。