本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库
返回配方目录
Wabi-Sabi

侘寂风组件配方

font-serif font-normal tracking-wide rounded-[12px_8px_14px_6px] transition-all duration-300 bg-[#8a9a7b] text-white hover:opacity-85 hover:shadow-sm active:scale-[0.98]
button

按钮

Imperfect, organic button with muted earth tones and subtle asymmetry

基础骨架
font-serif font-normal tracking-wide rounded-[12px_8px_14px_6px] transition-all duration-300
变体
主要、次要、大地
状态
hover、active、disabled
card

卡片

Organic card with imperfect edges, warm parchment tone and handmade feel

基础骨架
bg-[#f7f3ec] border border-[#e0d8cf] rounded-[16px_12px_18px_10px] overflow-hidden transition-all duration-300
变体
默认、陈旧、苔藓
状态
hover
input

输入框

Subtle input with organic feel, muted tones and imperfect warmth

基础骨架
w-full bg-[#f7f3ec] border border-[#d6cfc5] rounded-[10px_8px_12px_6px] font-serif text-[#3a3a3a] placeholder:text-[#b0a696] focus:outline-none transition-all duration-300
变体
默认、大地
状态
focus、disabled