Design style

Dark luxury

Quiet expense: a deep dark ground, a refined serif, thin gold lines, slow fades and very little on screen.

luxurious
calm
serious
airy
timeless
warm

See it live

Maison Ombre is a fictional perfume house page, written for this library to show the Dark luxurystyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Dark luxury recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# Dark luxury — style recipe

## 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 — passes AA

## Type
- Headings: Cormorant Garamond, weights 500 and 600 — Large and light; italic for emphasis
- Body: Jost, weights 300 and 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

Design in the "Dark luxury" style.
The idea: Quiet expense: a deep dark ground, a refined serif, thin gold lines, slow fades and very little on screen.
It suits: Premium products, hotels, fragrance and fashion.
It suits: Evening and night-time brands.
It suits: Anything that should feel rare.
Do not choose it when: The product is cheap, fast or everyday.
Do not choose it when: Pages carry lots of dense information.
Follow this rule: A near-black background with warm undertones.
Follow this rule: A refined, high-contrast serif in light weights.
Follow this rule: Thin gold rules and outlines, never gold fills.
Follow this rule: Very few words per screen, lots of darkness.
Follow this rule: Wide letter-spacing on small uppercase labels.
Follow this rule: Slow, deliberate motion.
Use #0e0d0b (Night) as the background colour.
Use #1a1815 (Velvet) as the surface colour.
Use #f3ede1 (Ivory) as the text colour.
Use #b5ab98 (Sand) as the muted colour.
Use #c9a45c (Antique gold) as the accent colour.
Use #3a342a (Bronze line) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 16.66:1.
Use Cormorant Garamond in weights 500 and 600 for headings: Large and light; italic for emphasis.
Use Jost in weights 300 and 400 for body text: Thin geometric sans for labels and short text.
Use only these type sizes: 12px, 15px, 18px, 28px, 48px, 84px.
Type: An elegant serif with a thin sans; uppercase labels with wide tracking.
Space things on a 8px base with the steps 8px, 24px, 48px, 96px, 160px.
Spacing: Huge empty space; content sits in the middle of darkness.
Use corner radii of 0px.
Borders: 1 px antique-gold hairlines.
Shadows: None; light comes from contrast.
Imagery: Dark, low-key product shots or abstract light; never busy.
Motion: Slow fades and long, eased reveals.
Do: Say less, show more darkness.
Do: Use gold only for lines and small details.
Do: Space uppercase labels widely.
Avoid: bright colours.
Avoid: heavy or bold type.
Avoid: crowded layouts.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #0e0d0b;
  --color-surface: #1a1815;
  --color-text: #f3ede1;
  --color-muted: #b5ab98;
  --color-accent: #c9a45c;
  --color-border: #3a342a;
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Jost", sans-serif;
  --space-1: 8px;
  --space-2: 24px;
  --space-3: 48px;
  --space-4: 96px;
  --space-5: 160px;
  --radius-1: 0px;
}

Download brief (.md)Download tokens (.css)

The recipe

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 — passes AA

Type

Headings: Cormorant Garamond, weights 500 and 600 — Large and light; italic for emphasis
Body: Jost, weights 300 and 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

Headings · Cormorant Garamond · 500, 600

The quick brown fox jumps over the lazy dog

Large and light; italic for emphasis

Body · Jost · 300, 400

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

An elegant serif with a thin sans; uppercase labels with wide tracking.

Spacing and shape

Spacing on a 8px base

8px
24px
48px
96px
160px

Huge empty space; content sits in the middle of darkness.

Corners, borders and shadows

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

Dark luxury

See it live

Scent for the hours after dark.

Three perfumes, no more

Cendre

Lune d’Encre

Figue Nocturne

How we make them

Visit by appointment

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't