fashion-styling

name	fashion-styling
description	Web/UI theming guide for a women's-fashion boutique **website** — a frontend design system applied phase by phase (typography, color, layout, components, animation, polish) for a modern editorial aesthetic. Use when styling or restyling a fashion storefront/landing UI: type scale, palette, grid/spacing, component look (cards, nav, product displays, CTAs), and motion. This is **CSS/UI theming, NOT shoot/wardrobe styling** — for model/garment styling on real shoots use `fashion-production` (styling phase). Pairs with `frontend-design` and `tailwind-design-system`.
metadata	{"priority":4}

Fashion Styling (web/UI boutique theme)

Scope: this is a frontend design-system / UI theme for a fashion boutique website — not shoot or wardrobe styling. For on-set model/garment styling, casting, and HMU, use the fashion-production hub (styling phase). For general UI work, see frontend-design (now includes the Tailwind design-system reference).

Phase-by-phase styling guide for a women's-fashion boutique website theme. Modern editorial aesthetic with elegant typography, geometric accents, and sophisticated animations.

Aesthetic Pillars

• Typography: Elegant serif for headings, clean sans for body
• Geometry: Accent shapes, diagonal lines, frame compositions
• Animation: Subtle reveals, hover states, scroll-triggered motion
• Palette: Muted neutrals with accent color pops
• White space: Generous, editorial-level spacing

Phase Application

Apply phases sequentially:

1. Typography — Set type scale, pairings, hierarchy
2. Color — Define palette, accents, backgrounds
3. Layout — Grid, spacing, responsive breakpoints
4. Components — Cards, navigation, product displays, CTAs
5. Animation — Entry, hover, scroll, loading states
6. Polish — Micro-interactions, edge cases, accessibility