Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
SombreÉlégantGéométriqueOrnementalClassique
Vorschau

Noir Deco Design Reference

Overview

Noir Deco is a hybrid design aesthetic that fuses the geometric opulence of Art Deco (1920s-1940s) with the brooding, shadow-drenched atmosphere of Film Noir (1940s-1960s). Where Art Deco celebrates progress, luxury, and modernist glamour through bold symmetry, sunburst motifs, and metallic excess, Film Noir subverts that optimism with chiaroscuro lighting, moral ambiguity, and a visual language of darkness, smoke, and rain-slicked streets. Noir Deco lives at the intersection: it retains the architectural grandeur, the gold leaf, the chevrons, and the geometric precision of the Deco era, but casts everything in deep shadow, replacing Art Deco's bright metallics with tarnished golds against near-black surfaces, and swapping the movement's celebration of daylight for the dramatic tension of a single shaft of light cutting across a dark room.

In web and UI design, Noir Deco translates into gold-on-black color schemes, high-contrast chiaroscuro compositions, geometric border ornaments, dramatic typographic hierarchy, and an atmosphere of luxurious menace. Backgrounds are overwhelmingly dark -- not flat black, but layered charcoals, deep navy-blacks, and smoky gradients that suggest depth and shadow. Gold is the signature accent: warm, rich, and used sparingly for borders, headings, dividers, and interactive elements, evoking both the gilded lobby of a 1930s skyscraper and the amber glow of a detective's desk lamp. Typography is bold and architectural, favoring geometric serifs and condensed sans-serifs with strong vertical emphasis. Layouts employ rigid symmetry and strong grid structures, softened by atmospheric effects like subtle noise textures, vignettes, and gradient shadows that evoke the cinematographic quality of a noir film. The overall mood is one of sophisticated darkness -- elegant, dangerous, and impossibly stylish.

Visual Characteristics

