Style
Dark luxury
Quiet expense: a deep dark ground, a refined serif, thin gold lines, slow fades and very little on screen.
See it live
Example: perfume house page for Maison Ombre, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.
Eau de parfum · Nº 7
What remains after dark.
Vetiver, black tea and a trace of amber. Worn close.
Discover Ombre LenteThe collection
Three scents, made slowly.
Nº 3
Cendre
Smoke, iris, cold stone
50 ml
Nº 7
Ombre Lente
Vetiver, black tea, amber
50 ml
Nº 11
Minuit Sel
Sea salt, fig leaf, cedar
50 ml
The house
“A perfume should be noticed only by someone standing very close.”
The house nose
The salon
Opens at dusk, by appointment.
One guest at a time. An hour, a chair, and every bottle we have made.
Request an eveningCopy the idea
Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.
The recipe
Dark luxury — style recipe: the same text the brief copies.
The idea
- Quiet expense: a deep dark ground, a refined serif, thin gold lines, slow fades and very little on screen.
Use it when
- Premium products, hotels, fragrance and fashion
- Evening and night-time brands
- Anything that should feel rare
Avoid it when
- The product is cheap, fast or everyday
- Pages carry lots of dense information
Principles
- A near-black background with warm undertones
- A refined, high-contrast serif in light weights
- Thin gold rules and outlines, never gold fills
- Very few words per screen, lots of darkness
- Wide letter-spacing on small uppercase labels
- Slow, deliberate motion
Colour
- Night (background): #0e0d0b
- Velvet (surface): #1a1815
- Ivory (text): #f3ede1
- Sand (muted): #b5ab98
- Antique gold (accent): #c9a45c
- Bronze line (border): #3a342a
- Text on background contrast: 16.66:1
Type
- Headings: Cormorant Garamond, weights 500, 600 — Large and light; italic for emphasis
- Body: Jost, weights 300, 400 — Thin geometric sans for labels and short text
- Scale: 12px, 15px, 18px, 28px, 48px, 84px
- An elegant serif with a thin sans; uppercase labels with wide tracking.
Spacing and shape
- Base unit: 8px
- Spacing steps: 8px, 24px, 48px, 96px, 160px
- Huge empty space; content sits in the middle of darkness.
- Corner radii: 0px
- Borders: 1 px antique-gold hairlines
- Shadows: None; light comes from contrast
Imagery and motion
- Imagery: Dark, low-key product shots or abstract light; never busy.
- Motion: Slow fades and long, eased reveals.
Do
- Say less, show more darkness
- Use gold only for lines and small details
- Space uppercase labels widely
Don't
- No bright colours
- No heavy or bold type
- No crowded layouts
Palette
- Nightbackground
#0e0d0b - Velvetsurface
#1a1815 - Ivorytext
#f3ede1 - Sandmuted
#b5ab98 - Antique goldaccent
#c9a45c - Bronze lineborder
#3a342a
Text on background: 16.66:1 — passes AA
Type
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Large and light; italic for emphasis
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Thin geometric sans for labels and short text
- 84pxThe quick brown fox jumps over the lazy dog
- 48pxThe quick brown fox jumps over the lazy dog
- 28pxThe quick brown fox jumps over the lazy dog
- 18pxThe quick brown fox jumps over the lazy dog
- 15pxThe quick brown fox jumps over the lazy dog
- 12pxThe quick brown fox jumps over the lazy dog
Spacing and shape
- 8px
- 24px
- 48px
- 96px
- 160px
Huge empty space; content sits in the middle of darkness.
- 0px
- Borders
- 1 px antique-gold hairlines
- Shadows
- None; light comes from contrast
Do and don't
Do
- Say less, show more darkness
- Use gold only for lines and small details
- Space uppercase labels widely
Don't
- No bright colours
- No heavy or bold type
- No crowded layouts