按钮
Outlined border button that inverts on hover for restrained luxury feel
- 基础骨架
font-light tracking-[0.2em] uppercase rounded-sm transition-all duration-300- 变体
- 描边、金色描边、填充
- 状态
- hover、active、disabled
奢品零售组件配方
font-light tracking-[0.2em] uppercase rounded-sm transition-all duration-300 border border-[#1a1a1a] text-[#1a1a1a] bg-transparent hover:bg-[#1a1a1a] hover:text-[#faf9f6] active:opacity-80卡片
Large-image product card with serif title and minimal info hierarchy
- 基础骨架
bg-[#faf9f6] rounded-sm transition-all duration-300- 变体
- 默认、边框
- 状态
- hover
输入框
Bottom-border input with transparent background for luxury forms
- 基础骨架
w-full bg-transparent border-0 border border-[#c9a96e] text-sm text-[#1a1a1a] placeholder:text-[#8b7355] focus:outline-none tracking-wide transition-colors duration-300- 变体
- 默认、深色
- 状态
- focus、disabled
标题
Serif heading with wide tracking for luxury brand feel
- 基础骨架
font-serif text-[#1a1a1a] leading-tight- 变体
- 默认、金色、浅色
- 状态
- 静态
徽章
Minimal luxury badge with wide letter spacing
- 基础骨架
inline-block font-light text-[10px] tracking-[0.2em] uppercase- 变体
- 默认、金色、深色
- 状态
- 静态
导航栏
Centered logo navigation with brand hierarchy
- 基础骨架
bg-[#faf9f6] border border-[#e8e0d4] px-6 md:px-8 py-5 md:py-6- 变体
- 默认、深色
- 状态
- 静态