柔和 · 浅色
Lupine
白昼蓝调
洁净白底与鲜明蓝色,轻快、明晰,带一点粉紫的柔软。
放进一个真实界面里。
同一套 daisyUI 组件。切换风格会保留你输入的内容;以下操作仅作用于当前样张。
留给下一件作品
把好奇心,
做成可以体验的东西。
一个新想法
桌上的几件事
3 个想法| 作品 / 想法 | 状态 | 完成 |
|---|---|---|
| 观察一件喜欢的作品一段阅读 | 灵感 | |
| 做一个可玩的页面一个网站 | 制作中 | |
| 记下这次真实反馈一段阅读 | 已完成 |
完成情况 1 / 3
网页设计延伸
借的不只是颜色。
中等圆角、清楚按钮与充足间距,避免过密。
- 值得试的场景
- 学习产品、日历、日常工具。这是我们的适配判断,仍需真实内容验证。
- 字形与轮廓
- 无衬线标题与正文,强调清晰的层级。 12px 圆角、30px 内容间距。
- 迁移时先验证
- 拿一张已有页面替换主题,观察中文、长标题、表单与状态是否仍清楚;先验证,再扩大范围。
原始色板
取自该主题的 colors.toml。网页按钮文字另按黑白对比选择,组件形状与间距为本图鉴的延伸。
背景background
#fafafa文字foreground
#212121强调accent
#3264eb选中selection
#d0d0d0红red
#c900c4黄yellow
#026fde绿green
#4a2fd0青cyan
#0c67de蓝blue
#3264eb紫magenta
#8a4ad7回到 Omarchy 原作
查看主题源码 ↗以下是官方源码附带的桌面预览与壁纸,不是我们的网页样张,也不是本机运行截图。点击图片查看大图。

官方桌面预览 · 原文件 2560 × 1440
cherry blossom bokeh ↗
cherry blossom white ↗
pastel clouds ↗
elegant blue wave ↗
abstract wave ↗
omarchy ↗看看官方解锁画面

TAILWIND 4 + DAISYUI 5
把这套风格带走。
CSS 可直接接入 daisyUI;JSON 保留原始色板与我们的网页设计参数,方便迁移到其他组件库。
@import "tailwindcss";
@import "./lupine.css";
@plugin "daisyui" { themes: false; }
/* 使用 data-theme="omarchy-lupine" */
/* 圆角自动映射到组件;排版使用 --style-* 变量 */