Color
配色
九套色阶，每套十档
展开预览
Preface · 01
一套全场景设计系统，开箱即用。
LiuLiDS 提供从配色、字体、阴影到圆角、间距的全部设计 Token，以及 153 个原子组件的完整实现。所有 Token 以 CSS 变量形式给出，复制即可使用。
配色体系覆盖九套色阶，每套十档；阴影采用五档暖色立体双向系统；圆角克制在 4 到 12 像素之间。组件库含交互、表单、导航、布局、容器、浮层、反馈、展示、数据、排版、无障碍、印刷物料、社交媒体、图标十三个分类，面向网站界面、办公物料、印刷品、新媒体等全场景触点，每个组件均有独立预览页与 JSON 定义。
LiuLiDS
Foundations · 02
六类基础规范，构成设计系统的全部底层。
Type
字体
中文字体为主，三套字体族
展开预览
Shadow
阴影
五档暖色立体双向阴影
展开预览
Radius
圆角
克制不过分圆润
展开预览
Spacing
间距
8 步体系，4 像素基底
展开预览
Icons
图标
563 个 SVG 图标
展开预览
Numbers · 03
一组数字，概括整套系统。
9
色阶体系
Color Scales
153
组件
Components
5
阴影层级
Shadow Levels
563
SVG 图标
SVG Icons
Components · 04
八个核心组件，覆盖常用交互场景。
button
按钮 Button
立体按压效果，暖色双向阴影
展开预览
card
卡片 Card
羊皮纸般的表面，暖色多层阴影
展开预览
input
输入框 Input
雕刻式凹槽，铜色聚焦环
展开预览
modal
模态框 Modal
羊皮纸背景，黄铜描边容器
展开预览
navigation
导航 Navigation
克制衬线导航，黄金分隔线
展开预览
tag
标签 Tag
蜡封风格的胶囊徽章
展开预览
alert
告警 Alert
四个语义状态的暖色告警条
展开预览
toast
通知 Toast
温暖底色弹出通知
展开预览
Typography · 05
三套字体族，构建完整字号体系。
思源宋体
展示与标题
weights: 400-800
展开预览
思源黑体
正文
weights: 300-700
展开预览
思源等宽
代码与数字
weights: 400-700
展开预览
Contrast · 06
应用 LiuLiDS 前 vs 应用后。
Before · 应用前
排版工整，色彩合规，字号达标。不犯错，也没有可记忆之处。
展开预览
After · 应用后
暖色立体阴影，高对比衬线，黄金分隔线。每一帧画面，都是品牌的视觉呈现。
展开预览
Access · 07
两条路径，按需选择。
直接复制 CSS 文件到你的项目，或通过 AI Skill 让 AI Agent 按 LiuLiDS 规范生成界面。两种方式都无需构建步骤，复制即用。
$ git clone https://gitee.com/leehovan/liuli-design.git
方式一 · 直接复制 CSS
将 colors_and_type.css 与 components.css 引入到你的 HTML，所有 Token 以 CSS 变量形式提供，例如 var(--heritage-primary-500)。
方式二 · AI Skill 接入
将本仓库软链到你的 AI Agent 工具目录（Claude Code / Cursor / Codex CLI 等），重启工具后即可让 AI 按 LiuLiDS 规范生成界面。