Agence WagnerAgence Wagner
FRENDEELS
Back to designs
ÉlégantClassiqueOrnementalMaximaliste
Preview

Hollywood Regency Design Reference

Hollywood Regency is a glamorous interior design and decorative arts aesthetic originating from 1920s-1950s Southern California and the Golden Age of Hollywood cinema. It is characterized by opulence, theatrical elegance, luxurious materials, metallic and mirrored accents, and extravagant asymmetrical balance. The style was designed to convey cinematic glamour -- spaces that make everything (and everyone) look stunning. It merges the ornamental drama of Baroque and Rococo with the geometric confidence of Art Deco, filtered through the lens of Old Hollywood sophistication.

Visual Characteristics

Core Motifs and Patterns

  • Sunburst motifs -- radiating fan or starburst shapes used in mirrors, clocks, and decorative elements; the single most iconic Hollywood Regency motif
  • Greek key patterns -- geometric meander borders used in trim, rugs, and frames
  • Animal prints -- zebra, leopard, cheetah, tiger, and snakeskin patterns used as bold accent textures
  • Chevron and zig-zag patterns -- angular repetitions used in textiles, carpets, and wallcoverings
  • Chinoiserie elements -- Asian-inspired decorative motifs (pagodas, dragons, bamboo lattice)
  • Tropical elements -- palm trees, hibiscus flowers, and exotic botanical motifs
  • Checkered patterns -- classic black-and-white floor tiles or diamond arrangements
  • Bold florals -- oversized, dramatic floral patterns in both monochrome and vivid color
  • Tufted upholstery -- diamond-quilted surfaces with button tufting (a signature luxury texture)
  • Scrollwork and plasterwork -- Rococo and Baroque-inspired ornamental curves

Design Principles

  • Maximalist approach -- layered, rich, and visually abundant; never minimalist
  • Theatrical presentation -- every element staged for dramatic visual impact
  • Asymmetrical balance -- intentional visual tension balanced through weight rather than symmetry
  • High-contrast pairings -- bold darks with brilliant lights, matte with gloss, rough with smooth
  • Curvaceous forms -- rounded, sensuous shapes in furniture and layout elements
  • Mirrored and reflective surfaces -- amplify light, create depth, add glamour
  • Lacquered and high-gloss finishes -- polished, light-catching surfaces throughout
  • Symmetrical accent groupings -- pairs of identical objects flanking a central element (e.g., matching lamps, chairs, or mirrors)
  • Scale and proportion play -- oversized mirrors, dramatic lighting, large-scale patterns

Color Palette

Primary Scheme

Role Colors
Dramatic base Black, white, and their high-contrast pairing
Metallic accents Gold, silver, chrome, bronze
Jewel-tone accents Emerald green, sapphire blue, ruby red, amethyst purple

Signature Colors

Color Hex (suggested) Usage
Jet Black #0D0D0D, #1A1A1A Primary backgrounds, dramatic base
Brilliant White #FFFFFF, #FAFAFA Contrast panels, checkered patterns
Champagne Gold #D4AF37, #C9A84C Primary metallic accent, borders, headings
Antique Gold #C5A03F, #B8942E Warm gold for ornamental details
Polished Silver #C0C0C0, #D4D4D8 Cool metallic accent, chrome effects
Emerald Green #046A38, #115740 Jewel-tone accent, velvet textures
Sapphire Blue #0F52BA, #1B3A6B Jewel-tone accent, dramatic depth
Ruby Red #9B111E, #CC0033 Bold accent, call-to-action elements
Amethyst Purple #6B3FA0, #7B4D9E Luxurious accent, secondary highlights
Topaz Blue #0A7EC2, #1C8FD6 Bright accent variation
Blush Pink #F4C2C2, #E8B4B8 Softening accent, feminine glamour
Turquoise #40E0D0, #48D1CC Classic Hollywood Regency accent
Citrine Gold #E4D00A, #D4C90A Bright metallic highlight
Dove Gray #6B6B6B, #8C8C8C Neutral bridge tone
Cream / Ivory #FFF8E7, #F5F0E1 Warm light backgrounds
Greige #B2A89F, #A89F91 Sophisticated warm neutral

