按钮
Soft rounded button with warm tones and gentle shadow inspired by Studio Ghibli
- 基础骨架
font-medium rounded-2xl transition-all duration-300- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
吉卜力风格组件配方
font-medium rounded-2xl transition-all duration-300 bg-[#8B7355] text-white shadow-[0_4px_12px_rgba(139,115,85,0.3)] hover:shadow-[0_6px_20px_rgba(139,115,85,0.4)] hover:brightness-110 active:scale-[0.97]卡片
Hand-drawn feel card with extra-rounded corners, soft shadow and warm background
- 基础骨架
bg-[#faf5eb] rounded-3xl transition-all duration-300- 变体
- 默认、强调、边框
- 状态
- hover
输入框
Rounded input with natural warm colors and soft focus glow
- 基础骨架
w-full rounded-xl border-2 border-[#8B7355]/30 bg-[#faf5eb] text-[#5a4a3a] placeholder:text-[#8B7355]/40 focus:outline-none transition-all duration-300- 变体
- 默认、填充
- 状态
- focus、disabled
森林面板
Panel with Ghibli forest/nature aesthetic and warm earthy tones
- 基础骨架
bg-[#faf5eb] rounded-[40%_60%_55%_45%/50%_45%_55%_50%] border-2 border-[#8B7355]/15 bg-[repeating-linear-gradient(0deg,transparent,transparent_20px,rgba(139,115,85,0.03)_20px,rgba(139,115,85,0.03)_21px)] transition-all duration-300- 变体
- 默认、魔法、秋日
- 状态
- hover
煤球徽章
Cute round badge inspired by Ghibli soot sprites
- 基础骨架
inline-flex items-center justify-center rounded-[45%_55%_50%_50%/55%_45%_50%_50%] border-2 border-dashed border-current/20 shadow-[inset_-3px_-3px_0_rgba(0,0,0,0.1),2px_2px_0_rgba(139,115,85,0.15)] outline outline-2 outline-offset-2 outline-current/10 transition-all duration-300- 变体
- 深色、灰尘、闪亮
- 状态
- hover
风之提示
Alert with gentle wind/breeze aesthetic inspired by Ghibli
- 基础骨架
rounded-[4px_20px_4px_20px] border-[3px] border-dashed border-[#8B7355]/25 p-4 md:p-5 transition-all duration-300- 变体
- 信息、温和、暴风
- 状态
- hover