Stats
Actions
Tags
From awesome-frontend
The LUXURY / refined / "quiet luxury" design lens — restrained, elegant, high-end interfaces that signal quality through calm, space, and craft rather than loudness. Use when the user wants this look or names it: "luxury", "premium", "high-end", "elegant", "refined", "sophisticated", "quiet luxury", "boutique", "editorial-elegant", "apothecary/atelier", or is designing for beauty, fashion, fine food/wine, hospitality, jewelry, architecture, or a premium brand. This is a STYLE LENS — apply on top of the awesome-frontend-design method. Anchored in a teardown of aesop.com. Core feel: a warm restrained palette, a refined typeface (high-contrast serif OR a quiet precise grotesque), small understated type, vast calm space, slow elegant pacing, and subtle motion.
How this skill is triggered — by the user, by Claude, or both
Slash command
/awesome-frontend:luxury-web-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Luxury on the web is **restraint, not ornament**. It signals quality the way a
Luxury on the web is restraint, not ornament. It signals quality the way a boutique does — through calm, space, materials, and precision, never through more. "Quiet luxury" especially: nothing shouts; the confidence is in how little is done and how perfectly it's done. The mistake is equating luxury with gold gradients and big serifs; real high-end is usually understated.
Apply on top of the awesome-frontend-design method. Worked example with tokens:
references/case-study-aesop.md (+ aesop.png).
#FFFEF2), soft near-black text (#333, not
pure #000), and one muted, sophisticated accent (terracotta, olive, oxblood,
ink — Aesop's brick #CA432F). Desaturated and tasteful, never neon.border-radius: 0 or a tiny consistent radius.Slow, soft, and sparse. Long, gentle fades and eases (slightly longer durations, smooth/quiet easing); subtle image reveals and cross-fades; refined hover states (a quiet underline, a soft fade). No bounce, no snap, no busy choreography. The pacing itself reads as elegant. (Implementation: awesome-react- animations; honor reduced motion.)
Do: use a warm neutral palette + one muted accent; keep type refined and small; leave vast calm space; let beautiful imagery and perfect alignment carry it; move slowly and subtly. Don't: equate luxury with big gold serifs, gradients, glow, or ornament; use pure stark white/black; crowd the layout; add bouncy or snappy motion; shout. Luxury is what you leave out — restraint and precision are the whole game.
references/case-study-aesop.md — tokens + teardown, with aesop.png.references/more-references.md — three more teardowns (The Row, Le Labo,
Hermès) covering stark vs. warm-atmospheric luxury, with tokens + screenshots.npx claudepluginhub gcomartins/myfskills --plugin awesome-frontendCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.