---
name: luxury-frontend-design
description: Multi-disciplinary premium frontend skill used to build elegant, high-end websites with minimal layouts, serif typography, and fluid micro-animations.
---

# 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.