Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
ÉlégantMinimalisteClairClassique
Aperçu

Old Money / Quiet Luxury -- Design Reference

Old Money, also called Quiet Luxury or Stealth Wealth, is an aesthetic rooted in the visual language of inherited wealth, generational taste, and understated refinement. It draws from the world of heritage brands like Loro Piana, Brunello Cucinelli, and Ralph Lauren -- environments of country estates, ivy-covered prep schools, leather-bound club rooms, and tailored garments in muted cashmere and fine wool. Unlike the conspicuous opulence of new wealth, Old Money whispers rather than shouts: quality is felt in the weight of the fabric, not the size of the logo. The color palette revolves around cream, navy, deep burgundy, camel, olive, and brushed gold -- tones drawn from equestrian leather, aged oak, heritage plaids, and the patina of well-maintained antiques. In web and UI design, this translates to generous whitespace, restrained serif typography with impeccable hierarchy, muted earth and jewel tones, fine hairline borders, and a deliberate absence of visual noise. Every element conveys confidence through restraint -- the digital equivalent of a perfectly tailored suit with no visible label.

Visual Characteristics

Core Design Traits

  • Restrained, muted color palette -- creams, navies, deep burgundies, camel, and olive form the foundation, never bright or saturated, always looking as though they have been softened by time and good taste
  • Classical serif typography -- high-contrast transitional and Didone serifs for headings, refined old-style serifs for body text, evoking letterpress printing, engraved stationery, and the title pages of leather-bound volumes
  • Generous whitespace and measured proportion -- layouts breathe with the confidence of someone who does not need to fill every inch; negative space is a deliberate signal of quality and composure
  • Fine hairline details -- thin borders, delicate rules, and subtle dividers replace heavy graphical elements; lines are precise and intentional, like the pinstripes on bespoke tailoring
  • Muted metallic accents -- brushed gold, antiqued brass, and tarnished silver appear sparingly for emphasis, never polished to a flashy gleam
  • Material and textile references -- subtle textures suggesting cashmere weave, linen grain, herringbone patterns, and embossed leather inform background treatments and surface design
  • Symmetry and classical composition -- layouts favor balanced, centered arrangements that echo Georgian architecture, formal gardens, and the composed stillness of old portrait photography
  • Monogrammatic and crest-like details -- small insignia, initials in serif capitals, thin-rule frames, and shield-like compositions serve as decorative motifs without becoming ostentatious
  • Photography with warm, desaturated toning -- imagery favors natural light, film-grain softness, neutral backgrounds, and subjects captured with editorial restraint rather than commercial energy
  • Absence of trend-driven elements -- no gradients, no glassmorphism, no bold geometric patterns; every decision should look as appropriate in ten years as it does today

Design Principles

  • Whisper, never shout -- the defining principle of quiet luxury; if a design element calls attention to itself, it is likely too much
  • Quality over novelty -- prefer proven, timeless design conventions over fashionable techniques; the goal is enduring elegance, not disruption
  • Restraint as refinement -- use fewer colors, fewer fonts, fewer decorative elements; what remains should be impeccable in its execution
  • Let materials speak -- typography, spacing, and subtle texture do the heavy lifting; the design should feel as though it is made of fine paper and letterpress ink
  • Hierarchy through proportion, not weight -- establish visual hierarchy through size, spacing, and position rather than bold colors or heavy type weights
  • Heritage over innovation -- reference classical design traditions (engraved stationery, editorial layouts, architectural proportion) rather than digital-native trends
  • Earned confidence -- the design should feel self-assured without needing to prove anything; no urgency, no persuasion, simply quiet authority

Color Palette

Color Name Hex Role / Usage
Ivory Linen #F8F5F0 Primary background, page canvas
Warm Parchment #F0EBE3 Secondary background, card surfaces
Oyster #E5DFD5 Tertiary surface, sidebar, input backgrounds
Camel #C4A676 Primary warm accent, highlights, links
Brushed Gold #B09860 Active states, monogram details, decorative rules
Deep Navy #1B2A4A Primary text, headings, strong foreground
Oxford Blue #263652 Secondary text, navigation, subheadings
Slate Grey #6B7B8D Muted text, captions, metadata, placeholders
Burgundy #6B2737 Tertiary accent, emphasis, notification badges
Hunter Green #2D4A3E Alternate accent, success states, secondary CTA
Charcoal #2E2E2E Footer background, inverse surfaces
Espresso #3C2415 Dark accent, hover states on dark surfaces
Herringbone Tan #D6CBBA Borders, dividers, subtle UI lines
Silver Mist #B8B5AE Disabled states, secondary borders
Cream White #FFFFFF Maximum light, modal overlays, card highlights

CSS Custom Properties

