按钮
Scholarly button with serif typography, muted earth tones and warm academic aesthetic
- 基础骨架
font-serif tracking-wide rounded border transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
暗黑学院风组件配方
font-serif tracking-wide rounded border transition-all duration-300 ease-in-out bg-[#3d2b1f] text-[#f5f0e1] border-[#8b7355]/60 shadow-sm hover:shadow-md hover:border-[#8b7355] active:scale-95卡片
Warm scholarly card with parchment tones and subtle borders
- 基础骨架
bg-[#f5f0e1] rounded border border-[#8b7355]/30 shadow-sm transition-all duration-300 ease-in-out- 变体
- 默认、深色、墨绿
- 状态
- hover
输入框
Warm scholarly input with parchment background and muted border
- 基础骨架
w-full rounded border border-[#8b7355]/30 bg-[#f5f0e1]/80 text-[#3d2b1f] placeholder:text-[#8b7355]/50 font-serif focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、深色
- 状态
- focus、disabled
皮革面板
Panel styled to look like aged leather binding
- 基础骨架
relative bg-gradient-to-b from-[#5c4033] to-[#3d2b1f] border-2 border-[#8b7355]/50 rounded p-6 shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),inset_0_-2px_4px_rgba(0,0,0,0.2)]- 变体
- 默认、绿色
- 状态
- 静态
火漆封印徽章
Circular badge styled as a wax seal
- 基础骨架
inline-flex items-center justify-center w-14 h-14 rounded-full bg-[#8b1a1a] text-[#f5f0e1] font-serif font-bold shadow-[inset_0_2px_4px_rgba(255,255,255,0.2),inset_0_-2px_4px_rgba(0,0,0,0.3),0_4px_8px_rgba(0,0,0,0.3)]- 变体
- 默认
- 状态
- 静态
书脊标签
Tab styled like a book spine label
- 基础骨架
px-4 py-3 font-serif tracking-wide bg-[#3d2b1f] text-[#c9a227] border-4 transition-all duration-200- 变体
- 棕色、绿色、酒红
- 状态
- active、hover
花饰分隔线
Decorative divider with fleuron (typographic ornament)
- 基础骨架
relative w-full h-6 flex items-center justify-center- 变体
- 默认
- 状态
- 静态
阅读进度
Progress bar styled like a page marker bookmark
- 基础骨架
relative h-2 bg-[#3d2b1f]/20 rounded-full overflow-hidden- 变体
- 默认
- 状态
- 静态
手稿卡片
Card with lined paper effect like a manuscript page
- 基础骨架
relative bg-[#f5f0e1] p-6 border border-[#8b7355]/30 shadow-sm- 变体
- 默认
- 状态
- 静态
烛光效果
Decorative candle with animated glow effect
- 基础骨架
relative w-6 flex flex-col items-center- 变体
- 默认
- 状态
- 静态