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

日系清新风组件配方

font-sans font-light tracking-wide rounded-lg bg-transparent border border-[#d4d4cf]/40 transition-all duration-500 ease-in-out bg-[#64b5f6]/90 text-white border-[#64b5f6]/30 hover:border-[#64b5f6]/40 hover:text-[#64b5f6] active:scale-[0.99]
button

低语按钮

Hairline border button with generous padding, barely-visible hover state, and slow meditative transition. Embodies Ma restraint -- the button exists through whitespace, not weight

基础骨架
font-sans font-light tracking-wide rounded-lg bg-transparent border border-[#d4d4cf]/40 transition-all duration-500 ease-in-out
变体
主要、次要、薄荷、低语
状态
hover、active、disabled
card

呼吸卡片

Card with 0.5px warm gray hairline border, massive inner whitespace (p-10+), no shadows, and optional botanical SVG accent. Elements float in whitespace by their own presence

基础骨架
bg-white rounded-xl border border-[#d4d4cf]/30 transition-all duration-500 ease-in-out
变体
默认、薄荷、粉色、天蓝
状态
hover
input

底线输入框

Input with a complete hairline border, floating label style, transparent background, and ultra-subtle focus state

基础骨架
w-full pb-2 pt-0 bg-transparent border-0 border border-[#d4d4cf] rounded-none text-[#4a5568] placeholder:text-[#b0b8c4]/60 font-sans font-light focus:outline-none transition-all duration-500 ease-in-out
变体
默认、薄荷、粉色
状态
focus、disabled