:root {
  /* Backgrounds */
  --om-bg-primary: #F8F5F0;
  --om-bg-secondary: #F0EBE3;
  --om-bg-tertiary: #E5DFD5;
  --om-bg-inverse: #2E2E2E;
  --om-bg-white: #FFFFFF;

  /* Text */
  --om-text-primary: #1B2A4A;
  --om-text-secondary: #263652;
  --om-text-muted: #6B7B8D;
  --om-text-on-accent: #F8F5F0;
  --om-text-on-inverse: #F0EBE3;

  /* Accents */
  --om-accent-camel: #C4A676;
  --om-accent-gold: #B09860;
  --om-accent-burgundy: #6B2737;
  --om-accent-hunter: #2D4A3E;
  --om-accent-espresso: #3C2415;

  /* UI Elements */
  --om-border: #D6CBBA;
  --om-border-light: #E5DFD5;
  --om-border-muted: #B8B5AE;
  --om-shadow-color: rgba(27, 42, 74, 0.06);
  --om-shadow-strong: rgba(27, 42, 74, 0.12);

  /* Gradients */
  --om-gradient-linen: linear-gradient(180deg, #F8F5F0 0%, #F0EBE3 100%);
  --om-gradient-navy: linear-gradient(180deg, #1B2A4A 0%, #263652 100%);
  --om-gradient-warmth: linear-gradient(135deg, #F8F5F0 0%, #F0EBE3 50%, #E5DFD5 100%);

  /* Typography */
  --om-font-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --om-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --om-font-body: 'Libre Baskerville', Baskerville, Georgia, serif;
  --om-font-sans: 'Raleway', 'Gill Sans', Calibri, sans-serif;
  --om-font-mono: 'Cormorant', Garamond, serif;

  /* Spacing */
  --om-space-xs: 0.25rem;
  --om-space-sm: 0.5rem;
  --om-space-md: 1rem;
  --om-space-lg: 2rem;
  --om-space-xl: 4rem;
  --om-space-2xl: 6rem;

  /* Border Radius */
  --om-radius-sm: 2px;
  --om-radius-md: 4px;
  --om-radius-lg: 8px;
  --om-radius-pill: 9999px;

  /* Transitions */
  --om-transition-subtle: 0.25s ease;
  --om-transition-gentle: 0.4s ease;
}

Typography

Typeface Characteristics

Old Money typography is rooted in the tradition of engraved stationery, fine printing, and editorial publishing. Display headings favor high-contrast transitional serifs and Didone forms -- typefaces born from the neoclassical age of printing that convey authority without excess. Body text uses sturdy old-style serifs designed for sustained reading, with generous line-height and a comfortable measure. Sans-serif type is used only for functional UI elements -- navigation labels, metadata, and captions -- and should be thin, widely spaced, and uppercase to echo the restrained lettering found on heritage brand storefronts and luxury packaging. Letter-spacing is critical: headings are tight and confident, while labels and small caps are generously tracked. The overall typographic voice should feel as though every word has been carefully considered and precisely placed.

Font Style Best For
Cormorant Garamond Refined Garamond revival with tall x-height and elegant hairlines Display headings, hero titles, brand names
Playfair Display High-contrast transitional serif with sharp details Section titles, editorial headings, pull quotes
Libre Baskerville Sturdy and readable Baskerville optimized for screen Body text, article content, long-form reading
EB Garamond Faithful Claude Garamond revival with old-style figures Block quotes, accent text, secondary body
Raleway Thin, elegant geometric sans-serif Navigation, labels, captions, uppercase metadata
Crimson Pro Refined book-weight serif with extensive weight range Alternative body text, versatile heading use
Spectral Serif designed specifically for screen reading Responsive-friendly body content
Cinzel Roman inscription-inspired capitals Monograms, decorative initials, section markers

Font Pairing Suggestions

Heading Font Body Font Mood
Cormorant Garamond Libre Baskerville Engraved stationery meets editorial prose; pure Old Money
Playfair Display Libre Baskerville Confident editorial authority with readable depth
Cormorant Garamond Raleway (body light) Classical headline with airy, modern readability
Cinzel (display only) EB Garamond Monumental inscriptions paired with literary warmth
Playfair Display EB Garamond High-contrast drama with soft old-style reading

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* Display -- Hero titles, brand name */
.om-display {
  font-family: var(--om-font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--om-text-primary);
}

/* Heading 1 -- Page titles */
.om-h1 {
  font-family: var(--om-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--om-text-primary);
}

/* Heading 2 -- Section titles */
.om-h2 {
  font-family: var(--om-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--om-text-primary);
}

/* Heading 3 -- Subsection titles */
.om-h3 {
  font-family: var(--om-font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--om-text-secondary);
}

/* Body -- Primary reading text */
.om-body {
  font-family: var(--om-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--om-text-primary);
}

/* Label / Caption -- Navigation, metadata */
.om-label {
  font-family: var(--om-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--om-text-muted);
}

/* Blockquote */
.om-blockquote {
  font-family: var(--om-font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--om-text-secondary);
  border-left: 2px solid var(--om-accent-camel);
  padding-left: var(--om-space-lg);
  margin: var(--om-space-xl) 0;
}

Layout Principles

  • Centered, book-like composition -- use a single centered content column with a maximum width of 720--880px for body text, maintaining a comfortable reading measure of 60--75 characters per line; the layout should feel like a well-designed book page or piece of fine stationery
  • Generous margins as a signal of quality -- wide margins on both sides (at least 12--16% of viewport width on desktop) frame content with the same deliberate restraint as the margins on luxury letterhead; space itself becomes a marker of refinement
  • Classical symmetry and centered alignment -- favor centered headings, symmetrically placed elements, and balanced compositions that echo Georgian architecture and formal portraiture
  • Minimal grid complexity -- avoid busy multi-column grids; prefer a simple two-column or single-column approach with occasional asymmetric pull-outs for quotes or secondary information
  • Vertical rhythm and proportional spacing -- maintain consistent vertical spacing based on the body line-height; section padding should be generous (60--100px on major sections) to create a sense of unhurried elegance
  • Hairline rules as structural elements -- use thin 1px borders and delicate horizontal rules to divide sections rather than heavy bars or color blocks; dividers should be barely noticeable, like the rules on engraved stationery
  • Photography presented with editorial restraint -- images should be placed with generous surrounding space, never touching edges or overlapping; frames and borders, if used, should be fine and simple
  • Navigation as a whisper, not a shout -- navigation bars should be minimal, widely spaced, and set in small uppercase sans-serif type; they should feel like a discreet table of contents rather than a command center
  • Responsive approach -- on mobile, collapse to a single column with increased vertical spacing; maintain the warm palette and restrained typography at all breakpoints; touch targets should be generous but visually understated

CSS / Design Techniques

Card Component

.om-card {
  background: var(--om-bg-white);
  border: 1px solid var(--om-border);
  border-radius: var(--om-radius-md);
  padding: var(--om-space-lg);
  box-shadow:
    0 1px 2px var(--om-shadow-color),
    0 4px 16px var(--om-shadow-color);
  transition: box-shadow var(--om-transition-gentle),
              transform var(--om-transition-gentle);
}

.om-card:hover {
  box-shadow:
    0 2px 6px var(--om-shadow-strong),
    0 8px 24px var(--om-shadow-color);
  transform: translateY(-2px);
}

.om-card__overline {
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--om-accent-gold);
  margin-bottom: var(--om-space-sm);
}

.om-card__title {
  font-family: var(--om-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--om-text-primary);
  margin-bottom: var(--om-space-sm);
}

.om-card__text {
  font-family: var(--om-font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--om-text-muted);
}

.om-card__image {
  width: 100%;
  border-radius: var(--om-radius-sm);
  margin-bottom: var(--om-space-md);
  object-fit: cover;
  aspect-ratio: 16 / 10;
  filter: saturate(0.85) contrast(1.02);
}

Button Component

/* Primary button -- navy filled */
.om-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--om-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--om-text-on-accent);
  background: var(--om-text-primary);
  border: 1.5px solid var(--om-text-primary);
  border-radius: var(--om-radius-sm);
  padding: 0.875rem 2.25rem;
  cursor: pointer;
  transition: all var(--om-transition-subtle);
  text-decoration: none;
}

