Q · 17 / 26

Q — Quiet luxury

Restraint as the expensive part.

The style

Expensive, and never says so.

In 1899 Thorstein Veblen named conspicuous consumption: buying things so that others can see you buy them. Quiet luxury is the other half of that idea. The cloth is the best there is, the cut is exact, and the logo is missing.

The name spread in 2023, helped by the last season of Succession and the plain knitwear of houses such as Loro Piana, Brunello Cucinelli and The Row. The habit is much older. It is how old tailoring houses have always sold: by appointment, in few words.

On a screen it means oat and ivory instead of white, one dark ink, light serif type set small, labels in spaced capitals, square edges, and a great deal of space. It also means leaving out every sales trick on the page.

In use

One coat, sold quietly.

Halden, a fashion house, sells one cashmere coat on the desktop. Change the colour and the view, choose a size, read about the cloth and add it to the bag. The bag in the corner is the only thing that changes.

  • One thing at a timeA coat, its cloth and its sizes. No banners, no countdown, no other coats until you ask.
  • The cloth before the priceWhere the cashmere comes from and how it was woven is written out. The price is set small, once.
  • A discreet bagAdding to the bag changes one word in the corner. Nothing flies across the screen.
HALDENBag items:(0)
Front · Camel
Women · Coats

The wrap coat

Double-faced cashmere€2,450
Colour — Camel
Size
Add a monogramComplimentary delivery and returns.

  • Double-faced cashmere, 620 g/m², woven in Biella from Mongolian fibre. Two layers joined by hand, so the coat has no lining and no seams show.

The kit

Every part, every state.

The parts that page is built from: ivory panels, one espresso button, fields that are only a rule underneath, labels in spaced capitals. The rows of states hold still for comparison; everything else works.

Button

One solid button per screen; the rest are lines

Text field

Only for this appointment.

Select

Two to three days, duties included.

Switch, checkbox, radio

Wrap in tissue and a cotton bag
Delivery

Slider

0 cmAs made.

Progress

Your coat, being madeCut

Segments and tabs

A wrap coat with no buttons, held by its belt. Cut long, to mid-calf.

List rows

162024A 1.25px stroke at every size, square ends

Card and loading

The wrap coatCharcoal · €2,450
The wrap coatOatmeal · €2,450
No frame, no shadow: the picture is the cardThe skeleton fades slowly; it never shimmersPrice after the name, the same size

Toast

Modal

An oat veil, not a dark scrim

Steps

  1. 01 Bag, done
  2. 02 Delivery
  3. 03 Payment
  4. 04 Done

Badges and avatars

New seasonMade to orderLast oneSold out
Your advisorsOne name, one number, always
Badges are words in capitals, never colour alone
Signature

Initials, and less of everything.

Two tools. A monogram press: type up to three initials, choose a finish and a leather, and see them pressed in. Then a loud product card and a slider marked “less”, which takes away one sales trick at a time until only the coat is left.

E·H
MonogramThree letters, pressed by hand
Up to three letters, A to Z.
Finish
Leather — Tan

RestraintTake things away until it’s expensive
0 of 8 removed
  1. 1The logo, as wallpaper
  2. 2The “free shipping” ribbon
  3. 3The countdown
  4. 4“23 people are looking”
  5. 5“Only 2 left!”
  6. 6Five stars and a count
  7. 7The sale badge and old price
  8. 8The second button

Drag toward less. Each step takes one thing away.

The quiet card has fewer parts, not smaller ones
Tokens

The system, in numbers.

Nine colours with their contrast, two typefaces, a wide spacing scale, square edges and three speeds. Copy them as custom properties, with the label, the button and the field.

Colour
  • --oat #ece6dcOat: the page
  • --ivory #f7f4eeIvory: panels and the frame
  • --sand #ddd4c6Sand: wells, skeletons, off
  • --rule #c9bfaeRules, never for type
  • --espresso #2a211bEspresso: type and the button, 12.7:1
  • --ink-2 #6a5f55Second ink, 5.0:1
  • --bronze #74563aBronze: prices and notes, 5.4:1
  • --camel #a8865cCamel: cloth and swatches only
  • --error #8a3b2cError, said quietly, 6.2:1
Type
  • Double-faced cashmereCormorant Garamond 300 · headings
  • Double-faced cashmereCormorant Garamond 300 italic · asides
  • Double-faced cashmereJost 400 · text
  • Double-faced cashmereJost 500 · labels, spaced capitals
Space, in pixels
  • 4
  • 8
  • 12
  • 16
  • 24
  • 40
  • 64
  • 104
Edges
  • Panel 0
  • Field 0
  • Button 0
  • Switch full
Motion
  • Fade400ms easePictures, toasts, the bag
  • Turn250msSwitches, buttons, fields
  • Settle800msPanels and the page
:root {
  /* Ground and ink */
  --oat: #ece6dc;
  --ivory: #f7f4ee;
  --sand: #ddd4c6;
  --rule: #c9bfae;
  --espresso: #2a211b;
  --ink-2: #6a5f55;

  /* From the cloth */
  --bronze: #74563a;
  --camel: #a8865c;
  --error: #8a3b2c;

  /* Space: wide, and wider */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 104px;

  /* Edges: square, a single rule */
  --hairline: 1px solid var(--rule);
  --radius: 0;

  /* Motion: a fade, never a bounce */
  --fade: 400ms ease;
  --turn: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --settle: 800ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-text: 'Jost', system-ui, sans-serif;
}

/* A label: small, spaced capitals */
.caps {
  font: 500 11px/1.4 var(--font-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The one solid thing on the page */
.button {
  min-height: 52px;
  padding: 0 32px;
  border-radius: var(--radius);
  background: var(--espresso);
  color: var(--ivory);
  font: 500 11px var(--font-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* A field is a rule underneath */
.field {
  border: 0;
  border-bottom: var(--hairline);
  background: transparent;
}
.field:focus-visible {
  outline: none;
  border-bottom-color: var(--espresso);
  box-shadow: 0 1px 0 var(--espresso);
}

Do

  • Let the material do the talking. Name the cloth, the mill and the weight before anything is sold.
  • Use one solid button per screen. Everything else is a rule, an underline or space.
  • Set type light and small, and give it room. Confidence reads as size held back.
  • Never hurry the visitor. No countdowns, no stock alarms, no one else “looking at this”.

Don’t

  • Don’t shout the price

    A red banner and a crossed-out price turn a coat into a clearance rail.

  • Don’t gild it

    Gold gradients and glow say expensive the way a stranger says it. The cloth should say it.

  • Don’t wear the logo

    A wordmark repeated across the page is the opposite of quiet. Show it once, small.

In the wild

Where the style shows up outside this page.

  • Loro Piana · since 1924

    Loro Piana

    Cloth that does the talking: no logo, the price in the fibre.
  • Jil Sander · since 1968

    Jil Sander

    Exact cuts in plain colour, nothing added for show.
  • Mary-Kate and Ashley Olsen · since 2006

    The Row

    Fabric, fit and silence: the label is almost never visible.
  • HBO · 2018–2023

    Succession

    Money shown by what is left off: plain caps, plain knits, no marks.