Lumin UI/UX

现代、精致、沉浸式的视觉设计系统

色彩系统 (OKLCH)

Primary

Success

Warning

Error

Info

BG Primary

BG Secondary

BG Tertiary

BG Elevated

按钮 (Button)

默认按钮 主要按钮 次要按钮 危险按钮

小按钮 默认按钮 大按钮 禁用按钮 加载中

卡片 (Card) — Double-Bezel

标准卡片

使用 Double-Bezel 架构，外层边框壳 + 内核，营造精致的嵌套层次感。

轻量卡片

更轻量的变体，适合次要内容展示。

玻璃态效果

配合 backdrop-filter 创建毛玻璃效果，半透明背景色。

输入框 (Input)

示例输入框

开关 (Toggle)

徽章 (Badge)

Primary Success Warning Error Info Gradient

进度条 (Progress)

骨架屏 (Skeleton)

复选框 (Checkbox)

未选中 已选中 禁用 错误

单选框 (Radio)

选择一个选项

选项一 选项二 选项三

标签页 (Tabs)

概览 详情 设置

这里是概览内容。标签页组件用于在同一区域内切换不同内容视图。

提示 (Tooltip)

顶部 这是一个顶部提示

底部 这是一个底部提示

左侧 这是一个左侧提示

右侧 这是一个右侧提示

警告提示 (Alert)

操作成功

您的数据已成功保存，所有更改已生效。

注意

此操作可能会覆盖现有数据，请确认后继续。

错误

网络连接失败，请检查您的网络设置后重试。

提示

系统将在今晚 23:00 进行维护升级，届时服务将暂时不可用。

头像 (Avatar)

不同尺寸

S

M

L

XL

状态指示器

AB

CD

EF

表格 (Table)

名称	状态	角色	更新时间
张三	在线	管理员	2026-08-28
李四	离开	编辑者	2026-08-27
王五	离线	查看者	2026-08-26
赵六	在线	编辑者	2026-08-25
孙七	忙碌	管理员	2026-08-24

轻提示 (Toast)

操作成功

数据已保存

操作失败

请检查网络连接

动画 (Animations)

Fade

Slide

Scale

Spin

Pulse

Bounce

设计模式

Magnetic Hover

悬浮时微妙抬升，按下时回弹，创造物理交互感。点击这个卡片试试。

Button-in-Button

主按钮内部使用高光渐变，模拟玻璃质感。

查看效果

Double-Bezel

卡片使用 ::before 伪元素创建外层边框壳，营造精致的嵌套层次感。