website_designs

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.

Recommended Web Fonts (Google Fonts)

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>

This site is open source. Improve this page.