Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
ÉlégantMinimalisteClairMonochrome
Vorschau

Quiet Luxury Design Reference

Overview

Quiet Luxury is a design philosophy rooted in the principle that true refinement does not announce itself. Originating from the "stealth wealth" movement in fashion — championed by houses such as Loro Piana, The Row, Brunello Cucinelli, and Bottega Veneta — the aesthetic rejects conspicuous branding and visual excess in favor of intrinsic quality, considered restraint, and materials that speak for themselves. In web and UI design, Quiet Luxury translates into interfaces that feel effortlessly expensive: muted neutral palettes drawn from cashmere, stone, and parchment; whisper-thin typography set in refined serifs and understated sans-serifs; and generous negative space that allows every element room to breathe. The experience is one of calm confidence, where the absence of decoration itself becomes the luxury.

Where maximalist trends rely on saturated color and bold graphic interventions, Quiet Luxury achieves impact through what it omits. Backgrounds are warm ivories, soft taupes, and cool stone grays. Borders dissolve into near-invisible hairlines. Buttons forego gradients and drop-shadows for flat, tonal surfaces with the subtlest hover shifts. Typography favors light and regular weights with wide letter-spacing, evoking the restrained elegance of engraved stationery or the embossed cover of a leather-bound volume. Imagery, when present, is muted and editorial — macro textures of linen, brushed metal, raw silk — never loud, never competing with the content it supports.

Functionally, Quiet Luxury design prioritizes legibility, intuitive hierarchy, and considered pacing. Content sections are separated by generous vertical rhythm rather than heavy dividers. Navigation is minimal and confident, trusting the user to find what they need without visual hand-holding. Interactions — hover states, page transitions, scroll reveals — are slow, smooth, and almost imperceptible, as though the interface is moving at the pace of a deep, unhurried breath. The cumulative effect is a digital space that feels like stepping into a gallery, a private library, or the lobby of an unmarked members' club: you know it is expensive because nothing is trying to prove that it is. Research from the Boston Consulting Group suggests brands employing this kind of minimalist luxury strategy experience up to 18% higher customer retention than logo-heavy counterparts, and the Nielsen Norman Group notes that considered use of whitespace can improve reading comprehension by up to 20%.

Visual Characteristics

Core Design Traits

  • Muted neutral palette: Warm ivories, soft taupes, cool stone grays, and chalky off-whites form the dominant visual register — colors drawn from natural materials like cashmere, limestone, raw linen, and unbleached parchment
  • Whisper-weight typography: Heading fonts set at light (300) or regular (400) weights with generous letter-spacing; the type itself feels like it could blow away, yet remains perfectly legible
  • Restrained accent use: Color accents appear sparingly — a single thin gold rule, a muted olive button, a tobacco-brown link underline — and never compete for attention
  • Premium material textures: Subtle background textures referencing linen weave, soft-grain leather, brushed brass, or matte paper give surfaces tactile depth without visual noise
  • Invisible borders and hairline details: Dividers and card edges are near-transparent, using 0.5-1px lines at very low opacity, or replaced entirely by spatial separation
  • Editorial-quality imagery: Photography is desaturated, tightly cropped, and compositionally quiet — macro shots of fabric grain, architectural details, or still-life arrangements in natural light
  • Generous negative space: White space is treated as the primary design element; sections breathe with 80-140px vertical gaps, and content columns are narrow (600-780px)
  • Slow, deliberate motion: Transitions use long durations (400-800ms) and gentle easing curves; hover effects are tonal shifts rather than spatial movements
  • Monochromatic depth: Rather than contrasting colors, the palette builds depth through subtle value shifts within a single hue family — three or four shades of warm gray, for example
  • Understated iconography: Icons, when used, are thin-stroked (1-1.5px), geometrically simple, and tonally integrated rather than colored or filled
  • Considered typographic hierarchy: Size differences between heading levels are modest (steps of 0.3-0.5rem rather than dramatic jumps), creating a hierarchy that whispers rather than shouts
  • Absence of ornamentation: No gradients, no patterns, no decorative flourishes — every element earns its place through function, and beauty emerges from proportion and spacing alone

Design Principles

  • Let restraint be the primary design decision: what you choose not to include matters more than what you add
  • Treat negative space as the most valuable material in the composition — it is the cashmere of the layout
  • Build hierarchy through spacing and weight rather than color contrast or size extremes
  • Every interaction should feel unhurried; speed communicates anxiety, slowness communicates confidence
  • Use texture and material references to create warmth without resorting to decoration
  • Limit the palette to two or three primary tones and vary only by value, not by hue
  • Trust the user's intelligence — reduce explanatory UI, navigation labels, and visual hand-holding to the minimum
  • Design as though every pixel will be printed on heavyweight cotton stock: if it would look cheap on paper, it looks cheap on screen