.om-button:hover {
  background: var(--om-text-secondary);
  border-color: var(--om-text-secondary);
}

.om-button:active {
  transform: translateY(1px);
}

/* Secondary button -- outlined */
.om-button--outline {
  background: transparent;
  color: var(--om-text-primary);
  border-color: var(--om-border);
}

.om-button--outline:hover {
  border-color: var(--om-text-primary);
  background: transparent;
}

/* Ghost button -- text only with underline */
.om-button--ghost {
  background: transparent;
  color: var(--om-text-secondary);
  border: none;
  padding: 0.5rem 0;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--om-border);
  border-radius: 0;
}

.om-button--ghost:hover {
  color: var(--om-text-primary);
  border-bottom-color: var(--om-text-primary);
  background: transparent;
}

.om-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 4rem;
  background: var(--om-bg-primary);
  border-bottom: 1px solid var(--om-border-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

.om-nav__brand {
  font-family: var(--om-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--om-text-primary);
  text-decoration: none;
}

.om-nav__links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.om-nav__link {
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--om-text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--om-transition-subtle),
              border-color var(--om-transition-subtle);
}

.om-nav__link:hover,
.om-nav__link--active {
  color: var(--om-text-primary);
  border-bottom-color: var(--om-accent-camel);
}

Hero Section

