按钮
Earthy terracotta action button with warm shadow, rounded-lg, and a clay-like hover deepen
- 基础骨架
font-medium rounded-lg transition-all duration-200- 变体
- 主要、次要、幽灵
- 状态
- hover、active、disabled
暖感有机风组件配方
font-medium rounded-lg transition-all duration-200 bg-[#C86A4A] text-white shadow-[0_2px_12px_-3px_rgba(200,106,74,0.3)] hover:bg-[#B55A3A] hover:translate-y-[-1px] active:bg-[#A04A2A] active:scale-[0.98]卡片
Warm sand-toned card with soft clay shadow, warm hairline border, and organic decorative dot accent
- 基础骨架
bg-[#E8DED1] rounded-lg shadow-[0_4px_20px_-4px_rgba(45,42,36,0.10)] transition-all duration-200- 变体
- 默认、凸起、黏土
- 状态
- hover
输入框
Warm gray input with clay border and a terracotta-tinted focus ring, like writing on handmade paper
- 基础骨架
w-full bg-[#E8DED1]/40 border border-[#D4BFA5] rounded-lg font-sans text-[#2D2A24] placeholder:text-[#2D2A24]/40 focus:outline-none transition-all duration-200- 变体
- 默认、搜索
- 状态
- focus、disabled
分隔线
Organic decorative divider with warm hairline and terracotta or olive dots, like a natural section break in a sketchbook
- 基础骨架
flex items-center justify-center gap-2 w-full- 变体
- 陶土色、橄榄绿、双点
- 状态
- 静态