Color Palette

The Quiet Luxury palette draws from the surfaces of old-money interiors: undyed cashmere, Carrara marble, aged brass, saddle leather, and raw Belgian linen. Neutrals dominate completely, with warmth introduced through ivory and taupe rather than color. The single muted accent — a dusty olive or a deep tobacco — appears only at moments of intentional emphasis. Dark tones are never pure black; they carry warmth (charcoal-brown) or coolness (slate) to avoid harshness. The overall impression is of colors that have been lived in, softened by time and light, and never manufactured to attract attention.

Swatch Hex Role / Usage
Parchment Ivory #F9F6F0 Primary page background, main canvas
Warm Linen #F3EDE4 Secondary background, alternate sections
Cashmere Cream #EDE7DB Card surfaces, panel fills
Stone Taupe #D5CEC4 Subtle borders, divider lines, disabled states
Brushed Sand #C6BDB0 Input field backgrounds, muted UI elements
Driftwood Gray #A69E93 Placeholder text, captions, metadata
Pewter #8A827A Secondary body text, subtitles
Charcoal Linen #5C564E Primary body text
Espresso Slate #3B3631 Headings, primary emphasis text
Deep Umber #2A2520 Maximum contrast text, footer backgrounds
Saddle Leather #8C7056 Warm accent, links, interactive highlights
Dusty Olive #7A7D5F Secondary accent, tags, badges
Aged Brass #B5A078 Metallic accent, premium indicators, subtle rules
Chalky Rose #C4AEAA Soft tertiary accent, decorative details
Slate Blue #8C9AA4 Cool neutral accent, alternate interactive states

CSS Custom Properties

:root {
  --ql-parchment-ivory: #F9F6F0;
  --ql-warm-linen: #F3EDE4;
  --ql-cashmere-cream: #EDE7DB;
  --ql-stone-taupe: #D5CEC4;
  --ql-brushed-sand: #C6BDB0;
  --ql-driftwood-gray: #A69E93;
  --ql-pewter: #8A827A;
  --ql-charcoal-linen: #5C564E;
  --ql-espresso-slate: #3B3631;
  --ql-deep-umber: #2A2520;
  --ql-saddle-leather: #8C7056;
  --ql-dusty-olive: #7A7D5F;
  --ql-aged-brass: #B5A078;
  --ql-chalky-rose: #C4AEAA;
  --ql-slate-blue: #8C9AA4;
}

Typography

Quiet Luxury typography embodies the same principle as the broader aesthetic: quality over quantity, restraint over spectacle. Heading fonts are refined serifs with classical proportions — high-contrast strokes, generous counters, and a heritage feel that suggests engraved invitations or leather-tooled book spines. Body text pairs these with clean, humanist sans-serifs at comfortable sizes and luxuriously open line-heights. Letter-spacing runs wider than typical web settings, especially for navigation and labels, where spaced uppercase text creates the feel of embossed signage. Weights skew light: 300 and 400 do the heavy lifting, with 500 or 600 reserved for rare moments of emphasis. The typographic voice is quiet, measured, and supremely legible.

Font Weight(s) Usage Link
Cormorant 300, 400, 500, 600 Primary display heading; elegant, high-contrast serif with old-style proportions Cormorant
DM Serif Display 400 Alternative display heading; refined transitional serif with contemporary clarity DM Serif Display
Libre Caslon Text 400, 400i, 700 Editorial body text; warm, readable Caslon revival with sturdy serifs Libre Caslon Text
Source Serif 4 300, 400, 600 Alternative body serif; optical sizes designed for screen readability Source Serif 4
Inter 300, 400, 500 UI elements, labels, captions; neutral humanist sans-serif with wide language support Inter
Jost 300, 400, 500 Navigation and metadata; geometric sans-serif with Futura-like elegance Jost
Instrument Serif 400, 400i Pull quotes and accents; contemporary serif with subtle calligraphic warmth Instrument Serif
Outfit 200, 300, 400, 500 Alternative sans-serif for UI; clean geometric with soft terminals Outfit

Font Pairing Suggestions

Heading Body Vibe
Cormorant 300 Inter 300 Timeless contrast, quiet editorial
DM Serif Display 400 Jost 300 Modern heritage, gallery catalogue
Cormorant 400 italic Source Serif 4 300 All-serif warmth, literary luxury
Instrument Serif 400 Outfit 300 Contemporary restraint, boutique hotel
DM Serif Display 400 Inter 400 Grounded elegance, private banking

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&family=Jost:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