.om-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 90vh;
  padding: 6rem 2rem;
  background: var(--om-bg-primary);
  position: relative;
  overflow: hidden;
}

.om-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(248, 245, 240, 0) 0%,
    rgba(240, 235, 227, 0.5) 100%);
  pointer-events: none;
}

.om-hero__overline {
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--om-accent-gold);
  margin-bottom: 2rem;
  position: relative;
}

.om-hero__title {
  font-family: var(--om-font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--om-text-primary);
  max-width: 16ch;
  margin-bottom: 2rem;
  position: relative;
}

.om-hero__rule {
  width: 60px;
  height: 1px;
  background: var(--om-accent-camel);
  margin: 0 auto 2rem;
  position: relative;
}

.om-hero__subtitle {
  font-family: var(--om-font-body);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.8;
  color: var(--om-text-muted);
  max-width: 48ch;
  margin-bottom: 2.5rem;
  position: relative;
}

Testimonial / Pull Quote

.om-quote {
  position: relative;
  max-width: 640px;
  margin: var(--om-space-2xl) auto;
  padding: var(--om-space-xl) 0;
  text-align: center;
}

.om-quote::before,
.om-quote::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--om-accent-camel);
  margin: 0 auto;
}

.om-quote::before {
  margin-bottom: var(--om-space-lg);
}

.om-quote::after {
  margin-top: var(--om-space-lg);
}

.om-quote__text {
  font-family: var(--om-font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--om-text-primary);
}

.om-quote__attribution {
  display: block;
  margin-top: var(--om-space-md);
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--om-text-muted);
}

Heritage Crest / Monogram Badge

.om-crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--om-space-lg);
}

.om-crest__monogram {
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--om-accent-camel);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--om-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--om-accent-gold);
}

.om-crest__name {
  font-family: var(--om-font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--om-text-muted);
}

.om-crest__tagline {
  font-family: var(--om-font-display);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 300;
  color: var(--om-text-muted);
}

Feature / Services Grid

.om-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--om-space-xl);
  padding: var(--om-space-xl) 0;
}

.om-feature {
  text-align: center;
  padding: var(--om-space-lg);
}

.om-feature__icon {
  font-family: var(--om-font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--om-accent-camel);
  margin-bottom: var(--om-space-md);
  display: block;
}

.om-feature__title {
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--om-text-primary);
  margin-bottom: var(--om-space-sm);
}

.om-feature__rule {
  width: 24px;
  height: 1px;
  background: var(--om-accent-camel);
  margin: var(--om-space-sm) auto var(--om-space-md);
}

.om-feature__text {
  font-family: var(--om-font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--om-text-muted);
}

Form Input

.om-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--om-space-xs);
  margin-bottom: var(--om-space-lg);
}

.om-input-group__label {
  font-family: var(--om-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--om-text-muted);
}

.om-input {
  font-family: var(--om-font-body);
  font-size: 1rem;
  color: var(--om-text-primary);
  background: var(--om-bg-white);
  border: 1px solid var(--om-border);
  border-radius: var(--om-radius-sm);
  padding: 0.875rem 1rem;
  transition: border-color var(--om-transition-subtle);
}

.om-input::placeholder {
  color: var(--om-border-muted);
  font-style: italic;
}

.om-input:focus {
  outline: none;
  border-color: var(--om-text-primary);
}

Design Do's and Don'ts

Do

  • Use a muted, desaturated palette drawn from natural materials -- cream, navy, camel, olive, burgundy -- and avoid any fully saturated hues
  • Prioritize generous whitespace; let content breathe as though it were set on fine stationery or displayed in a museum
  • Choose high-contrast transitional serifs (Cormorant Garamond, Playfair Display) for headings and old-style serifs (Libre Baskerville, EB Garamond) for body text
  • Use thin, widely tracked uppercase sans-serif type for labels, navigation, and metadata to echo heritage brand lettering
  • Apply hairline borders (1px) and subtle dividers rather than heavy graphical separators
  • Desaturate and warm-tone photography slightly; images should feel editorial and composed, never commercial or artificial
  • Use symmetry and centered alignment to create a sense of classical order and composure
  • Apply warm-toned shadows using navy or brown-based rgba values rather than pure black
  • Maintain accessibility by testing muted palettes against WCAG contrast requirements for all text sizes
  • Treat every decorative detail as an opportunity for restraint; one small monogram or rule is more powerful than many ornaments