Suggested CSS Custom Properties

:root {
  /* Base */
  --hr-black: #0d0d0d;
  --hr-charcoal: #1a1a1a;
  --hr-white: #fafafa;
  --hr-cream: #fff8e7;
  --hr-ivory: #f5f0e1;

  /* Metallics */
  --hr-gold: #d4af37;
  --hr-gold-light: #e8d48b;
  --hr-gold-dark: #b8942e;
  --hr-silver: #c0c0c0;
  --hr-chrome: #d4d4d8;
  --hr-bronze: #a0785a;

  /* Jewel tones */
  --hr-emerald: #046a38;
  --hr-sapphire: #0f52ba;
  --hr-ruby: #9b111e;
  --hr-amethyst: #6b3fa0;
  --hr-topaz: #0a7ec2;
  --hr-turquoise: #40e0d0;

  /* Soft accents */
  --hr-blush: #f4c2c2;
  --hr-citrine: #e4d00a;
  --hr-dove: #6b6b6b;
  --hr-greige: #b2a89f;

  /* Functional */
  --hr-bg-primary: var(--hr-black);
  --hr-bg-secondary: var(--hr-charcoal);
  --hr-bg-light: var(--hr-cream);
  --hr-text-primary: var(--hr-cream);
  --hr-text-dark: var(--hr-charcoal);
  --hr-accent: var(--hr-gold);
  --hr-border: var(--hr-gold);
}

Color Approaches

  • Black-and-white foundation with jewel-tone accents -- the classic Hollywood Regency formula
  • Gold as the connective metallic -- gold borders, text accents, and ornamental details unify the palette
  • High-gloss, high-contrast pairings -- never muddy or muted; every color should feel polished
  • Jewel tones used sparingly but boldly -- one or two jewel accents per composition, not all at once
  • Soft pastels to temper drama -- blush, mint, or icy blue can soften an otherwise intense palette

Typography

Typeface Characteristics

Hollywood Regency typography features:

  • Elegant script and serif typefaces for display text -- conveying handwritten glamour
  • Clean, geometric sans-serifs for body text -- effortless modern readability
  • High contrast between display and body fonts -- dramatic scripts paired with crisp sans-serifs
  • Generous letter-spacing in uppercase settings for a luxurious, airy feel
  • Decorative capitals and stylized initial letters
  • Mixed case usage -- uppercase for headings, elegant mixed case for body
  • Thin to medium weights preferred over heavy/bold for an refined appearance
Font Style Usage
Playfair Display High-contrast transitional serif Headlines, section titles
Cormorant Garamond Elegant, refined serif Headlines, pull quotes
Cinzel Classical serif with regal proportions Formal headings, navigation
Cinzel Decorative Ornamental serif Feature titles, logos, hero text
Great Vibes Elegant flowing script Accent text, decorative quotes
Libre Baskerville Classic book serif Body text, paragraphs
Lato Clean geometric sans-serif Body text, UI elements
Montserrat Geometric sans with Art Deco roots Subheadings, buttons, captions
Josefin Sans Geometric, vintage-inspired sans Subheadings, navigation
Tenor Sans Clean, sophisticated sans Body copy, descriptions
Poiret One Thin geometric display Decorative accents, elegant labels

Typography CSS Example

/* Display / Hero text */
.hr-display {
  font-family: 'Cinzel Decorative', 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.12em;
  line-height: 1.1;
  color: var(--hr-gold);
  text-transform: uppercase;
}

/* Headlines */
h1, h2, h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  letter-spacing: 0.08em;
  color: var(--hr-gold);
  font-weight: 400;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
}