body {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ql-charcoal-linen);
  background: var(--ql-parchment-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant', 'Georgia', serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--ql-espresso-slate);
}

h1 {
  font-size: 2.8rem;
  letter-spacing: 0.05em;
}

h2 {
  font-size: 1.9rem;
  font-weight: 400;
}

h3 {
  font-size: 1.35rem;
  font-weight: 400;
}

.nav-link, .label, .meta {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ql-pewter);
}

.accent-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ql-saddle-leather);
}

small, .caption {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ql-driftwood-gray);
  letter-spacing: 0.02em;
}

Layout Principles

  • Narrow content columns: Limit body content to 640-740px max-width; the resulting margins create a sense of curated exclusivity, like the wide borders of a fine art print
  • Generous vertical rhythm: Separate major sections with 100-140px of vertical space; let the page breathe like the silence in a gallery between artworks
  • Centered, symmetrical compositions: Favor centered layouts over asymmetric grids; Quiet Luxury values balance and equilibrium, mirroring classical architectural proportions
  • Minimal grid complexity: Use single-column or simple two-column layouts at most; complexity reads as effort, and effort is antithetical to the effortless ideal
  • Full-bleed moments with restraint: Occasional edge-to-edge images or tonal background shifts break the vertical rhythm, but never more than once or twice per page
  • Hairline horizontal rules: Use 1px dividers at very low opacity (0.1-0.2) to separate sections; they should be felt more than seen, like the seam on a bespoke garment
  • Considered image ratios: Photography uses consistent aspect ratios (3:2, 4:5, or 16:9) and is never cropped haphazardly; each image is framed as though mounted and matted
  • Responsive scaling with dignity: On smaller viewports, reduce padding proportionally but never compress line-height below 1.6; mobile layouts should feel spacious, not cramped
  • Sticky navigation without weight: If using sticky headers, keep them transparent or near-transparent with minimal content — a wordmark and a single menu trigger at most
  • Content-first hierarchy: Let text and whitespace carry the structure; avoid decorative containers, card borders, or background color blocks unless functionally necessary
  • Scroll pacing: If using scroll-triggered animations, reveal elements slowly (600-1000ms fade-ins) and only once; repeated or bouncing animations undermine the tone of composure

CSS / Design Techniques

Understated Card

A card that communicates premium quality through spatial proportion and near-invisible borders rather than shadow or color contrast. The hover state is a whisper — a slight warming of the background and the faintest lift.

.ql-card {
  background: var(--ql-cashmere-cream);
  border: 1px solid rgba(213, 206, 196, 0.35);
  border-radius: 2px;
  padding: 48px 40px;
  transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

.ql-card:hover {
  background: var(--ql-warm-linen);
  border-color: rgba(181, 160, 120, 0.25);
  transform: translateY(-2px);
}

.ql-card h3 {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--ql-espresso-slate);
  margin-bottom: 16px;
}

.ql-card p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ql-charcoal-linen);
}

.ql-card .meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ql-driftwood-gray);
  margin-top: 24px;
}

Stealth Button

Buttons in Quiet Luxury do not beg to be clicked. They present themselves with calm authority — flat, tonal, and typographically precise. The hover state is a dignified tonal inversion rather than a color explosion.

.ql-button {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ql-espresso-slate);
  background: transparent;
  border: 1px solid var(--ql-stone-taupe);
  border-radius: 0;
  padding: 14px 40px;
  cursor: pointer;
  transition: all 0.45s ease;
}

.ql-button:hover {
  color: var(--ql-parchment-ivory);
  background: var(--ql-espresso-slate);
  border-color: var(--ql-espresso-slate);
}

.ql-button--primary {
  color: var(--ql-parchment-ivory);
  background: var(--ql-charcoal-linen);
  border-color: var(--ql-charcoal-linen);
}

.ql-button--primary:hover {
  background: var(--ql-deep-umber);
  border-color: var(--ql-deep-umber);
}

.ql-button--ghost {
  border-color: transparent;
  color: var(--ql-saddle-leather);
  padding: 14px 0;
  border-bottom: 1px solid var(--ql-saddle-leather);
  border-radius: 0;
}

.ql-button--ghost:hover {
  color: var(--ql-espresso-slate);
  border-bottom-color: var(--ql-espresso-slate);
  background: transparent;
}

Discreet Navigation

Navigation that recedes into the background, communicating its presence through typographic spacing and positioning rather than color blocks or heavy styling. It trusts users to navigate without visual cues.

.ql-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  background: transparent;
  border-bottom: 1px solid rgba(213, 206, 196, 0.2);
}

