Liuli Design System

琉璃质感设计

温意质感 · 流光幻彩 · 清岚自然
一套融合东方琉璃美学的跨格式视觉设计系统

11 种格式5 色体系可变字体MIT 协议

Design Philosophy

三大设计基因

琉璃(colored glaze)的色彩从内部渗透而出,表面有釉面光泽,边缘有折射虹光——璃DS将这种材质美学注入数字界面。

温意质感

Warmth

温暖的触感、人文排版。衬线标题、金棕暖色调、纸质肌理底纹,让界面散发东方匠人的温度。

流光幻彩

Luminance

鲜活的色彩活力、流动光影。橙色系主色调、渐变光泽横线、弹性动效,光影在琉璃表面流转。

清岚自然

Nature

自然的配色取法、圆润通透。青绿薰衣草蜜桃色、圆润组件、通透毛玻璃,呼吸感留白。

Five Characteristics

琉璃质感五大特征

釉面光泽

Glaze Sheen

卡片顶部 45% 白色渐变高光,模拟釉面反射。

色彩内渗

Inner Color Bleed

极浅马卡龙底色 alpha 0.03–0.06 + 毛玻璃模糊。

边缘折光

Edge Iridescence

白色边框 + 彩色发光阴影,hover 时发光增强。

交互变色

Color Shift

hover 时底色加深 ×1.8、光泽增强、轻微上浮。

流光扫过

Light Sweep

hover 时白光从左到右扫过卡片表面。

Color System

五色体系与马卡龙色板

每张卡片只使用一种 accent 变体,不混用。马卡龙色极浅 alpha 0.03–0.06,宁可看不见也不要太浓。

暖橙 Warm

#FF6D3B

青绿 Mint

#2EC4B6

靛蓝 Sky

#5C6BC0

酒红 Wine

#9E2A2B

粉紫 Bloom

#FB7299

极浅马卡龙色板

alpha 0.04–0.06

玫瑰 Rose

蜜桃 Peach

奶油 Cream

薄荷 Mint

天空 Sky

薰衣草 Lavender

丁香 Lilac

香草 Vanilla

Typography

LiuliDS 定制可变字体

基于 Noto Serif SC 系统性变换而来,注入三大设计基因。单一可变字体文件包含 wght 300–700 字重轴,30928 字形覆盖。

LiuliDS

琉璃之美

色彩从内部渗透而出,表面有釉面光泽

璃DS

Light 300

璃DS

Regular 400

璃DS

Medium 500

璃DS

Bold 700

清岚自然

转角圆化,尖角→二次贝塞尔曲线,笔画圆润不锋利

温意质感

SemiBold 基底 + 字宽扩展 2.5%,笔画有厚度感

流光幻彩

字面微扩 + 侧边距+20px + 行距+60px,通透呼吸感

Coverage

11 种格式全覆盖

从网页到海报,从文档到矢量图,璃DS 可将任何内容转化为统一的视觉语言。

网页Next.js
独立HTMLSingle File
PDFReportLab
PPTpython-pptx
Worddocx
Excelopenpyxl
微信公众号Inline CSS
邮件EDMTable Layout
社交海报Playwright
MarkdownStructure
SVG矢量Filter FX

Output Tiers

三档输出模式

不同格式的复刻深度不同——Lite 保留核心,Standard 烘焙质感,Premium 全特效呈现。

Lite

Lite

Markdown / SVG

保留:配色体系 + 字体层级 + 内容节奏

省略:马卡龙底色 / 渐变线 / 圆角 / 毛玻璃 / 极光 / 动效

Standard

Standard

PDF / PPT / Word / 公众号 / 邮件 / 表格

保留:配色 + 字体 + 马卡龙底色(烘焙) + 渐变线(纯色) + 圆角

省略:极光 / 3D tilt / 流光扫过 / 琉璃釉面

Premium

Premium

网页 / 海报 / 产品落地页

保留:全部特效 — 极光 + 流光 + 釉面 + 3D tilt + 噪点

省略:无 — 全部实现

Quick Start

四步上手

STEP 01

阅读 SKILL.md

STEP 02

选择输出格式

STEP 03

按精确数值执行

STEP 04

交付前自检

Open Source

获取璃DS Skill

设计规范 MIT License,定制字体 SIL Open Font License 1.1。可自由使用、修改、分发。