/* Script accent text */
.hr-script {
  font-family: 'Great Vibes', cursive;
  font-size: 1.5em;
  color: var(--hr-gold-light);
  letter-spacing: 0.02em;
}

/* Body text */
body {
  font-family: 'Lato', 'Libre Baskerville', serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--hr-cream);
}

/* Subheadings and captions */
.hr-subheading {
  font-family: 'Montserrat', 'Josefin Sans', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  color: var(--hr-silver);
}

Layout Principles

Grid and Structure

  • Centered, symmetrical compositions -- content anchored on a strong vertical axis, with flanking decorative elements
  • Generous whitespace (or dark space) -- allow luxurious breathing room around elements; never crowded
  • Asymmetrical visual balance -- unequal elements balanced by visual weight rather than mirror symmetry
  • Layered depth -- overlapping elements, shadows, and transparency to create visual richness
  • Curvaceous containers -- rounded corners, arched tops, and flowing shapes alongside geometric frames
  • Modular grid with ornamental breaks -- structured underlying grid with decorative elements that break the grid intentionally

Section Organization

  • Use ornamental dividers between sections (gold rule lines, sunburst separators, Greek key borders)
  • Apply dramatic hero sections with full-width imagery or gradients
  • Create visual hierarchy through contrast -- dark sections alternating with light or metallic sections
  • Employ framed content panels -- bordered cards with decorative corner treatments
  • Use mirrored/reflected layout pairs -- two-column layouts with matching visual weight

Spacing and Proportion

  • Generous padding on all content containers (4rem+ on major sections)
  • Wide margins creating a stage-like frame around content
  • Vertical rhythm established through consistent spacing multiples
  • Oversized hero elements contrasted with refined, smaller detail sections

CSS/Design Techniques

Gold Metallic Gradient Effects

/* Gold metallic gradient for headings */
.hr-gold-text {
  background: linear-gradient(
    135deg,
    #bf953f 0%,
    #fcf6ba 25%,
    #d4af37 50%,
    #fbf5b7 75%,
    #aa771c 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold metallic surface/background */
.hr-gold-surface {
  background: linear-gradient(
    135deg,
    #bf953f,
    #fcf6ba,
    #b38728,
    #fbf5b7,
    #aa771c
  );
}

/* Silver/chrome metallic gradient */
.hr-chrome-surface {
  background: linear-gradient(
    135deg,
    #b0b0b0,
    #e8e8e8,
    #a0a0a0,
    #d8d8d8,
    #c0c0c0
  );
}

Mirrored / Reflective Surface Effect

/* Simulated mirror/lacquer reflection */
.hr-mirror {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(0, 0, 0, 0.05) 60%,
    rgba(0, 0, 0, 0.15) 100%
  );
  border: 1px solid rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(2px);
}

/* High-gloss lacquer effect */
.hr-lacquer {
  background: var(--hr-black);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

Greek Key Border Pattern

/* Greek key border using repeating gradients */
.hr-greek-key-border {
  border: 3px solid var(--hr-gold);
  outline: 1px solid var(--hr-gold);
  outline-offset: 6px;
  position: relative;
}

/* Simplified Greek key top border */
.hr-greek-key-top {
  border-top: 4px solid var(--hr-gold);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--hr-gold) 0px,
      var(--hr-gold) 2px,
      transparent 2px,
      transparent 12px
    );
  background-size: 14px 8px;
  background-position: 0 0;
  background-repeat: repeat-x;
  padding-top: 16px;
}

Sunburst Decorative Element

/* Radial sunburst background decoration */
.hr-sunburst {
  background: repeating-conic-gradient(
    var(--hr-gold) 0deg 3deg,
    transparent 3deg 6deg
  );
  opacity: 0.08;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
}

/* Sunburst divider using pseudo-elements */
.hr-sunburst-divider {
  text-align: center;
  position: relative;
  padding: 2rem 0;
}

