SpectreSkills
← All skills
★

luxury-storefront-aesthetic

v1.0.0

Give a Shopify storefront an editorial, high-fashion feel inspired by houses like Louis Vuitton — restrained palette, generous negative space, refined typography, full-bleed imagery, and quiet motion. Trigger when the brief calls for luxury, editorial, premium, or fashion.

Shopifyshopifydesignluxuryeditorialcss
Install
npx @spectre-apps/skills add luxury-storefront-aesthetic

Writes .claude/skills/luxury-storefront-aesthetic/SKILL.md. Add --user to install globally.

What it does

Luxury storefront aesthetic

Luxury reads as confidence and restraint, not decoration. The product and the photography are the hero; the interface gets out of the way.

Space

  • Be generous. Section padding of clamp(4rem, 10vw, 9rem) top/bottom. Whitespace signals quality — never fill it.
  • Wide, calm grids: 2–3 products per row on desktop, large gutters (gap: clamp(1.5rem, 3vw, 3rem)). Let images breathe.
  • One idea per screen. Long, unhurried vertical rhythm beats dense pages.

Type

  • A refined serif or high-contrast display for headings (think Didone), a clean neutral sans for body and UI. One of each — no more.
  • Set headings large, tight, and light: font-weight: 300–400, letter-spacing: -0.01em, line-height: 1.05.
  • Use UPPERCASE with wide tracking (letter-spacing: 0.15em, font-size: 0.75rem) for eyebrows, nav, and buttons — the couture tell.
  • A fluid scale: --h1: clamp(2.5rem, 6vw, 5.5rem).

Color

  • Near-monochrome. Ink (#111) on paper (#f7f5f0 / off-white), one restrained accent at most. Avoid pure #000/#fff — warm them slightly.
  • No gradients, no drop shadows, no rounded 'card' chrome. Borders are hairline (1px solid rgba(0,0,0,.12)); corners are square or barely 2px.

Imagery

  • Full-bleed, edge-to-edge hero and lookbook imagery; let it run under a transparent header. Tall aspect ratios (4:5, 3:4) feel editorial.
  • Always responsive: {{ image | image_url: width: 1600 | image_tag: loading: 'lazy', sizes: '100vw' }}.
  • Prefer real negative space in art direction over overlaid text; when text overlays, keep it minimal and high-contrast.

Motion

  • Quiet and slow. Fades and 200–400ms ease transitions only; a subtle image zoom on hover (transform: scale(1.03)). No bounce, no parallax gimmicks. Reveal-on-scroll with a gentle 12px rise + fade.
  • Respect @media (prefers-reduced-motion: reduce).

Buttons & detail

  • Buttons are understated: text-forward, uppercase tracked, a thin underline or 1px outline that fills on hover. Avoid loud fills.
  • Wire these to theme settings so the whole feel is tunable, and apply them consistently across the sections built with the other Shopify skills.