Core Design Traits

  • Gold-on-black dominance: Rich, warm gold (#D4AF37 and variants) serves as the primary accent against deep black and charcoal backgrounds, creating a palette of luxurious darkness inspired by gilded Deco interiors lit by a single lamp
  • Chiaroscuro lighting effects: Strong directional light sources, deep shadows, dramatic vignettes, and high-contrast light/dark transitions reference the cinematographic techniques of Film Noir -- light cutting sharply through darkness
  • Geometric Deco ornamentation: Chevrons, sunbursts, stepped forms, fan shapes, and radiating line patterns borrowed from Art Deco architecture and graphic design, rendered in gold against dark surfaces
  • Symmetrical, architectural composition: Rigid bilateral symmetry, strong central axes, and tiered/stepped layout structures that echo the facades of Deco skyscrapers like the Chrysler Building
  • Atmospheric texture and grain: Subtle film-grain overlays, noise textures, and halftone dot patterns that evoke the visual quality of 1940s black-and-white cinematography and aged printed materials
  • Dramatic typographic scale: Oversized display headlines in geometric or high-contrast serif typefaces, creating commanding visual hierarchy reminiscent of both Deco poster design and noir film title sequences
  • Linear border systems: Thin gold lines, double-rule borders, geometric corner accents, and stepped frame elements that define content areas with architectural precision
  • Smoke and fog atmospherics: Soft radial gradients, blurred overlay layers, and desaturated ambient glows that suggest cigarette smoke, city fog, and the hazy quality of noir cinematography
  • Vignette and spotlight effects: Dark edges with illuminated centers, mimicking the spotlight-on-darkness composition of classic noir scenes where the protagonist steps into a pool of light
  • Metallic gradient treatments: Gold, bronze, and brass gradient fills on text and decorative elements that simulate the look of engraved metal, gilded signage, and tarnished brass fixtures

Design Principles

  • Darkness as luxury: Black is not the absence of design but the foundation of it; deep, layered darkness communicates sophistication, mystery, and exclusivity
  • Restraint in accent: Gold is powerful because it is scarce; use metallic accents selectively for maximum impact against overwhelming darkness
  • Geometric discipline: Every decorative element should be constructible with ruler and compass; organic, freeform shapes contradict the Deco-Noir sensibility
  • Light tells a story: Illumination should feel intentional and dramatic, as if every lit element exists within a carefully composed frame where most of the world is in shadow
  • Vertical authority: Tall, narrow proportions, strong vertical lines, and upward-reaching compositions project the same power and ambition as a Deco tower or a noir skyline silhouette
  • Atmosphere over flatness: Surfaces should have depth, grain, and subtle texture; flat, clean digital surfaces break the illusion of a world that exists in shadow and smoke
  • Symmetry as power: Centered, balanced compositions project authority and control, reflecting both Deco's orderly grandeur and noir's carefully composed tension
  • Contrast as drama: The relationship between light and dark, gold and black, ornament and void, should always feel intentional and charged with visual tension

Color Palette

The Noir Deco palette draws from the gilded interiors of 1930s Art Deco architecture, the warm amber of whiskey-lit speakeasies, and the deep shadows of Film Noir cinematography. The foundation is overwhelmingly dark, with gold and warm metallics providing selective illumination. Cool accents of steel blue and muted teal reference rain-soaked city streets and moonlit windows.

Swatch Hex Role/Usage
Noir Black #0A0A0C Primary background, deepest shadow areas, page base
Charcoal Smoke #1A1A1E Secondary background, card surfaces, elevated panels
Dark Graphite #2A2A30 Tertiary surface, input fields, recessed areas
Gunmetal #3A3A42 Borders, subtle dividers, inactive UI elements
Ash Gray #6B6B75 Secondary text, captions, muted labels
Warm Silver #9A9A9E Body text on dark backgrounds, paragraph copy
Deco Gold #D4AF37 Primary accent, headings, borders, interactive elements
Burnished Gold #B8952A Hover states, secondary gold, pressed buttons
Pale Gold #E8D48B Highlight text, gold gradients bright stop, sparkle
Champagne #F5E6C8 Light accent text, subtle highlights, cream tones
Brass #C49A2A Metallic gradient mid-tone, decorative detail
Midnight Navy #0D1117 Alternative dark base, deep blue-black shadow
Noir Steel #2C3E50 Cool accent panels, secondary containers, contrast areas
Rain Blue #4A6E8A Cool tertiary accent, links, subtle highlights
Blood Amber #8B4513 Warm tertiary, decorative borders, vintage tone

CSS Custom Properties

:root {
  /* Noir foundations */
  --noir-black: #0a0a0c;
  --noir-charcoal: #1a1a1e;
  --noir-graphite: #2a2a30;
  --noir-gunmetal: #3a3a42;
  --noir-ash: #6b6b75;
  --noir-silver: #9a9a9e;

  /* Gold metallics */
  --noir-gold: #d4af37;
  --noir-gold-dark: #b8952a;
  --noir-gold-light: #e8d48b;
  --noir-gold-pale: #f5e6c8;
  --noir-brass: #c49a2a;

  /* Cool accents */
  --noir-navy: #0d1117;
  --noir-steel: #2c3e50;
  --noir-rain: #4a6e8a;
  --noir-amber: #8b4513;

  /* Functional mappings */
  --noir-bg-primary: var(--noir-black);
  --noir-bg-secondary: var(--noir-charcoal);
  --noir-bg-surface: var(--noir-graphite);
  --noir-text-primary: var(--noir-gold-pale);
  --noir-text-secondary: var(--noir-silver);
  --noir-text-muted: var(--noir-ash);
  --noir-accent: var(--noir-gold);
  --noir-accent-hover: var(--noir-gold-light);
  --noir-border: var(--noir-gunmetal);
  --noir-border-accent: var(--noir-gold);

  /* Transparency utilities */
  --noir-gold-glow: rgba(212, 175, 55, 0.25);
  --noir-gold-subtle: rgba(212, 175, 55, 0.08);
  --noir-shadow: rgba(0, 0, 0, 0.6);
  --noir-shadow-deep: rgba(0, 0, 0, 0.85);
  --noir-glass: rgba(26, 26, 30, 0.85);
  --noir-glass-border: rgba(212, 175, 55, 0.12);
}

Typography

Noir Deco typography fuses Art Deco's geometric letterform construction with the dramatic weight and gravitas of Film Noir title sequences. Headlines demand attention through bold, angular typefaces with strong vertical proportions, while body text remains legible through clean, well-spaced sans-serifs. Gold gradient fills on display text simulate the gilded signage of Deco-era hotels and theaters, while uppercase tracking evokes both architectural lettering and the stark title cards of 1940s films.

Font Weight(s) Style Usage
Playfair Display 400, 700, 900 High-contrast transitional serif with dramatic thick-thin strokes Hero headlines, editorial display titles
Cinzel 400, 700, 900 Classical serif with engraved, architectural quality Section headings, formal titles, monograms
Cinzel Decorative 400, 700, 900 Ornamental variant of Cinzel with Deco-influenced flourishes Feature headlines, logo treatments, display accents
Bebas Neue 400 Bold condensed sans-serif, uppercase by nature Navigation labels, section dividers, banner headlines
Josefin Sans 300, 400, 600, 700 Geometric sans-serif with vintage Art Deco proportions Subheadings, UI labels, secondary text
Raleway 300, 400, 600, 700 Elegant geometric sans with fine weight range Body text, long-form reading, paragraph copy
Poiret One 400 Thin geometric display with distinct Deco character Decorative accents, taglines, stylistic headlines
Limelight 400 High-contrast geometric sans inspired by 1920s theater marquees Display headlines, dramatic section openers

Font Pairing Suggestions

Heading Body Mood
Cinzel Decorative 700 Raleway 400 Gilded architectural grandeur with refined readability
Playfair Display 900 Josefin Sans 300 Dramatic noir title card with geometric Deco elegance
Bebas Neue 400 Raleway 400 Condensed authority with clean, modern body text
Limelight 400 Josefin Sans 400 Full Art Deco theater marquee with vintage sans-serif body
Cinzel 700 Raleway 300 Classical engraved formality with light, airy readability

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Raleway:wght@300;400;600;700&family=Josefin+Sans:wght@300;400;600;700&family=Bebas+Neue&family=Playfair+Display:wght@400;700;900&display=swap');

body {
  font-family: 'Raleway', 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.025em;
  color: var(--noir-text-secondary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--noir-text-primary);
}

/* Gold gradient display text -- gilded Deco headline */
.noir-display {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(
    180deg,
    #f5e6c8 0%,
    #d4af37 25%,
    #b8952a 50%,
    #d4af37 75%,
    #f5e6c8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Condensed uppercase label -- navigation and section markers */
.noir-label {
  font-family: 'Bebas Neue', 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--noir-gold);
}

/* Geometric Deco accent text */
.noir-accent-text {
  font-family: 'Poiret One', 'Josefin Sans', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: var(--noir-gold-light);
}

Layout Principles

  • Centered, symmetrical compositions: Content aligns to a strong central axis with bilateral symmetry, projecting the architectural authority of a Deco lobby or the carefully composed frame of a noir scene
  • Full-width hero sections with dramatic vignette: Large, immersive hero areas with dark vignettes around edges and a single illuminated focal point -- headline or image -- emerging from shadow
  • Generous negative space as darkness: Unlike minimalist white space, Noir Deco uses empty dark areas as atmospheric shadow, allowing elements to breathe while maintaining the sense of a dimly lit room
  • Geometric grid structures with gold dividers: Content areas defined by thin gold rules, corner ornaments, and stepped border patterns rather than card shadows or background-color differentiation
  • Narrow content columns within wide dark frames: Body text constrained to 600-700px width, centered within expansive dark backgrounds, creating the feeling of a lit page in a dark room
  • Vertical emphasis and tiered sections: Sections stack with strong vertical rhythm, using stepped/tiered spacing and increasing gold accent density toward focal areas
  • Decorative geometric dividers between sections: Chevron patterns, sunburst rules, diamond dots, and stepped lines in gold separate content areas with Deco ornamentation
  • Card layouts with gold-bordered containment: Content cards use thin gold borders or corner-accent framing rather than background elevation, maintaining the dark atmospheric base
  • Fixed or sticky navigation with glass-dark treatment: Top navigation bars with dark glass effect (blurred, semi-transparent charcoal) and gold accent text provide persistent wayfinding without breaking the mood
  • Progressive illumination on scroll: As users scroll deeper, sections can subtly increase or shift their gold accent intensity, creating the narrative feeling of moving through a noir story
  • Mobile-first darkness: On small screens, simplify geometric ornaments but maintain the gold-on-black palette and dramatic typographic hierarchy; atmosphere is non-negotiable

CSS / Design Techniques

Noir Deco Card

.noir-card {
  background: linear-gradient(
    160deg,
    rgba(42, 42, 48, 0.6) 0%,
    rgba(26, 26, 30, 0.9) 100%
  );
  border: 1px solid var(--noir-glass-border);
  position: relative;
  padding: 2rem;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Gold corner accents -- Deco geometric framing */
.noir-card::before,
.noir-card::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--noir-gold);
  border-style: solid;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.noir-card::before {
  top: 8px;
  left: 8px;
  border-width: 2px 0 0 2px;
}

.noir-card::after {
  bottom: 8px;
  right: 8px;
  border-width: 0 2px 2px 0;
}

.noir-card:hover {
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(212, 175, 55, 0.06);
}

.noir-card:hover::before,
.noir-card:hover::after {
  opacity: 1;
}

.noir-card h3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noir-gold);
  margin-bottom: 0.75rem;
}

