返回配方目录
Sketch Style

铅笔手绘风组件配方

font-semibold border-2 border-dashed border-[#2c2c2c] rounded-sm transition-opacity duration-200 bg-[#2c2c2c] text-[#f5f0e8] shadow-[2px_2px_0px_rgba(44,44,44,0.3)] hover:opacity-90 active:opacity-80
button

按钮

Hand-drawn feel button with dashed borders, pencil tones and subtle shadows

基础骨架
font-semibold border-2 border-dashed border-[#2c2c2c] rounded-sm transition-opacity duration-200
变体
主要、次要、轮廓
状态
hover、active、disabled
card

卡片

Paper-like card with dashed borders and pencil-drawn aesthetic

基础骨架
bg-[#f5f0e8] border-2 border-dashed border-[#2c2c2c] rounded-sm shadow-[2px_2px_0px_rgba(44,44,44,0.3)] transition-opacity duration-200
变体
默认、撕纸效果、笔记本
状态
hover
input

输入框

Pencil-sketch input with dashed border and warm paper background

基础骨架
w-full border-2 border-dashed border-[#2c2c2c] rounded-sm bg-[#faf5ed] font-sans text-[#2c2c2c] placeholder:text-[#8a8a8a] focus:outline-none transition-all duration-200
变体
默认、下划线
状态
focus、disabled