.ql-nav__brand {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ql-espresso-slate);
  text-decoration: none;
}

.ql-nav__links {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ql-nav__links a {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ql-pewter);
  text-decoration: none;
  position: relative;
  transition: color 0.4s ease;
}

.ql-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ql-saddle-leather);
  transition: width 0.4s ease;
}

.ql-nav__links a:hover {
  color: var(--ql-espresso-slate);
}

.ql-nav__links a:hover::after {
  width: 100%;
}

Quiet Hero

A hero section that commands attention through proportion and typography alone. No overlay gradients, no parallax, no animation on load — just a considered arrangement of words and space.

.ql-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  padding: 120px 48px;
  text-align: center;
  background: var(--ql-parchment-ivory);
}

.ql-hero__eyebrow {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ql-driftwood-gray);
  margin-bottom: 32px;
}

.ql-hero__title {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--ql-espresso-slate);
  max-width: 720px;
  margin-bottom: 28px;
}

.ql-hero__subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ql-pewter);
  max-width: 480px;
  margin-bottom: 48px;
}

.ql-hero__divider {
  width: 48px;
  height: 1px;
  background: var(--ql-aged-brass);
  border: none;
  margin-bottom: 48px;
}

Linen Texture Overlay

A subtle background texture that gives flat surfaces the tactile warmth of real materials — referencing the woven quality of high-thread-count linen without resorting to photographic textures.

.ql-linen {
  position: relative;
  background: var(--ql-warm-linen);
}

.ql-linen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(92, 86, 78, 0.015) 2px,
      rgba(92, 86, 78, 0.015) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(92, 86, 78, 0.015) 2px,
      rgba(92, 86, 78, 0.015) 3px
    );
  pointer-events: none;
  z-index: 1;
}

.ql-linen > * {
  position: relative;
  z-index: 2;
}

Brass Rule Divider

A horizontal accent that references the aged-brass hardware of fine furniture and bespoke leather goods — used sparingly between key content sections as a moment of quiet metallic warmth.

.ql-brass-rule {
  border: none;
  height: 1px;
  max-width: 80px;
  margin: 80px auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ql-aged-brass) 20%,
    var(--ql-aged-brass) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

.ql-brass-rule--wide {
  max-width: 200px;
}

.ql-brass-rule--left {
  margin-left: 0;
  margin-right: auto;
  background: linear-gradient(
    90deg,
    var(--ql-aged-brass) 0%,
    transparent 100%
  );
}

Slow Reveal on Scroll

Elements that materialize gradually as the user scrolls, reinforcing the unhurried pacing of the experience. The animation is minimal — a gentle fade and slight vertical translation — and executes only once.

.ql-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ql-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children for card grids */
.ql-reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ql-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.ql-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.ql-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.ql-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }

/* Intersection Observer for scroll reveal */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('.ql-reveal, .ql-reveal-stagger')
  .forEach(el => observer.observe(el));

Design Do's and Don'ts

Do's

  • Do use negative space as your primary design material; let silence carry meaning the way it does in a gallery
  • Do limit your working palette to three or four neutral tones with a single muted accent color
  • Do choose light font weights (300, 400) and generous letter-spacing for a refined, unhurried typographic voice
  • Do invest in high-quality imagery that is tonally consistent — desaturated, naturally lit, and compositionally simple
  • Do use slow transitions (400-800ms) with gentle easing to reinforce the atmosphere of calm authority
  • Do treat every UI element as an opportunity for restraint: the less it draws attention to itself, the more luxurious it feels
  • Do test on high-resolution displays; Quiet Luxury relies on crisp hairlines and subtle tonal shifts that disappear on low-DPI screens
  • Do use semantic HTML and accessible contrast ratios — true quality includes craftsmanship in code, not just visuals

Don'ts

  • Don't use pure black (#000000) for text; instead use warm charcoals and dark umbers that feel natural and considered
  • Don't add decorative elements, patterns, or ornamental flourishes — if an element doesn't serve a function, remove it
  • Don't use drop-shadows heavier than 4-8px spread at very low opacity; heavy shadows feel cheap and effortful
  • Don't crowd the layout with content; if a page section feels "full," it has too much — remove until it breathes
  • Don't use bright, saturated accent colors; even call-to-action buttons should be muted and tonal
  • Don't animate on page load or use attention-grabbing motion; the interface should be still when the user arrives
  • Don't use rounded corners larger than 4px; sharp or barely-rounded edges read as more refined and architectural
  • Don't display prominent logos, brand marks, or watermarks — Quiet Luxury brands are recognized by their quality, not their labels