.noir-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  color: var(--noir-silver);
  line-height: 1.7;
}

Noir Deco Button

.noir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2.5rem;
  font-family: 'Bebas Neue', 'Josefin Sans', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--noir-gold);
  background: transparent;
  border: 1px solid var(--noir-gold);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

/* Diagonal wipe fill on hover */
.noir-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--noir-gold) 0%,
    var(--noir-gold-dark) 100%
  );
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

.noir-btn:hover::before {
  transform: translateX(0);
}

.noir-btn:hover {
  color: var(--noir-black);
  box-shadow:
    0 4px 20px rgba(212, 175, 55, 0.25),
    0 0 40px rgba(212, 175, 55, 0.08);
}

/* Primary filled variant */
.noir-btn--primary {
  background: linear-gradient(
    135deg,
    var(--noir-gold) 0%,
    var(--noir-gold-dark) 100%
  );
  color: var(--noir-black);
  border-color: var(--noir-gold);
}

.noir-btn--primary::before {
  background: linear-gradient(
    135deg,
    var(--noir-gold-light) 0%,
    var(--noir-gold) 100%
  );
}

/* Ghost/subtle variant */
.noir-btn--ghost {
  border-color: var(--noir-gunmetal);
  color: var(--noir-silver);
}

.noir-btn--ghost:hover {
  border-color: var(--noir-gold);
  color: var(--noir-gold);
  background: var(--noir-gold-subtle);
}