.hr-sunburst-divider::before {
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background: repeating-conic-gradient(
    from 0deg,
    var(--hr-gold) 0deg 4deg,
    transparent 4deg 12deg
  );
  border-radius: 50%;
  opacity: 0.2;
}

Glamorous Card / Panel

.hr-card {
  background: linear-gradient(
    160deg,
    rgba(26, 26, 26, 0.95),
    rgba(13, 13, 13, 0.98)
  );
  border: 1px solid var(--hr-gold);
  border-radius: 2px;
  padding: 3rem;
  position: relative;
  text-align: center;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

/* Decorative corner ornaments */
.hr-card::before,
.hr-card::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--hr-gold);
  border-style: solid;
}

.hr-card::before {
  top: 10px;
  left: 10px;
  border-width: 2px 0 0 2px;
}

.hr-card::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 2px 2px 0;
}

Ornamental Dividers

/* Elegant gold rule divider */
.hr-divider {
  border: none;
  height: 0;
  border-top: 1px solid var(--hr-gold);
  width: 60%;
  margin: 3rem auto;
  position: relative;
}

/* Divider with center diamond ornament */
.hr-divider-diamond {
  border: none;
  height: 0;
  border-top: 1px solid var(--hr-gold);
  width: 50%;
  margin: 3rem auto;
  position: relative;
}

.hr-divider-diamond::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--hr-gold);
}

/* Double rule with spacing */
.hr-divider-double {
  border: none;
  border-top: 2px solid var(--hr-gold);
  border-bottom: 1px solid var(--hr-gold);
  height: 6px;
  width: 40%;
  margin: 3rem auto;
}

Tufted / Quilted Texture Pattern

/* Diamond tufted upholstery texture */
.hr-tufted {
  background-color: var(--hr-charcoal);
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(212, 175, 55, 0.15) 1px,
      transparent 3px
    );
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* Velvet texture overlay */
.hr-velvet {
  position: relative;
}

.hr-velvet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
}

Checkered Floor Pattern

/* Classic black-and-white Hollywood Regency checkerboard */
.hr-checkerboard {
  background-color: var(--hr-white);
  background-image:
    linear-gradient(45deg, var(--hr-black) 25%, transparent 25%),
    linear-gradient(-45deg, var(--hr-black) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--hr-black) 75%),
    linear-gradient(-45deg, transparent 75%, var(--hr-black) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 30px, 30px -30px, -30px 0;
}

Glamorous Button Styles

