按钮
Editorial button with hover-underline animation and uppercase tracking
- 基础骨架
font-sans tracking-[0.2em] uppercase text-xs relative pb-1 transition-colors duration-200- 变体
- 主要、次要、填充、幽灵
- 状态
- hover、active、disabled
编辑杂志风组件配方
font-sans tracking-[0.2em] uppercase text-xs relative pb-1 transition-colors duration-200 text-[#1C1C1C] after:content-[''] after:absolute after:w-full after:h-px after:bottom-0 after:left-0 after:bg-current after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:duration-500 hover:text-[#1C1C1C] active:opacity-60卡片
Editorial work list item with complete border and hover italic effect
- 基础骨架
bg-[#F9F8F6] border border-[#1C1C1C]/10 transition-colors duration-200- 变体
- 默认、精选、极简
- 状态
- hover
输入框
Editorial floating-label input with complete hairline border
- 基础骨架
w-full border border-[#1C1C1C]/20 bg-transparent rounded-none font-serif text-xl focus:outline-none transition-colors duration-200- 变体
- 默认、强调
- 状态
- focus、disabled
标题
Editorial serif heading with tight tracking and normal weight
- 基础骨架
font-serif font-normal tracking-tighter leading-[0.9] text-[#1C1C1C]- 变体
- 默认、柔和、斜体
- 状态
- 静态
标签
Editorial uppercase label with wide tracking
- 基础骨架
inline-block font-sans font-normal text-xs uppercase tracking-[0.2em]- 变体
- 默认、突出、柔和
- 状态
- 静态
导航栏
Fixed editorial navigation with frosted glass background
- 基础骨架
bg-[#F9F8F6]/90 backdrop-blur-sm border border-[#1C1C1C]/10 px-6 md:px-12 h-16 md:h-20- 变体
- 默认、透明
- 状态
- 静态