62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# 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 (5–8rem on landing). Body stays at 16–18px.
|
||
- **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**. 400–800ms 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.
|