Aesthetic Relationship
Minimalism Shares the commitment to reduction and negative space, but Quiet Luxury adds warmth and material richness where Minimalism can tend toward cold austerity
Japandi Overlapping sensibilities in natural materials, muted tones, and craft-forward design; Japandi introduces wabi-sabi imperfection where Quiet Luxury favors precision
Scandinavian Both value function and restraint, but Scandinavian design is more democratic and accessible; Quiet Luxury is deliberately exclusive
Old Money The fashion-world origin of the aesthetic; Old Money codes (heritage brands, monogrammed details, country-club references) inform the cultural register
Organic Minimalism Shares the warm neutral palette and natural textures, but Organic Minimalism leans more earthy and biophilic; Quiet Luxury is more urbane and polished
Swiss Design Quiet Luxury borrows the grid discipline and typographic precision of Swiss Design, softened with warmer materials and less rigid geometry
Wabi-Sabi Both honor natural materials and aging, but Wabi-Sabi celebrates visible imperfection and asymmetry where Quiet Luxury maintains immaculate control
Corporate Memphis (anti-relationship) The tonal opposite: loud, saturated, character-driven illustration vs. the editorial stillness of Quiet Luxury
Art Deco Shares a sense of material luxury (brass, marble, geometric form) but Deco is maximalist and ornamented where Quiet Luxury is radically pared back

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiet Luxury — Template</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
  <style>
    /* ===========================
       CSS Custom Properties
       =========================== */
    :root {
      --ql-parchment-ivory: #F9F6F0;
      --ql-warm-linen: #F3EDE4;
      --ql-cashmere-cream: #EDE7DB;
      --ql-stone-taupe: #D5CEC4;
      --ql-brushed-sand: #C6BDB0;
      --ql-driftwood-gray: #A69E93;
      --ql-pewter: #8A827A;
      --ql-charcoal-linen: #5C564E;
      --ql-espresso-slate: #3B3631;
      --ql-deep-umber: #2A2520;
      --ql-saddle-leather: #8C7056;
      --ql-dusty-olive: #7A7D5F;
      --ql-aged-brass: #B5A078;
      --ql-chalky-rose: #C4AEAA;
      --ql-slate-blue: #8C9AA4;
    }

    /* ===========================
       Reset & Base
       =========================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.8;
      letter-spacing: 0.01em;
      color: var(--ql-charcoal-linen);
      background: var(--ql-parchment-ivory);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    a {
      color: var(--ql-saddle-leather);
      text-decoration: none;
      transition: color 0.4s ease;
    }

    a:hover {
      color: var(--ql-espresso-slate);
    }

    /* ===========================
       Typography
       =========================== */
    h1, h2, h3, h4 {
      font-family: 'Cormorant', 'Georgia', serif;
      font-weight: 300;
      letter-spacing: 0.03em;
      line-height: 1.2;
      color: var(--ql-espresso-slate);
    }

    h1 {
      font-size: clamp(2.4rem, 5vw, 4.2rem);
      letter-spacing: 0.05em;
    }

    h2 {
      font-size: clamp(1.6rem, 3vw, 2rem);
      font-weight: 400;
    }

    h3 {
      font-size: 1.35rem;
      font-weight: 400;
    }

    p {
      margin-bottom: 1.4em;
    }

    .eyebrow {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.68rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--ql-driftwood-gray);
    }

    .caption {
      font-size: 0.8rem;
      font-weight: 400;
      color: var(--ql-driftwood-gray);
      letter-spacing: 0.02em;
    }

    /* ===========================
       Navigation
       =========================== */
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28px 48px;
      background: transparent;
      border-bottom: 1px solid rgba(213, 206, 196, 0.2);
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(249, 246, 240, 0.85);
    }

    .nav__brand {
      font-family: 'Cormorant', serif;
      font-weight: 400;
      font-size: 1.3rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ql-espresso-slate);
      text-decoration: none;
    }

    .nav__links {
      display: flex;
      gap: 40px;
      list-style: none;
    }

    .nav__links a {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ql-pewter);
      text-decoration: none;
      position: relative;
    }

    .nav__links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--ql-saddle-leather);
      transition: width 0.4s ease;
    }

    .nav__links a:hover {
      color: var(--ql-espresso-slate);
    }

    .nav__links a:hover::after {
      width: 100%;
    }

    /* ===========================
       Hero Section
       =========================== */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 90vh;
      padding: 120px 48px;
      text-align: center;
    }

    .hero__eyebrow {
      margin-bottom: 32px;
    }

    .hero__title {
      max-width: 720px;
      margin-bottom: 28px;
    }

    .hero__subtitle {
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--ql-pewter);
      max-width: 480px;
      margin-bottom: 48px;
    }

    .hero__divider {
      width: 48px;
      height: 1px;
      background: var(--ql-aged-brass);
      border: none;
      margin-bottom: 48px;
      opacity: 0.6;
    }

    /* ===========================
       Buttons
       =========================== */
    .btn {
      display: inline-block;
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ql-espresso-slate);
      background: transparent;
      border: 1px solid var(--ql-stone-taupe);
      border-radius: 0;
      padding: 14px 40px;
      cursor: pointer;
      transition: all 0.45s ease;
      text-decoration: none;
    }

    .btn:hover {
      color: var(--ql-parchment-ivory);
      background: var(--ql-espresso-slate);
      border-color: var(--ql-espresso-slate);
    }

    .btn--primary {
      color: var(--ql-parchment-ivory);
      background: var(--ql-charcoal-linen);
      border-color: var(--ql-charcoal-linen);
    }

    .btn--primary:hover {
      background: var(--ql-deep-umber);
      border-color: var(--ql-deep-umber);
      color: var(--ql-parchment-ivory);
    }

    .btn--ghost {
      border: none;
      border-bottom: 1px solid var(--ql-saddle-leather);
      color: var(--ql-saddle-leather);
      padding: 14px 0;
    }

    .btn--ghost:hover {
      color: var(--ql-espresso-slate);
      border-bottom-color: var(--ql-espresso-slate);
      background: transparent;
    }

    /* ===========================
       Content Section
       =========================== */
    .section {
      padding: 100px 48px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section--narrow {
      max-width: 740px;
    }

    .section__header {
      text-align: center;
      margin-bottom: 64px;
    }

    .section__header .eyebrow {
      margin-bottom: 16px;
      display: block;
    }

    .section__header p {
      color: var(--ql-pewter);
      max-width: 520px;
      margin: 20px auto 0;
      font-size: 0.95rem;
    }

    /* ===========================
       Cards
       =========================== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
    }

    .card {
      background: var(--ql-cashmere-cream);
      border: 1px solid rgba(213, 206, 196, 0.35);
      border-radius: 2px;
      padding: 48px 40px;
      transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
    }

    .card:hover {
      background: var(--ql-warm-linen);
      border-color: rgba(181, 160, 120, 0.25);
      transform: translateY(-2px);
    }

    .card__eyebrow {
      display: block;
      margin-bottom: 16px;
    }

    .card h3 {
      margin-bottom: 16px;
    }

    .card p {
      font-size: 0.95rem;
      line-height: 1.75;
      color: var(--ql-charcoal-linen);
    }

    .card__link {
      display: inline-block;
      margin-top: 24px;
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ql-saddle-leather);
      border-bottom: 1px solid var(--ql-saddle-leather);
      padding-bottom: 2px;
      transition: color 0.4s ease, border-color 0.4s ease;
    }

    .card__link:hover {
      color: var(--ql-espresso-slate);
      border-color: var(--ql-espresso-slate);
    }

    /* ===========================
       Linen Texture Section
       =========================== */
    .linen-bg {
      position: relative;
      background: var(--ql-warm-linen);
    }

    .linen-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(92, 86, 78, 0.015) 2px,
          rgba(92, 86, 78, 0.015) 3px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 2px,
          rgba(92, 86, 78, 0.015) 2px,
          rgba(92, 86, 78, 0.015) 3px
        );
      pointer-events: none;
      z-index: 1;
    }

    .linen-bg > * {
      position: relative;
      z-index: 2;
    }

    /* ===========================
       Feature / Split Section
       =========================== */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      padding: 120px 48px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .split__text h2 {
      margin-bottom: 24px;
    }

    .split__text p {
      color: var(--ql-charcoal-linen);
      font-size: 0.95rem;
    }

    .split__image {
      aspect-ratio: 4 / 5;
      background: var(--ql-cashmere-cream);
      border-radius: 2px;
      overflow: hidden;
    }

    .split__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.85) contrast(0.95);
    }

    /* Placeholder for demo */
    .image-placeholder {
      width: 100%;
      height: 100%;
      min-height: 400px;
      background: linear-gradient(
        135deg,
        var(--ql-cashmere-cream) 0%,
        var(--ql-stone-taupe) 50%,
        var(--ql-brushed-sand) 100%
      );
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ql-driftwood-gray);
      font-family: 'Jost', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    /* ===========================
       Brass Divider
       =========================== */
    .brass-rule {
      border: none;
      height: 1px;
      max-width: 80px;
      margin: 0 auto;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ql-aged-brass) 20%,
        var(--ql-aged-brass) 80%,
        transparent 100%
      );
      opacity: 0.5;
    }

    /* ===========================
       Testimonial / Quote
       =========================== */
    .quote {
      text-align: center;
      padding: 100px 48px;
      max-width: 680px;
      margin: 0 auto;
    }

    .quote blockquote {
      font-family: 'Cormorant', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      line-height: 1.5;
      color: var(--ql-espresso-slate);
      margin-bottom: 32px;
    }

    .quote cite {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-style: normal;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ql-driftwood-gray);
    }

    /* ===========================
       Footer
       =========================== */
    .footer {
      background: var(--ql-deep-umber);
      color: var(--ql-brushed-sand);
      padding: 80px 48px 48px;
    }

    .footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 48px;
    }

    .footer__brand {
      font-family: 'Cormorant', serif;
      font-weight: 400;
      font-size: 1.2rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ql-cashmere-cream);
    }

    .footer__links {
      list-style: none;
      display: flex;
      gap: 32px;
    }

    .footer__links a {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ql-brushed-sand);
      text-decoration: none;
      transition: color 0.4s ease;
    }

    .footer__links a:hover {
      color: var(--ql-cashmere-cream);
    }

    .footer__bottom {
      max-width: 1200px;
      margin: 48px auto 0;
      padding-top: 32px;
      border-top: 1px solid rgba(198, 189, 176, 0.15);
      text-align: center;
    }

    .footer__bottom p {
      font-size: 0.75rem;
      color: var(--ql-driftwood-gray);
      letter-spacing: 0.04em;
      margin: 0;
    }

    /* ===========================
       Scroll Reveal
       =========================== */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===========================
       Responsive
       =========================== */
    @media (max-width: 768px) {
      .nav {
        padding: 20px 24px;
      }

      .nav__links {
        gap: 24px;
      }

      .hero {
        padding: 80px 24px;
        min-height: 80vh;
      }

      .section {
        padding: 64px 24px;
      }

      .split {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 80px 24px;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer__links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
    }

    @media (max-width: 480px) {
      .nav__links {
        display: none;
      }

      h1 {
        font-size: 2rem;
      }

      .btn {
        padding: 12px 28px;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav class="nav">
    <a href="#" class="nav__brand">Atelier</a>
    <ul class="nav__links">
      <li><a href="#collections">Collections</a></li>
      <li><a href="#philosophy">Philosophy</a></li>
      <li><a href="#journal">Journal</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <span class="eyebrow hero__eyebrow">Established 1987</span>
    <h1 class="hero__title">The Art of<br>Quiet Distinction</h1>
    <p class="hero__subtitle">
      Craftsmanship that speaks in whispers. Materials that endure.
      Design that trusts you to notice.
    </p>
    <hr class="hero__divider">
    <a href="#collections" class="btn">Explore Collections</a>
  </section>

  <!-- Brass Rule -->
  <hr class="brass-rule">

  <!-- Collections Section -->
  <section id="collections" class="section">
    <div class="section__header reveal">
      <span class="eyebrow">Curated Selections</span>
      <h2>Current Collections</h2>
      <p>Each piece is considered, refined, and built to outlast the seasons that follow.</p>
    </div>
    <div class="card-grid">
      <article class="card reveal">
        <span class="eyebrow card__eyebrow">Autumn / Winter</span>
        <h3>The Parchment Edit</h3>
        <p>
          Twelve foundational pieces in undyed cashmere, brushed wool, and matte
          silk. Neutral tones drawn from stone and sand. No logos, no embellishment
          — only texture and proportion.
        </p>
        <a href="#" class="card__link">View collection</a>
      </article>
      <article class="card reveal">
        <span class="eyebrow card__eyebrow">Permanent Collection</span>
        <h3>Essentials</h3>
        <p>
          The quiet wardrobe: timeless silhouettes in premium natural fabrics,
          designed to improve with age. A capsule that renders trends irrelevant
          and confidence effortless.
        </p>
        <a href="#" class="card__link">View collection</a>
      </article>
      <article class="card reveal">
        <span class="eyebrow card__eyebrow">Limited Edition</span>
        <h3>Heirloom Leather</h3>
        <p>
          Hand-finished leather goods crafted from vegetable-tanned hides.
          Each piece is numbered, unlined, and designed to patina beautifully
          over decades of daily use.
        </p>
        <a href="#" class="card__link">View collection</a>
      </article>
    </div>
  </section>

  <!-- Philosophy Split Section -->
  <section id="philosophy" class="linen-bg">
    <div class="split">
      <div class="split__text reveal">
        <span class="eyebrow" style="display: block; margin-bottom: 16px;">Our Philosophy</span>
        <h2>Less, But Better</h2>
        <p>
          We believe that luxury is not something you display — it is something you feel.
          Every material is sourced for its character and longevity. Every seam is considered.
          Every design decision serves the person who will live with the piece, not the
          audience who will see it.
        </p>
        <p>
          In a world that rewards loudness, we choose to speak quietly. Our clients
          do not need to be noticed. They have already arrived.
        </p>
        <a href="#" class="btn--ghost btn" style="margin-top: 16px;">Read our story</a>
      </div>
      <div class="split__image reveal">
        <div class="image-placeholder">Photography</div>
      </div>
    </div>
  </section>

  <!-- Quote -->
  <section class="quote reveal">
    <blockquote>
      "True elegance is the kind that does not notice itself — and therefore,
      is noticed by everyone."
    </blockquote>
    <cite>Cristobal Balenciaga</cite>
  </section>

  <!-- Brass Rule -->
  <hr class="brass-rule">

  <!-- Journal Section -->
  <section id="journal" class="section section--narrow">
    <div class="section__header reveal">
      <span class="eyebrow">Journal</span>
      <h2>Considered Thoughts</h2>
    </div>
    <article class="card reveal" style="margin-bottom: 24px;">
      <span class="eyebrow card__eyebrow">Materials</span>
      <h3>The Patience of Vegetable Tanning</h3>
      <p>
        Why we wait six months for leather that industrial processes can produce in a day,
        and what that patience gives back in texture, strength, and soul.
      </p>
      <a href="#" class="card__link">Continue reading</a>
    </article>
    <article class="card reveal">
      <span class="eyebrow card__eyebrow">Craft</span>
      <h3>Invisible Seams</h3>
      <p>
        The construction details you will never see — and why they matter more
        than any visible design choice we make.
      </p>
      <a href="#" class="card__link">Continue reading</a>
    </article>
  </section>

  <!-- Footer -->
  <footer class="footer" id="contact">
    <div class="footer__inner">
      <span class="footer__brand">Atelier</span>
      <ul class="footer__links">
        <li><a href="#">Collections</a></li>
        <li><a href="#">Philosophy</a></li>
        <li><a href="#">Journal</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Privacy</a></li>
      </ul>
    </div>
    <div class="footer__bottom">
      <p>Quietly crafted with care. No logos were harmed in the making of this website.</p>
    </div>
  </footer>

  <!-- Scroll Reveal Script -->
  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.15,
      rootMargin: '0px 0px -40px 0px'
    });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>

</body>
</html>

Implementation Tips

  • Contrast-check your muted palette: Quiet Luxury's tonal subtlety can easily slip below WCAG 2.1 AA contrast minimums (4.5:1 for body text, 3:1 for large text). Test every text/background pairing with a contrast checker and adjust values rather than abandoning the aesthetic — a slightly deeper charcoal reads just as quiet while remaining accessible
  • Optimize for high-DPI displays: Hairline borders (0.5-1px) and subtle tonal shifts are the aesthetic's signature but can vanish on standard-resolution screens. Use @media (-webkit-min-device-pixel-ratio: 2) queries or CSS min() functions to ensure fine details remain visible across display densities
  • Use font-display: swap and preconnect: Light-weight serif fonts are central to the aesthetic, and a FOUT (flash of unstyled text) in a heavy system fallback destroys the tone. Preconnect to Google Fonts and use font-display: swap or, better, self-host subsetted WOFF2 files for instant rendering
  • Performance is part of the luxury: A page that loads slowly or jitters during scroll betrays the aesthetic of effortless quality. Aim for sub-2-second LCP, avoid layout shifts, and use will-change sparingly to ensure transitions are GPU-accelerated without memory overhead
  • Desaturate imagery in CSS when needed: Use filter: saturate(0.8) contrast(0.95) on editorial images to bring them into tonal alignment with the palette, ensuring photography never feels louder than the surrounding design
  • Use CSS clamp() for fluid typography: Rather than brittle breakpoint-based font sizing, use clamp(2.4rem, 5vw, 4.2rem) for headings to ensure elegant scaling across viewports — the proportional relationship between sizes should feel natural at every width
  • Test your design in grayscale: Convert your layout to grayscale (using a browser DevTools rendering override or CSS filter: grayscale(1)) — if the hierarchy, spacing, and structure still read clearly without any color, the design is working
  • Mind the scroll pacing on mobile: Long vertical gaps that breathe beautifully on desktop can feel like dead space on mobile. Scale section padding proportionally (60-70% of desktop values) and consider whether each section truly earns its scroll distance on a smaller viewport
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.