.noir-btn--ghost::before {
  display: none;
}

Noir Deco Navigation

.noir-nav {
  background: rgba(10, 10, 12, 0.88);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Glowing gold underline on bottom edge */
.noir-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.4) 30%,
    rgba(212, 175, 55, 0.6) 50%,
    rgba(212, 175, 55, 0.4) 70%,
    transparent 100%
  );
}

.noir-nav__logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #f5e6c8 0%,
    #d4af37 50%,
    #b8952a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: auto;
}

.noir-nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.noir-nav__links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--noir-ash);
  position: relative;
  transition: color 0.3s ease;
}

.noir-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--noir-gold);
  transition: width 0.3s ease, left 0.3s ease;
}

.noir-nav__links a:hover {
  color: var(--noir-gold);
}

.noir-nav__links a:hover::after {
  width: 100%;
  left: 0;
}

Noir Deco Hero Section

.noir-hero {
  text-align: center;
  padding: 10rem 2rem 8rem;
  position: relative;
  overflow: hidden;
  background: var(--noir-bg-primary);
}

/* Radial spotlight -- single light source from above */
.noir-hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.03) 30%,
    transparent 65%
  );
  pointer-events: none;
}

/* Dark vignette overlay -- noir framing */
.noir-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}

.noir-hero__tagline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--noir-gold);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.noir-hero h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #f5e6c8 0%,
    #d4af37 20%,
    #b8952a 45%,
    #d4af37 65%,
    #e8d48b 85%,
    #f5e6c8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.noir-hero p {
  max-width: 580px;
  margin: 2rem auto 0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--noir-silver);
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}

.noir-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

Geometric Deco Divider

/* Chevron / sunburst divider line */
.noir-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 4rem auto;
  max-width: 400px;
  color: var(--noir-gold);
}

.noir-divider::before,
.noir-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--noir-gold),
    transparent
  );
  opacity: 0.4;
}

/* Diamond center motif */
.noir-divider__diamond {
  width: 10px;
  height: 10px;
  background: var(--noir-gold);
  transform: rotate(45deg);
  opacity: 0.7;
}

/* Stepped Art Deco border frame */
.noir-frame {
  position: relative;
  padding: 3rem;
}

.noir-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.noir-frame::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212, 175, 55, 0.1);
}

Film Grain Texture Overlay

/* Subtle film grain noise -- applied as a page-level overlay */
.noir-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* Alternative: CSS noise using repeating gradients */
.noir-grain--css {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background:
    repeating-radial-gradient(
      circle at 17% 32%,
      rgba(255,255,255,0.03) 0px,
      transparent 1px
    ),
    repeating-radial-gradient(
      circle at 62% 71%,
      rgba(255,255,255,0.02) 0px,
      transparent 1px
    );
  background-size: 3px 3px, 4px 4px;
  mix-blend-mode: overlay;
}

Gold Glow & Shadow System

/* Layered shadow system for depth */
.noir-shadow-sm {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

.noir-shadow-md {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.noir-shadow-lg {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.04);
}

/* Gold glow for accent elements */
.noir-glow-gold {
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.15),
    0 0 40px rgba(212, 175, 55, 0.05);
}

/* Gold text shadow for headings */
.noir-text-glow {
  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.3),
    0 0 40px rgba(212, 175, 55, 0.1);
}

Deco Pattern Backgrounds

