按钮
Print-inspired button with bold flat colors and slight texture feel
- 基础骨架
font-mono font-bold uppercase tracking-wider rounded-sm transition-all duration-200 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
Risograph 印刷风组件配方
font-mono font-bold uppercase tracking-wider rounded-sm transition-all duration-200 ease-in-out bg-[#ff6b9d] text-white shadow-[3px_3px_0px_#2563eb] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0px_#2563eb] active:translate-x-[3px] active:translate-y-[3px] active:shadow-none卡片
Print-aesthetic card with overprint offset shadow and grain texture feel
- 基础骨架
bg-[#fffbf0] rounded-sm border-2 border-[#1a1a1a] shadow-[4px_4px_0px_#ff6b9d] transition-all duration-200 ease-in-out- 变体
- 默认、蓝色、绿色
- 状态
- hover
输入框
Print-style input with bold borders and monospace typography
- 基础骨架
w-full rounded-sm border-2 border-[#1a1a1a] bg-[#fffbf0] text-[#1a1a1a] placeholder:text-[#1a1a1a]/40 font-mono focus:outline-none transition-all duration-200 ease-in-out- 变体
- 默认、粉色
- 状态
- focus、disabled
叠印徽章
Badge with overprint/misregistration effect and riso color palette
- 基础骨架
inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider rounded-sm relative transition-all duration-200 ease-in-out- 变体
- 粉色、蓝色、橙色
- 状态
- hover
错版印刷卡片
Card with slight misprint offset aesthetic and riso texture
- 基础骨架
bg-[#fffbf0] rounded-sm border-2 border-[#1a1a1a] relative transition-all duration-200 ease-in-out- 变体
- 默认、重、细微
- 状态
- hover
噪点叠层
Container with riso noise/grain texture overlay
- 基础骨架
bg-[#fffbf0] rounded-sm border border-[#1a1a1a]/20 relative p-4 md:p-6 transition-all duration-200 ease-in-out- 变体
- 默认、密集、稀疏
- 状态
- 静态