Watercolor Art

水彩艺术风组件配方

组件变体

font-serif font-medium tracking-wide rounded-2xl transition-all duration-500 ease-in-out bg-[#d4a0a0] text-[#5a3e3e] shadow-[0_4px_20px_rgba(212,160,160,0.25),inset_0_1px_0_rgba(255,255,255,0.15)] hover:scale-[1.02] hover:shadow-[0_6px_28px_rgba(212,160,160,0.30)] active:scale-[0.98]

button

按钮

Pigment-fill button with radial gradient simulating watercolor pooling, soft blur shadows, and organic rounded corners

基础骨架: font-serif font-medium tracking-wide rounded-2xl transition-all duration-500 ease-in-out
变体: 主要、次要、轮廓、鼠尾草
状态: hover、active、disabled

card

卡片

Paper-textured card with organic rounded corners, watercolor wash hover effect, and bleeding-edge shadows

基础骨架: bg-[#faf6f0]/80 rounded-3xl border border-[#d4a0a0]/15 shadow-[0_2px_20px_rgba(212,160,160,0.10)] transition-all duration-500 ease-in-out
变体: 默认、玫瑰、天蓝、鼠尾草
状态: hover

input

输入框

Delicate watercolor-style input with paper texture, organic corners, and soft watercolor wash focus state

基础骨架: w-full rounded-2xl border border-[#d4a0a0]/20 bg-[#faf6f0] text-[#5a3e3e] placeholder:text-[#d4a0a0]/35 font-serif focus:outline-none transition-all duration-500 ease-in-out
变体: 默认、天蓝、鼠尾草
状态: focus、disabled

wetWashPanel

湿水彩面板

Panel with wet watercolor wash background and organic edges

基础骨架: bg-[#faf6f0]/80 rounded-[30%_70%_60%_40%/50%_40%_60%_50%] border border-[#d4a0a0]/15 backdrop-blur-sm transition-all duration-500 ease-in-out
变体: 默认、暖色、冷色
状态: hover

splatterBadge

泼墨徽章

Badge with paint splatter shape and watercolor coloring

基础骨架: inline-flex items-center justify-center font-serif font-medium rounded-[40%_60%_50%_50%/50%_40%_60%_50%] transition-all duration-500 ease-in-out
变体: 玫瑰、天蓝、鼠尾草
状态: hover

bleedDivider

水彩晕染分隔线

Divider with watercolor bleed/spread effect

基础骨架: w-full h-1 my-6 rounded-full transition-all duration-500 ease-in-out
变体: 默认、暖色、冷色
状态: 静态