Files
Starlight_Lancher/.agents/skills/oiloil-ui-ux-guide/references/style-families/premium-luxury.md

2.7 KiB
Raw Blame History

Style Family: premium-luxury

Signature: Restrained palette, elegant serifs, generous whitespace, subtle motion, products treated like objects. Reference products: Aesop, Hermès, Apple Music, Apple Newsroom, Linear (when in marketing mode), Loro Piana. Best for: hospitality, fashion / beauty, high-ticket SaaS marketing, art galleries, boutique e-commerce.

Token defaults

Color

  • Primary: muted, often not a vivid color — deep brown, ink black, forest, oxblood, brass.
  • Background: warm off-white, cream, sand, or pure white treated with intent.
  • Accents: minimal. A single underline color, a metallic touch.
  • Avoid in this family: saturated brand blues, neon accents, gradient backgrounds.

Typography

  • Heading: elegant serif or contrasted display — GT Sectra, Tiempos, Newsreader, Söhne Breit, Canela, EB Garamond.
  • Body: serif or refined sans — Söhne, Söhne Lebenslauf, Aktiv Grotesk, Inter at low weights, Tiempos Text.
  • Sizing: large display headlines (58rem on landing). Body stays at 1618px.
  • Letterspacing: slight negative tracking on display headings (-0.02 to -0.04em).

Radius

  • 0 / 2 px. Curves cheapen this family. Buttons rectangular. Cards rectangular.

Spacing

  • 8px base, scale 8 / 16 / 24 / 40 / 64 / 96.
  • Density: very spacious. Whitespace is the signal of value.

Shadow

  • None or extremely subtle (1px hairline borders preferred over shadow).

Motion

  • Slow and intentional. 400800ms easings. Fade with slight upward movement on scroll.
  • No bounces. No celebrations. Confident and quiet.

Anti-patterns within this family

  • Rounded buttons / pills.
  • Saturated CTA color competing with content.
  • "Get started for free" CTA copy. Premium copy is more reserved — "Discover", "Begin", or just the product name.
  • Multi-column dense layouts. One column, one focus.
  • Stock photography. Either custom or none.
  • Trustpilot badges, social proof bars, "as seen in" logo strips. (These belong in other families.)
  • Sale stickers, urgency timers, comparison tables.

Typical surfaces

This family does well on:

  • Brand homepages
  • Product detail pages (single SKU treatment)
  • About / heritage / craft pages
  • Editorial-style product stories

This family does poorly on:

  • Functional dashboards (the spacious style wastes screen)
  • Settings panels (reads as cold and unhelpful)
  • Forms with many fields (whitespace amplifies tedium)
  • Mobile checkout (vertical sprawl)

Notes

Premium is largely about what you remove. If the page feels busy, it's wrong. The most common failure mode is treating premium as "modern-minimal but with a serif" — the spacing, sizing, and motion are all different.