/* Repeating chevron pattern -- subtle background texture */
.noir-pattern-chevron {
  background-image:
    linear-gradient(135deg, rgba(212,175,55,0.04) 25%, transparent 25%),
    linear-gradient(225deg, rgba(212,175,55,0.04) 25%, transparent 25%),
    linear-gradient(315deg, rgba(212,175,55,0.04) 25%, transparent 25%),
    linear-gradient(45deg, rgba(212,175,55,0.04) 25%, transparent 25%);
  background-size: 40px 40px;
  background-position:
    0 0,
    0 0,
    20px 20px,
    20px 20px;
}

/* Radial sunburst pattern */
.noir-pattern-sunburst {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(212, 175, 55, 0.03) 0deg 10deg,
    transparent 10deg 20deg
  );
}

/* Diamond grid overlay */
.noir-pattern-diamond {
  background-image:
    linear-gradient(45deg, rgba(212,175,55,0.03) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(212,175,55,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}

Design Do's and Don'ts

Do

  • Use gold as a deliberate, restrained accent against overwhelming darkness; every gold element should feel like a conscious design decision, not decoration
  • Layer multiple levels of dark tones (black, charcoal, graphite) to create depth and shadow rather than relying on a single flat black
  • Apply geometric Deco ornamentation (chevrons, corner accents, stepped borders) in thin gold lines to frame and divide content areas
  • Use dramatic typographic scale with gold gradient fills on hero headlines for immediate impact and luxurious presence
  • Include subtle film-grain or noise texture overlays at very low opacity (2-5%) to add analog warmth and cinematic atmosphere
  • Employ vignette effects (darker edges, lighter centers) to create the spotlight-in-darkness composition characteristic of Film Noir
  • Maintain strict symmetry and centered alignment in major compositions to project architectural authority and Deco grandeur
  • Use warm, amber-tinted shadows and glows around gold elements rather than cool or neutral shadows

Don't

  • Use bright, saturated colors or multi-hue palettes that break the gold-on-black discipline; color should be restricted and warm
  • Apply flat, unshaded backgrounds; every surface should have at least a subtle gradient or texture that suggests depth and shadow
  • Use rounded, bubbly, or organic shapes that contradict the geometric angularity of both Art Deco and Film Noir
  • Overuse gold to the point where it loses its impact; if everything is gold, nothing is gold -- restraint is essential
  • Include playful, whimsical, or cute elements; the mood is sophisticated, dramatic, and slightly dangerous, never friendly
  • Use low-contrast text; while the palette is dark, body text must remain clearly legible with sufficient contrast ratios (WCAG AA minimum)
  • Apply heavy border-radius values; corners should be sharp or minimally rounded (2-4px maximum) to maintain geometric precision
  • Clutter layouts with too many decorative elements; the noir half of the aesthetic demands empty shadow space for dramatic tension
Aesthetic Relationship to Noir Deco
Art Deco Direct parent aesthetic; Noir Deco inherits all geometric ornamentation, symmetry principles, and metallic palette but recontextualizes them in darkness and shadow
Film Noir Direct parent aesthetic; provides the chiaroscuro lighting, atmospheric mood, dark color foundation, and cinematic tension that distinguishes Noir Deco from standard Art Deco
Dark Academia Shares the dark, intellectual, and old-world atmosphere; Dark Academia leans literary and collegiate while Noir Deco is architectural and cinematic
Gothic Overlaps in darkness and dramatic atmosphere; Gothic is organic, medieval, and supernatural while Noir Deco is geometric, modern, and urban
Bauhaus Shares geometric construction principles and sans-serif typography; Bauhaus is functional and colorful while Noir Deco is decorative and monochromatic
Baroque Both value opulence and dramatic contrast; Baroque uses organic curves and religious imagery while Noir Deco uses geometric precision and secular glamour
Cyberpunk Shares the dark urban atmosphere and neon-accent-on-black palette structure; Cyberpunk is futuristic and digital while Noir Deco is retrospective and analog
Steampunk Both reference industrial-era aesthetics with metallic accent palettes; Steampunk uses Victorian machinery while Noir Deco uses Deco architecture
Minimalist Dark Shares the dark background foundation; Minimalist strips away all ornament while Noir Deco adds geometric decoration and atmospheric texture

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>Noir Deco</title>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Raleway:wght@300;400;600;700&family=Josefin+Sans:wght@300;400;600;700&family=Bebas+Neue&display=swap" rel="stylesheet">
  <style>
    :root {
      --noir-black: #0a0a0c;
      --noir-charcoal: #1a1a1e;
      --noir-graphite: #2a2a30;
      --noir-gunmetal: #3a3a42;
      --noir-ash: #6b6b75;
      --noir-silver: #9a9a9e;
      --noir-gold: #d4af37;
      --noir-gold-dark: #b8952a;
      --noir-gold-light: #e8d48b;
      --noir-gold-pale: #f5e6c8;
      --noir-brass: #c49a2a;
      --noir-navy: #0d1117;
      --noir-steel: #2c3e50;
      --noir-rain: #4a6e8a;
      --noir-gold-glow: rgba(212, 175, 55, 0.25);
      --noir-gold-subtle: rgba(212, 175, 55, 0.08);
      --noir-glass: rgba(26, 26, 30, 0.88);
      --noir-glass-border: rgba(212, 175, 55, 0.12);
    }

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

    body {
      background: var(--noir-black);
      color: var(--noir-silver);
      font-family: 'Raleway', 'Josefin Sans', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: 0.025em;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Cinzel', Georgia, serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--noir-gold-pale);
    }

    a { color: var(--noir-gold); text-decoration: none; transition: color 0.3s ease; }
    a:hover { color: var(--noir-gold-light); }

    /* Film grain overlay */
    .grain {
      position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat; background-size: 256px 256px; mix-blend-mode: overlay;
    }

    /* Navigation */
    nav {
      background: var(--noir-glass);
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      border-bottom: 1px solid var(--noir-glass-border);
      padding: 0 2rem; display: flex; align-items: center;
      height: 64px; position: sticky; top: 0; z-index: 100;
    }

    nav::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.4) 30%, rgba(212,175,55,0.6) 50%, rgba(212,175,55,0.4) 70%, transparent 100%);
    }

    .nav-logo {
      font-family: 'Cinzel Decorative', serif; font-size: 1.2rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; margin-right: auto;
      background: linear-gradient(180deg, #f5e6c8 0%, #d4af37 50%, #b8952a 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }

    .nav-links a {
      font-family: 'Josefin Sans', sans-serif; font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--noir-ash); position: relative;
    }

    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 1px;
      background: var(--noir-gold); transition: width 0.3s ease, left 0.3s ease;
    }

    .nav-links a:hover { color: var(--noir-gold); }
    .nav-links a:hover::after { width: 100%; left: 0; }

    /* Hero */
    .hero {
      text-align: center; padding: 10rem 2rem 8rem;
      position: relative; overflow: hidden;
    }

    .hero::before {
      content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
      width: 800px; height: 600px; pointer-events: none;
      background: radial-gradient(ellipse, rgba(212,175,55,0.07) 0%, rgba(212,175,55,0.02) 35%, transparent 65%);
    }

    .hero::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%);
    }

    .hero-tagline {
      font-family: 'Josefin Sans', sans-serif; font-size: 0.78rem; font-weight: 300;
      letter-spacing: 0.35em; text-transform: uppercase; color: var(--noir-gold);
      margin-bottom: 1.5rem; position: relative; z-index: 1;
    }

    .hero h1 {
      font-family: 'Cinzel Decorative', serif; font-size: clamp(2.8rem, 8vw, 6rem);
      font-weight: 700; line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase;
      background: linear-gradient(180deg, #f5e6c8 0%, #d4af37 20%, #b8952a 45%, #d4af37 65%, #e8d48b 85%, #f5e6c8 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      text-shadow: none; position: relative; z-index: 1;
    }

    .hero-subtitle {
      max-width: 560px; margin: 2rem auto 0; font-family: 'Raleway', sans-serif;
      font-size: 1.05rem; font-weight: 300; line-height: 1.85;
      color: var(--noir-silver); letter-spacing: 0.03em; position: relative; z-index: 1;
    }

    .hero-actions {
      display: flex; align-items: center; justify-content: center;
      gap: 1.5rem; margin-top: 3rem; position: relative; z-index: 1;
    }

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0.85rem 2.5rem; font-family: 'Bebas Neue', 'Josefin Sans', sans-serif;
      font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase;
      text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
      transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
    }

    .btn--outline { color: var(--noir-gold); background: transparent; border: 1px solid var(--noir-gold); }

    .btn--outline::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--noir-gold), var(--noir-gold-dark));
      transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.65,0,0.35,1); z-index: -1;
    }

    .btn--outline:hover::before { transform: translateX(0); }
    .btn--outline:hover { color: var(--noir-black); box-shadow: 0 4px 20px rgba(212,175,55,0.2); }

    .btn--primary {
      color: var(--noir-black);
      background: linear-gradient(135deg, var(--noir-gold), var(--noir-gold-dark));
      border: 1px solid var(--noir-gold);
    }

    .btn--primary:hover {
      background: linear-gradient(135deg, var(--noir-gold-light), var(--noir-gold));
      box-shadow: 0 4px 24px rgba(212,175,55,0.3);
    }

    /* Deco divider */
    .divider {
      display: flex; align-items: center; justify-content: center;
      gap: 16px; margin: 5rem auto; max-width: 400px;
    }

    .divider::before, .divider::after {
      content: ''; flex: 1; height: 1px; opacity: 0.35;
      background: linear-gradient(to right, transparent, var(--noir-gold), transparent);
    }

    .divider-diamond {
      width: 10px; height: 10px; background: var(--noir-gold);
      transform: rotate(45deg); opacity: 0.6;
    }

    /* Sections */
    .section { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }

    .section-header { text-align: center; margin-bottom: 3.5rem; }

    .section-label {
      font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem;
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--noir-gold); margin-bottom: 0.75rem;
    }

    .section-header h2 {
      font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    }

    .section-header p {
      max-width: 520px; margin: 1rem auto 0; font-size: 0.95rem;
      color: var(--noir-ash); line-height: 1.7;
    }

    /* Card grid */
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

    .card {
      background: linear-gradient(160deg, rgba(42,42,48,0.5) 0%, rgba(26,26,30,0.85) 100%);
      border: 1px solid var(--noir-glass-border); padding: 2.5rem 2rem;
      position: relative; overflow: hidden;
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .card::before, .card::after {
      content: ''; position: absolute; width: 20px; height: 20px;
      border-color: var(--noir-gold); border-style: solid;
      opacity: 0.4; transition: opacity 0.4s ease;
    }

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

    .card:hover {
      border-color: rgba(212,175,55,0.25);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.06);
    }

    .card:hover::before, .card:hover::after { opacity: 0.9; }

    .card-icon { font-size: 2rem; margin-bottom: 1.25rem; display: block; }

    .card h3 {
      font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--noir-gold); margin-bottom: 0.75rem;
    }

    .card p { font-size: 0.92rem; color: var(--noir-ash); line-height: 1.7; }

    /* Quote block */
    .quote-block {
      text-align: center; max-width: 700px; margin: 0 auto;
      padding: 4rem 2rem; position: relative;
    }

    .quote-block::before {
      content: '\201C'; font-family: 'Cinzel Decorative', serif; font-size: 6rem;
      color: var(--noir-gold); opacity: 0.2; position: absolute;
      top: 0; left: 50%; transform: translateX(-50%); line-height: 1;
    }

    .quote-block blockquote {
      font-family: 'Raleway', sans-serif; font-size: 1.25rem; font-weight: 300;
      font-style: italic; line-height: 1.8; color: var(--noir-gold-pale);
      position: relative; z-index: 1;
    }

    .quote-block cite {
      display: block; margin-top: 1.5rem; font-family: 'Josefin Sans', sans-serif;
      font-size: 0.75rem; font-style: normal; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--noir-ash);
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--noir-glass-border);
      padding: 3rem 2rem; text-align: center; position: relative;
    }

    footer::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3) 30%, rgba(212,175,55,0.5) 50%, rgba(212,175,55,0.3) 70%, transparent);
    }

    .footer-logo {
      font-family: 'Cinzel Decorative', serif; font-size: 1rem;
      letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem;
      background: linear-gradient(180deg, #f5e6c8, #d4af37, #b8952a);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    footer p { font-size: 0.8rem; color: var(--noir-ash); letter-spacing: 0.05em; }

    footer .footer-links {
      display: flex; justify-content: center; gap: 2rem;
      margin-top: 1.5rem; list-style: none;
    }

    footer .footer-links a {
      font-family: 'Josefin Sans', sans-serif; font-size: 0.7rem;
      letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--noir-gunmetal); transition: color 0.3s ease;
    }

    footer .footer-links a:hover { color: var(--noir-gold); }

    /* Responsive */
    @media (max-width: 768px) {
      nav { padding: 0 1rem; }
      .nav-links { gap: 1.5rem; }
      .nav-links a { font-size: 0.65rem; letter-spacing: 0.12em; }
      .hero { padding: 7rem 1.5rem 5rem; }
      .card-grid { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; gap: 1rem; }
    }
  </style>
</head>
<body>

  <!-- Film grain overlay -->
  <div class="grain" aria-hidden="true"></div>

  <!-- Navigation -->
  <nav>
    <div class="nav-logo">Noir Deco</div>
    <ul class="nav-links">
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <p class="hero-tagline">Luxurious Darkness, Geometric Glamour</p>
    <h1>Noir Deco</h1>
    <p class="hero-subtitle">
      Where Art Deco's gilded grandeur meets Film Noir's dramatic shadow.
      A design language of gold on black, geometric precision, and
      sophisticated darkness.
    </p>
    <div class="hero-actions">
      <a href="#services" class="btn btn--primary">Explore</a>
      <a href="#about" class="btn btn--outline">Learn More</a>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider" aria-hidden="true">
    <span class="divider-diamond"></span>
  </div>

  <!-- About Section -->
  <section class="section" id="about">
    <div class="section-header">
      <p class="section-label">The Aesthetic</p>
      <h2>Shadow & Gold</h2>
      <p>
        Noir Deco draws from the geometric opulence of 1920s Art Deco
        and the brooding chiaroscuro of 1940s Film Noir to create a
        visual language of luxurious darkness.
      </p>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider" aria-hidden="true">
    <span class="divider-diamond"></span>
  </div>

  <!-- Services Section -->
  <section class="section" id="services">
    <div class="section-header">
      <p class="section-label">What We Do</p>
      <h2>Services</h2>
      <p>Crafted with the precision of Deco geometry and the atmosphere of a noir film.</p>
    </div>

    <div class="card-grid">
      <div class="card">
        <span class="card-icon" aria-hidden="true">&#9670;</span>
        <h3>Brand Identity</h3>
        <p>
          Gilded monograms, geometric logotypes, and identity systems that
          project authority, mystery, and timeless sophistication.
        </p>
      </div>
      <div class="card">
        <span class="card-icon" aria-hidden="true">&#9674;</span>
        <h3>Web Design</h3>
        <p>
          Dark, atmospheric websites with gold-accented typography,
          cinematic layouts, and the dramatic visual tension of
          light against shadow.
        </p>
      </div>
      <div class="card">
        <span class="card-icon" aria-hidden="true">&#10022;</span>
        <h3>Print & Editorial</h3>
        <p>
          Posters, invitations, and editorial layouts that channel the
          grandeur of Deco-era graphic design with noir-inspired
          contrast and atmosphere.
        </p>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider" aria-hidden="true">
    <span class="divider-diamond"></span>
  </div>

  <!-- Quote -->
  <section class="section">
    <div class="quote-block">
      <blockquote>
        The city was dark, but the lobby was gold -- every line, every
        angle designed to make you feel small, and powerful, and watched,
        all at once.
      </blockquote>
      <cite>A Noir Deco Mood</cite>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider" aria-hidden="true">
    <span class="divider-diamond"></span>
  </div>

  <!-- Contact Section -->
  <section class="section" id="contact">
    <div class="section-header">
      <p class="section-label">Get in Touch</p>
      <h2>Contact</h2>
      <p>Step into the light. We are waiting in the lobby.</p>
    </div>
    <div class="hero-actions">
      <a href="#" class="btn btn--primary">Start a Project</a>
      <a href="#" class="btn btn--outline">View Rates</a>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-logo">Noir Deco</div>
    <p>Luxurious darkness, geometric glamour.</p>
    <ul class="footer-links">
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </footer>

</body>
</html>

Implementation Tips

  • Layer your blacks: Never use a single flat #000000 background; compose 2-3 levels of near-black tones (#0A0A0C, #1A1A1E, #2A2A30) to create depth and the suggestion of shadow -- this layering is what makes Noir Deco feel cinematic rather than merely dark
  • Use gold gradients, not flat gold: Metallic gold only looks metallic when it has gradient variation; a flat #D4AF37 fill reads as "yellow" rather than "gold" -- always apply a multi-stop linear gradient that simulates light traveling across a metal surface
  • Keep film grain subtle: The noise/grain overlay should be barely perceptible (2-5% opacity) and use mix-blend-mode: overlay -- it should add analog warmth without being visible enough to degrade readability or feel gimmicky
  • Test contrast ratios rigorously: Dark themes are notoriously prone to accessibility failures; ensure body text against your dark backgrounds meets at least WCAG AA (4.5:1) and that gold accent text on dark surfaces meets AA for large text (3:1 minimum)
  • Animate sparingly and slowly: Any animations (gold shimmer, spotlight movement, grain flicker) should use durations of 4 seconds or longer with easing functions -- the Noir Deco mood is slow, deliberate, and composed, never frenetic
  • Use backdrop-filter for glass-dark panels: Navigation bars and modal overlays benefit from backdrop-filter: blur(20px) combined with a semi-transparent dark background; this creates the "smoked glass" effect that bridges the Deco luxury and noir atmosphere
  • Employ vignette on photography: Any photographs used in a Noir Deco design should receive a strong radial-gradient vignette overlay (dark edges, subtle center) and desaturation treatment to integrate them into the chiaroscuro lighting scheme
  • Serve variable font weights: Cinzel, Raleway, and Josefin Sans all benefit from loading only the specific weights you use via the Google Fonts wght@ axis parameter; this keeps page weight down while maintaining the typographic range the aesthetic demands
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.