Don't

  • Use bright, saturated colors, neon accents, or high-chroma gradients anywhere in the design
  • Apply trendy effects (glassmorphism, 3D elements, animated gradients) that signal novelty over timelessness
  • Use heavy, rounded sans-serif fonts (Nunito, Poppins, Quicksand) as primary typefaces -- they feel too casual and contemporary
  • Display large logos, brand names in bold all-caps, or any element that feels like it is demanding attention
  • Use stock photography with harsh flash, cool color grading, or overtly corporate subjects
  • Clutter layouts with too many elements; if something can be removed without loss, remove it
  • Apply bouncy animations, parallax effects, or rapid transitions that break the contemplative mood
  • Use pure black (#000000) for text or backgrounds; always soften with navy or charcoal undertones
  • Add decorative elements that feel playful, whimsical, or trendy -- ornamentation should feel architectural, not illustrative
  • Use rounded pill buttons, emoji, or casual UI patterns that undermine the formal, composed atmosphere
Aesthetic Relationship
Light Academia Shares the warm palette, serif typography, and scholarly refinement, but Light Academia emphasizes intellectual warmth and literary culture over wealth and social status
Dark Academia Direct sibling in the Academia family; replaces cream and navy with candlelit darkness and Gothic moodiness while maintaining the classical taste
Minimalism Both prize restraint and whitespace, but Old Money adds warmth, texture, and heritage references that pure Minimalism strips away
Grandmillennial Shares the love of tradition and classic patterns but Grandmillennial embraces chintz, needlepoint, and maximalist layering that Old Money avoids
Scandinavian Design Both value quality materials and understated elegance, but Scandinavian design favors cool neutrals and democratic simplicity over heritage exclusivity
Art Deco Shares the taste for gold accents and formal composition but Art Deco is more geometric, glamorous, and deliberately showy
Victorian Shares the historical foundation and attention to detail but Victorian design is ornamentally heavy and maximalist where Old Money is pared back
Wes Anderson Both employ a curated, composed color palette and meticulous attention to detail, but Wes Anderson is whimsical and self-consciously stylized
Editorial / Magazine Old Money borrows editorial conventions like strong typographic hierarchy and pull quotes, but softens the bold, high-contrast approach into something quieter
Monochrome Luxe Shares the restrained palette and premium feel, but Monochrome Luxe works in strict black-and-white while Old Money introduces warm earth tones

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>Whitfield & Associates -- Est. 1892</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+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    /* ===========================
       CSS Custom Properties
       =========================== */
    :root {
      --om-bg-primary: #F8F5F0;
      --om-bg-secondary: #F0EBE3;
      --om-bg-tertiary: #E5DFD5;
      --om-bg-inverse: #1B2A4A;
      --om-bg-white: #FFFFFF;

      --om-text-primary: #1B2A4A;
      --om-text-secondary: #263652;
      --om-text-muted: #6B7B8D;
      --om-text-on-accent: #F8F5F0;
      --om-text-on-inverse: #F0EBE3;

      --om-accent-camel: #C4A676;
      --om-accent-gold: #B09860;
      --om-accent-burgundy: #6B2737;
      --om-accent-hunter: #2D4A3E;

      --om-border: #D6CBBA;
      --om-border-light: #E5DFD5;
      --om-shadow-color: rgba(27, 42, 74, 0.06);
      --om-shadow-strong: rgba(27, 42, 74, 0.12);

      --om-font-display: 'Cormorant Garamond', Garamond, serif;
      --om-font-heading: 'Playfair Display', Georgia, serif;
      --om-font-body: 'Libre Baskerville', Baskerville, Georgia, serif;
      --om-font-sans: 'Raleway', 'Gill Sans', sans-serif;
    }

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

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--om-font-body);
      font-size: 1.0625rem;
      line-height: 1.8;
      color: var(--om-text-primary);
      background-color: var(--om-bg-primary);
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--om-accent-gold); text-decoration: none; transition: color 0.25s ease; }
    a:hover { color: var(--om-text-primary); }

    /* ===========================
       Navigation
       =========================== */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 4rem;
      background: var(--om-bg-primary);
      border-bottom: 1px solid var(--om-border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav__brand {
      font-family: var(--om-font-display);
      font-size: 1.375rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--om-text-primary);
      text-decoration: none;
    }

    .nav__links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
    }

    .nav__links a {
      font-family: var(--om-font-sans);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--om-text-muted);
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid transparent;
      transition: color 0.25s ease, border-color 0.25s ease;
    }

    .nav__links a:hover,
    .nav__links a.active {
      color: var(--om-text-primary);
      border-bottom-color: var(--om-accent-camel);
    }

    /* ===========================
       Hero Section
       =========================== */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 92vh;
      padding: 6rem 2rem;
      background: var(--om-bg-primary);
      position: relative;
    }

    .hero__overline {
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--om-accent-gold);
      margin-bottom: 2.5rem;
    }

    .hero__title {
      font-family: var(--om-font-display);
      font-size: clamp(3rem, 6vw, 5.5rem);
      font-weight: 300;
      line-height: 1.06;
      color: var(--om-text-primary);
      max-width: 14ch;
      margin-bottom: 2rem;
    }

    .hero__rule {
      width: 48px;
      height: 1px;
      background: var(--om-accent-camel);
      margin: 0 auto 2rem;
    }

    .hero__subtitle {
      font-family: var(--om-font-body);
      font-size: 1rem;
      line-height: 1.9;
      color: var(--om-text-muted);
      max-width: 46ch;
      margin-bottom: 3rem;
    }

    .hero__actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* ===========================
       Buttons
       =========================== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--om-font-sans);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.9375rem 2.25rem;
      cursor: pointer;
      transition: all 0.25s ease;
      border: 1px solid transparent;
    }

    .btn--primary {
      color: var(--om-text-on-accent);
      background: var(--om-text-primary);
      border-color: var(--om-text-primary);
    }

    .btn--primary:hover {
      background: var(--om-text-secondary);
      border-color: var(--om-text-secondary);
      color: var(--om-text-on-accent);
    }

    .btn--outline {
      color: var(--om-text-primary);
      background: transparent;
      border-color: var(--om-border);
    }

    .btn--outline:hover {
      border-color: var(--om-text-primary);
      color: var(--om-text-primary);
    }

    /* ===========================
       Section Utilities
       =========================== */
    .section {
      padding: 6rem 2rem;
    }

    .section--cream {
      background: var(--om-bg-secondary);
    }

    .section--navy {
      background: var(--om-bg-inverse);
      color: var(--om-text-on-inverse);
    }

    .section__container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .section__header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .section__overline {
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--om-accent-gold);
      margin-bottom: 1rem;
    }

    .section__title {
      font-family: var(--om-font-display);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 300;
      line-height: 1.2;
      color: var(--om-text-primary);
      margin-bottom: 1rem;
    }

    .section--navy .section__title {
      color: var(--om-text-on-inverse);
    }

    .section__rule {
      width: 36px;
      height: 1px;
      background: var(--om-accent-camel);
      margin: 0 auto 1.5rem;
    }

    .section__desc {
      font-family: var(--om-font-body);
      font-size: 0.9375rem;
      color: var(--om-text-muted);
      max-width: 50ch;
      margin: 0 auto;
      line-height: 1.8;
    }

    .section--navy .section__desc {
      color: rgba(240, 235, 227, 0.6);
    }

    /* ===========================
       Feature Grid
       =========================== */
    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
    }

    .feature {
      text-align: center;
      padding: 2rem 1.5rem;
    }

    .feature__icon {
      font-family: var(--om-font-display);
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--om-accent-camel);
      margin-bottom: 1.25rem;
      line-height: 1;
    }

    .feature__title {
      font-family: var(--om-font-sans);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--om-text-primary);
      margin-bottom: 0.75rem;
    }

    .feature__rule {
      width: 20px;
      height: 1px;
      background: var(--om-accent-camel);
      margin: 0 auto 1rem;
    }

    .feature__text {
      font-family: var(--om-font-body);
      font-size: 0.875rem;
      line-height: 1.8;
      color: var(--om-text-muted);
    }

    /* ===========================
       Cards
       =========================== */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2rem;
    }

    .card {
      background: var(--om-bg-white);
      border: 1px solid var(--om-border-light);
      overflow: hidden;
      box-shadow: 0 1px 3px var(--om-shadow-color);
      transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .card:hover {
      box-shadow: 0 4px 20px var(--om-shadow-strong);
      transform: translateY(-2px);
    }

    .card__img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      filter: saturate(0.85);
    }

    .card__body {
      padding: 2rem;
    }

    .card__overline {
      font-family: var(--om-font-sans);
      font-size: 0.5625rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--om-accent-gold);
      margin-bottom: 0.75rem;
    }

    .card__title {
      font-family: var(--om-font-display);
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.3;
      color: var(--om-text-primary);
      margin-bottom: 0.75rem;
    }

    .card__text {
      font-family: var(--om-font-body);
      font-size: 0.875rem;
      line-height: 1.8;
      color: var(--om-text-muted);
      margin-bottom: 1.25rem;
    }

    .card__link {
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--om-text-primary);
      text-decoration: none;
      padding-bottom: 1px;
      border-bottom: 1px solid var(--om-border);
      transition: border-color 0.25s ease;
    }

    .card__link:hover {
      border-bottom-color: var(--om-text-primary);
    }

    /* ===========================
       Pull Quote
       =========================== */
    .quote {
      max-width: 640px;
      margin: 0 auto;
      padding: 3rem 0;
      text-align: center;
    }

    .quote__rule {
      width: 40px;
      height: 1px;
      background: rgba(240, 235, 227, 0.25);
      margin: 0 auto 2rem;
    }

    .section--navy .quote__rule {
      background: rgba(240, 235, 227, 0.25);
    }

    .quote__text {
      font-family: var(--om-font-display);
      font-size: clamp(1.25rem, 2.5vw, 1.625rem);
      font-style: italic;
      font-weight: 300;
      line-height: 1.7;
      color: var(--om-text-on-inverse);
    }

    .quote__attribution {
      display: block;
      margin-top: 1.5rem;
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-style: normal;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(240, 235, 227, 0.5);
    }

    /* ===========================
       Crest / Monogram
       =========================== */
    .crest {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 3rem;
    }

    .crest__circle {
      width: 64px;
      height: 64px;
      border: 1px solid var(--om-accent-camel);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--om-font-display);
      font-size: 1.25rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--om-accent-gold);
    }

    /* ===========================
       Newsletter
       =========================== */
    .newsletter {
      max-width: 480px;
      margin: 0 auto;
      text-align: center;
    }

    .newsletter__form {
      display: flex;
      gap: 0.75rem;
      margin-top: 2rem;
    }

    .newsletter__input {
      flex: 1;
      font-family: var(--om-font-body);
      font-size: 0.875rem;
      color: var(--om-text-primary);
      background: var(--om-bg-white);
      border: 1px solid var(--om-border);
      padding: 0.875rem 1rem;
      transition: border-color 0.25s ease;
    }

    .newsletter__input::placeholder {
      color: var(--om-border);
      font-style: italic;
    }

    .newsletter__input:focus {
      outline: none;
      border-color: var(--om-text-primary);
    }

    /* ===========================
       Footer
       =========================== */
    .footer {
      background: var(--om-bg-inverse);
      color: var(--om-text-on-inverse);
      padding: 4rem 2rem 2rem;
      text-align: center;
    }

    .footer__brand {
      font-family: var(--om-font-display);
      font-size: 1.125rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--om-text-on-inverse);
      margin-bottom: 0.5rem;
    }

    .footer__tagline {
      font-family: var(--om-font-display);
      font-style: italic;
      font-weight: 300;
      font-size: 0.875rem;
      color: rgba(240, 235, 227, 0.4);
      margin-bottom: 2rem;
    }

    .footer__links {
      display: flex;
      justify-content: center;
      gap: 2.5rem;
      list-style: none;
      margin-bottom: 2.5rem;
    }

    .footer__links a {
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240, 235, 227, 0.45);
      text-decoration: none;
      transition: color 0.25s ease;
    }

    .footer__links a:hover {
      color: var(--om-accent-camel);
    }

    .footer__rule {
      width: 48px;
      height: 1px;
      background: rgba(240, 235, 227, 0.12);
      margin: 0 auto 1.5rem;
    }

    .footer__copy {
      font-family: var(--om-font-sans);
      font-size: 0.625rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: rgba(240, 235, 227, 0.25);
    }

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

      .nav__links {
        display: none; /* Hamburger menu in production */
      }

      .hero {
        min-height: 75vh;
        padding: 4rem 1.5rem;
      }

      .section {
        padding: 4rem 1.5rem;
      }

      .features {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

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

      .newsletter__form {
        flex-direction: column;
      }

      .footer__links {
        flex-wrap: wrap;
        gap: 1rem 2rem;
      }
    }
  </style>