.hr-button {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--hr-gold);
  border: 1px solid var(--hr-gold);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.hr-button:hover {
  background: var(--hr-gold);
  color: var(--hr-black);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Filled glamour button */
.hr-button-filled {
  background: linear-gradient(135deg, #bf953f, #d4af37, #f0d060);
  color: var(--hr-black);
  border: none;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hr-button-filled:hover {
  box-shadow:
    0 4px 15px rgba(212, 175, 55, 0.4),
    0 0 30px rgba(212, 175, 55, 0.15);
  transform: translateY(-1px);
}

Glamorous Shadow and Glow

/* Soft gold glow for featured elements */
.hr-glow {
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.15),
    0 0 45px rgba(212, 175, 55, 0.05);
}

/* Deep dramatic shadow */
.hr-dramatic-shadow {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Combined glow + shadow for luxury elevation */
.hr-elevated {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

Materials and Textures (Visual Metaphors for Web)

Physical Hollywood Regency materials and their web equivalents:

Physical Material Web Equivalent
Mirrored surfaces Reflective gradients, glassmorphism overlays, subtle shine effects
Lacquered black Deep black backgrounds with diagonal gloss gradients
Polished chrome Silver/white linear metallic gradients
Gold leaf / gilt Gold gradient text and borders (#bf953f to #fcf6ba)
Velvet upholstery Subtle radial gradient texture with soft depth
Silk fabric Smooth, gentle diagonal gradients with minimal noise
Marble flooring Light noise texture overlay on cream/white surfaces
Crystal/glass Transparent overlays with prismatic light effects
Checkered tile CSS checkerboard patterns in black and white
Animal print SVG or CSS pattern backgrounds (leopard spots, zebra stripes)
Tufted leather Diamond grid pattern with point highlights
Exotic wood Warm brown gradients with subtle grain texture

Animation and Interaction Principles

Hollywood Regency interactions should feel smooth, graceful, and deliberate -- like a slow camera pan across a glamorous set.

/* Base transition for all interactive elements */
.hr-transition {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Graceful hover lift */
.hr-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(212, 175, 55, 0.1);
}

/* Elegant fade-in for scroll reveals */
@keyframes hr-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hr-reveal {
  animation: hr-fade-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Shimmer effect for metallic elements */
@keyframes hr-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.hr-shimmer {
  background: linear-gradient(
    90deg,
    var(--hr-gold-dark) 0%,
    var(--hr-gold-light) 25%,
    var(--hr-gold) 50%,
    var(--hr-gold-light) 75%,
    var(--hr-gold-dark) 100%
  );
  background-size: 200% auto;
  animation: hr-shimmer 4s linear infinite;
}
Aesthetic Relationship to Hollywood Regency
Art Deco Close sibling; shares geometric motifs, gold metallics, and glamour but Art Deco is more angular and geometric
Baroque Ancestor influence; contributes scrollwork, ornamental excess, and theatrical drama
Rococo Ancestor influence; contributes curves, playfulness, and decorative plasterwork
Old Hollywood Cultural twin; the lifestyle and fashion aesthetic that accompanies Hollywood Regency interiors
Maximalism Shared philosophy; both embrace abundance, layering, and visual richness over restraint
Mid-Century Modern Contemporary counterpart; emerged in the same era but favors simplicity over opulence
Regency Historical reference; the English Regency era (1811-1820) provides classical architectural forms
Hellenic Decorative influence; Greek key patterns and classical proportions
Tropical Crossover influence; palm fronds, hibiscus, and exotic botanical elements
Glam Modern descendant; carries forward the metallic, luxurious, and dramatic sensibility

Quick-Start: Minimal Hollywood Regency Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hollywood Regency Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400&family=Montserrat:wght@400;600&family=Great+Vibes&display=swap" rel="stylesheet">
  <style>
    :root {
      --hr-black: #0d0d0d;
      --hr-charcoal: #1a1a1a;
      --hr-cream: #fff8e7;
      --hr-gold: #d4af37;
      --hr-gold-light: #e8d48b;
      --hr-gold-dark: #b8942e;
      --hr-silver: #c0c0c0;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--hr-black);
      color: var(--hr-cream);
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.8;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      color: var(--hr-gold);
      font-weight: 400;
      letter-spacing: 0.08em;
    }

    .hero {
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 7vw, 5rem);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 1rem;
    }

    .hero .script-accent {
      font-family: 'Great Vibes', cursive;
      font-size: 1.5rem;
      color: var(--hr-gold-light);
      display: block;
      margin-bottom: 2rem;
    }

    .hr-divider {
      border: none;
      border-top: 1px solid var(--hr-gold);
      width: 40%;
      margin: 3rem auto;
      position: relative;
    }

    .hr-divider::after {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 10px;
      height: 10px;
      background: var(--hr-gold);
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
    }

    .subheading {
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-size: 0.8rem;
      color: var(--hr-silver);
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div class="hero">
    <span class="script-accent">Presenting</span>
    <h1>Title Here</h1>
    <hr class="hr-divider">
    <p class="subheading">A subtitle in elegant Montserrat</p>
  </div>
  <section>
    <h2>Section Heading</h2>
    <p>Content styled with Hollywood Regency glamour -- luxurious,
       theatrical, and visually stunning.</p>
  </section>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.