按钮
Bold coral action button with heavy weight, hover scale and shadow lift — the signature CTA of a creative agency site
- 基础骨架
font-bold rounded-none transition-all duration-300- 变体
- 主要、次要、线框
- 状态
- hover、active、disabled
创意工作室风组件配方
font-bold rounded-none transition-all duration-300 bg-[#FF6B6B] text-white hover:bg-[#E55A5A] hover:shadow-xl hover:-translate-y-0.5 active:scale-[0.98]卡片
Full-bleed project poster card with light background, image area, tag badges, bold title, and dramatic hover state
- 基础骨架
bg-[#F5F5F0] rounded-none overflow-hidden group transition-all duration-300- 变体
- 默认、精选
- 状态
- hover
输入框
Dark-background contact input with complete hairline border and coral focus frame — confident, minimal, inline with the dark studio aesthetic
- 基础骨架
w-full bg-[#333333] border-0 border-2 border-white/20 text-white placeholder:text-white/40 focus:outline-none transition-colors duration-300- 变体
- 默认、浅色
- 状态
- focus、disabled
导航
Fixed dark navigation bar with backdrop blur, coral hover links, and a CTA button — floats above the hero as a design statement
- 基础骨架
fixed top-0 w-full z-50 bg-[#1A1A1A]/95 backdrop-blur-sm border border-white/10 px-6 md:px-12- 变体
- 默认、透明
- 状态
- hover