ZLRomi-UI
v0.1 · MIT · 零构建

ZLRomi-UI 设计系统

两个 CSS 文件、一个 JS 文件,没有构建步骤。 颜色、字体、形状、组件、动效,全部收敛为 CSS 变量。

16颜色 token
2明暗主题
7展示区块
0构建步骤
01 / FEATURES

特性

基石

变量即规范

换主题只换一套 token,组件全部引用变量,不写死任何色值。

组件

开箱即用

按钮、标签、卡片、表单、开关,类名即文档:zui-btn、zui-card、zui-chip。

动效

收敛的动态

三档时长、两条曲线,prefers-reduced-motion 下全部静止。

02 / USAGE

上手

1
拿走三个文件 css/tokens.css css/components.css js/main.js
2
改种子色 --zui-primary: #4c46d1; /* 明暗两套,各改一处 */
3
用类名拼页面 <button class="zui-btn zui-btn-primary">确定</button>
03 / PREVIEW

组件一览

本页全部用 ZLRomi-UI 类名写成,右上角可切主题验证。

已发布 MIT