</head>
<body>

  <!-- ===========================
       Navigation
       =========================== -->
  <nav class="nav">
    <a href="#" class="nav__brand">Whitfield & Associates</a>
    <ul class="nav__links">
      <li><a href="#" class="active">Heritage</a></li>
      <li><a href="#">Collections</a></li>
      <li><a href="#">Residence</a></li>
      <li><a href="#">Journal</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- ===========================
       Hero Section
       =========================== -->
  <header class="hero">
    <span class="hero__overline">Established 1892</span>
    <h1 class="hero__title">The Quiet Art of Lasting Things</h1>
    <div class="hero__rule"></div>
    <p class="hero__subtitle">For over a century, we have believed that true quality speaks for itself. Our work is measured not in seasons, but in generations.</p>
    <div class="hero__actions">
      <a href="#collections" class="btn btn--primary">View Collections</a>
      <a href="#heritage" class="btn btn--outline">Our Heritage</a>
    </div>
  </header>

  <!-- ===========================
       Features / Values
       =========================== -->
  <section id="heritage" class="section">
    <div class="section__container">
      <div class="section__header">
        <p class="section__overline">Our Principles</p>
        <h2 class="section__title">Built to Endure</h2>
        <div class="section__rule"></div>
        <p class="section__desc">We believe that the finest things require no announcement. Quality reveals itself quietly, through touch, through time, through the confidence of knowing rather than showing.</p>
      </div>

      <div class="features">
        <div class="feature">
          <div class="feature__icon">I</div>
          <h3 class="feature__title">Heritage</h3>
          <div class="feature__rule"></div>
          <p class="feature__text">Every piece carries the weight of tradition, informed by generations of knowledge passed down through careful hands.</p>
        </div>
        <div class="feature">
          <div class="feature__icon">II</div>
          <h3 class="feature__title">Craftsmanship</h3>
          <div class="feature__rule"></div>
          <p class="feature__text">Materials selected for their character and longevity. Techniques refined over decades. Details visible only to those who look closely.</p>
        </div>
        <div class="feature">
          <div class="feature__icon">III</div>
          <h3 class="feature__title">Restraint</h3>
          <div class="feature__rule"></div>
          <p class="feature__text">We believe in the power of understatement. What we choose not to include is as considered as what remains.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===========================
       Quote Section (Navy)
       =========================== -->
  <section class="section section--navy">
    <div class="quote">
      <div class="quote__rule"></div>
      <p class="quote__text">Elegance is not about being noticed. It is about being remembered.</p>
      <span class="quote__attribution">Giorgio Armani</span>
      <div class="quote__rule" style="margin-top: 2rem;"></div>
    </div>
  </section>

  <!-- ===========================
       Collections / Cards
       =========================== -->
  <section id="collections" class="section section--cream">
    <div class="section__container">
      <div class="section__header">
        <p class="section__overline">The Collection</p>
        <h2 class="section__title">Considered Selections</h2>
        <div class="section__rule"></div>
        <p class="section__desc">Each piece chosen for its ability to complement a life lived with intention. Nothing fleeting, nothing superfluous.</p>
      </div>

      <div class="cards">
        <!-- Card 1 -->
        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop&crop=center" alt="Tailored wool coat draped over a leather chair">
          <div class="card__body">
            <span class="card__overline">Tailoring</span>
            <h3 class="card__title">The Unstructured Blazer</h3>
            <p class="card__text">Soft-shouldered and impeccably cut from double-faced wool. No padding, no lining, no effort visible. The kind of jacket that improves with each wearing.</p>
            <a href="#" class="card__link">Explore &rarr;</a>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1449505278894-297fdb3edbc1?w=600&h=400&fit=crop&crop=center" alt="Leather-bound journals on an oak writing desk">
          <div class="card__body">
            <span class="card__overline">Library</span>
            <h3 class="card__title">The Reading Room</h3>
            <p class="card__text">A curated selection of volumes bound in full grain leather, set upon shelves of aged oak. Each title chosen not for display, but for the quality of its thought.</p>
            <a href="#" class="card__link">Explore &rarr;</a>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="card">
          <img class="card__img" src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=600&h=400&fit=crop&crop=center" alt="Country estate grounds with morning fog">
          <div class="card__body">
            <span class="card__overline">Residence</span>
            <h3 class="card__title">The Country House</h3>
            <p class="card__text">Interiors that have evolved over generations rather than been decorated in a single season. Patina preferred. Perfection not required.</p>
            <a href="#" class="card__link">Explore &rarr;</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ===========================
       Newsletter
       =========================== -->
  <section class="section">
    <div class="section__container">
      <div class="newsletter">
        <div class="crest">
          <div class="crest__circle">W</div>
        </div>
        <p class="section__overline">Correspondence</p>
        <h2 class="section__title" style="font-size: clamp(1.5rem, 3vw, 2rem);">Private Letters</h2>
        <div class="section__rule"></div>
        <p class="section__desc">Occasional notes on craft, heritage, and the quiet pleasures of a considered life. Sent quarterly, never more.</p>
        <form class="newsletter__form" onsubmit="event.preventDefault()">
          <input type="email" class="newsletter__input" placeholder="Your email address" aria-label="Email address">
          <button type="submit" class="btn btn--primary" style="white-space: nowrap;">Subscribe</button>
        </form>
      </div>
    </div>
  </section>

  <!-- ===========================
       Footer
       =========================== -->
  <footer class="footer">
    <div class="footer__brand">Whitfield & Associates</div>
    <p class="footer__tagline">The quiet art of lasting things</p>
    <ul class="footer__links">
      <li><a href="#">Heritage</a></li>
      <li><a href="#">Collections</a></li>
      <li><a href="#">Residence</a></li>
      <li><a href="#">Journal</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
    <div class="footer__rule"></div>
    <p class="footer__copy">&copy; 2026 Whitfield & Associates. All rights reserved.</p>
  </footer>

</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.