Luxury Frontend Design & Animation Playbook

Context & Vision

Apply this skill whenever building a client-facing mockup that needs to look expensive, exclusive, and visually flawless. Reject standard blue/purple gradients, generic boxes, and basic system fonts.

1. Typography Core Principles

• Headings must strictly use elegant, premium Serif fonts (e.g., "Cormorant Garamond", "Playfair Display").
• Body copy must use clean, highly readable Sans-serif fonts (e.g., "Inter", "Plus Jakarta Sans").
• Maintain extreme tracking (letter-spacing) on uppercase navigation or sub-headings.

2. Structural Space & Theme Layout

• Enforce extensive padding and margin rules. Use viewport widths (8vw to 10vw) for page margins.
• Color Palette constraints: Dominated by charcoal (#1F2833), deep matte black (#0B0C10), off-white backgrounds, and ultra-thin accent lines in muted gold (#D4AF37).

3. Micro-Interactions & Fluid Animations

• Every scrolling layout transition must fade in smoothly via cubic-bezier(0.16, 1, 0.3, 1).
• Elements should slowly translate upwards (translateY) by 15px as they appear.
• Images within a portfolio card grid layout must scale up gently (transform: scale(1.05)) upon hover inside a hidden overflow wrapper.