Agence WagnerAgence Wagner
FRENDEELS
Zruck züe de Designs
SombreOrganiqueOrnementalÉlégant
Vorschau

Dark Botanical Design Reference

Overview

Dark Botanical is a moody, luxurious design aesthetic rooted in the tradition of Dutch Golden Age still-life painting, particularly the lavish flower arrangements of masters such as Rachel Ruysch, Jan van Huysum, and Ambrosius Bosschaert the Elder. The style places lush botanical illustrations -- overflowing bouquets of peonies, dahlias, roses, and tulips -- against near-black backgrounds, creating dramatic contrast that draws the viewer into an intimate world of natural abundance. Insects perch on petals, dewdrops cling to leaves, and fruit teeters between ripeness and decay, all rendered with obsessive detail and suffused with the symbolic weight of vanitas painting, where beauty and mortality coexist in every brushstroke.

In web and graphic design, Dark Botanical translates this painterly drama into interfaces built on deep, muted backgrounds -- charcoals, near-blacks with green or blue undertones -- overlaid with rich botanical imagery that bleeds across sections, wraps around cards, and frames typography. The color palette favors the hues found in a garden at dusk: deep forest greens, dusty roses, burgundy reds, plum purples, antique golds, and the warm ivory of aged canvas. Typography leans toward elegant serifs that echo the engraved captions of botanical plates and natural history volumes, reinforcing the sense that the interface is itself a curated cabinet of curiosities. Unlike purely minimalist dark-mode designs, Dark Botanical embraces visual richness, layered textures, and the controlled maximalism of a still-life composition where every element has been placed with deliberate care.

The emotional register is one of quiet drama and sophisticated melancholy. Dark Botanical designs feel contemplative rather than aggressive, sensual rather than stark. They borrow the vanitas tradition's reminder that beauty is transient -- the wilting petal, the browning leaf, the caterpillar on the stem -- and channel it into an aesthetic that celebrates the fleeting and the organic. This makes it particularly effective for brands and projects related to luxury goods, fine fragrance, artisanal food and drink, botanical skincare, high-end editorial content, and any context where nature, craftsmanship, and a sense of timeless elegance converge.

Visual Characteristics

Core Design Traits

  • Near-black backgrounds with warm or green undertones: Base surfaces in deep charcoal-greens, blue-blacks, or warm near-blacks that evoke the dark grounds of Dutch still-life paintings, never pure #000000
  • Lush botanical illustration overlays: Large-scale floral and foliage imagery -- hand-painted or digitally rendered -- used as background layers, section dividers, and decorative accents that bleed across layout boundaries
  • Vanitas symbolism: Subtle incorporation of memento mori elements -- overripe fruit, curling leaves, insects, dewdrops, seed pods -- that add narrative depth and historical resonance
  • Rich jewel-tone accents: Deep burgundy, dusty rose, plum, forest green, and antique gold used sparingly against the dark ground for maximum contrast and visual impact
  • Layered depth and chiaroscuro lighting: Multiple translucent layers and strategic radial gradients simulate the raking, directional light of oil paintings, with elements emerging from and receding into shadow
  • Textured surfaces: Subtle canvas grain, paper fiber, or painted-texture overlays that reinforce the handcrafted, painterly quality and prevent surfaces from feeling flat or digital
  • Organic, asymmetric composition: Layouts that favor the natural asymmetry of floral arrangements -- trailing vines, cascading blooms -- rather than rigid geometric grids
  • Antique gold and copper metallic accents: Fine lines, borders, and typographic details in warm metallics that reference gilded picture frames and botanical plate borders
  • Muted, desaturated photography: When photographs are used, they receive dark, moody grading with lifted blacks, reduced highlights, and color shifts toward the overall palette
  • Delicate line illustrations: Fine botanical line drawings -- stems, leaves, flower cross-sections -- used as secondary graphic elements alongside full-color illustration

Design Principles

  • Controlled maximalism: Embrace visual richness and layered detail, but compose every element with the precision of a still-life arrangement; nothing is random or cluttered
  • Drama through contrast: Use the extreme contrast between dark backgrounds and luminous botanical subjects to create focal points and guide the eye
  • Nature as ornament: Let botanical imagery serve the role that geometric patterns or abstract shapes play in other aesthetics; flora and fauna are the primary decorative vocabulary
  • Painterly authenticity: Favor textures, brushstrokes, and rendering techniques that reference oil painting and watercolor rather than flat vector illustration
  • Temporal depth: Incorporate subtle signs of passage and impermanence -- a wilting bloom alongside a fresh one, aged textures alongside clean surfaces -- to create emotional resonance
  • Warm light in darkness: Balance the prevailing darkness with carefully placed warm tones (golds, ambers, soft pinks) that prevent the design from feeling cold or forbidding
  • Reverence for craft: Typography, spacing, and detail should feel considered and artisanal, as though each page were a hand-printed plate from a natural history folio
  • Restrained interactivity: Animations and hover states should be slow, smooth, and organic -- petals unfurling, colors blooming -- never jarring or mechanical

Color Palette

The Dark Botanical palette draws from the pigments of 17th-century oil painting: lamp black and ivory black for the deepest grounds, earth pigments for mid-tones, and the vivid but slightly muted hues of garden flowers captured in the last golden light before nightfall. Accents of antique gold reference the gilded frames that historically enclosed these works. The overall impression is of warmth trapped within darkness -- a garden illuminated by a single candle.

Swatch Hex Role/Usage
Midnight Garden #0D1117 Primary background; deepest dark with cool blue-black undertone
Ivy Shadow #141E17 Secondary background; dark with green undertone for botanical warmth
Umber Ground #1A1612 Alternate background; warm near-black referencing oil painting ground
Aged Canvas #2A2520 Card and surface background; elevated dark surface
Dusty Rose #9E6B73 Primary floral accent; muted pink-mauve for buttons and highlights
Burgundy Bloom #7A2E3B Secondary accent; deep red for emphasis and hover states
Plum Shadow #4A2040 Tertiary accent; dark purple for depth and variation
Forest Fern #2D5A3D Green accent; muted botanical green for icons and borders
Sage Mist #7A9A7E Light green accent; softer green for secondary text and tags
Antique Gold #C4A35A Metallic accent; warm gold for borders, rules, and fine details
Tarnished Copper #8B6E4E Metallic secondary; muted copper for decorative lines
Ivory Petal #EDE6D6 Primary text; warm off-white referencing aged paper
Parchment #D4C9B5 Secondary text; softer warm white for body copy
Faded Leaf #8A7E6C Muted text; for captions, metadata, and de-emphasized content
Dewdrop #A8C5C8 Cool accent; pale blue-grey for subtle contrast and links

CSS Custom Properties

:root {
  --db-midnight: #0D1117;
  --db-ivy: #141E17;
  --db-umber: #1A1612;
  --db-canvas: #2A2520;
  --db-rose: #9E6B73;
  --db-burgundy: #7A2E3B;
  --db-plum: #4A2040;
  --db-forest: #2D5A3D;
  --db-sage: #7A9A7E;
  --db-gold: #C4A35A;
  --db-copper: #8B6E4E;
  --db-ivory: #EDE6D6;
  --db-parchment: #D4C9B5;
  --db-faded: #8A7E6C;
  --db-dewdrop: #A8C5C8;
}

Typography

Dark Botanical typography takes its cues from the engraved title pages of 18th-century botanical atlases and the elegant lettering found on natural history museum labels. Headings favor high-contrast transitional and didone serifs that echo the formality of scientific nomenclature, while body text uses old-style serifs designed for extended reading -- warm, humanist, and slightly irregular in a way that feels handset rather than digitally generated. Italic variants are used generously for botanical Latin names, pull quotes, and emphasis, reinforcing the connection to scientific and literary tradition.

Font Weight(s) Usage Link
Playfair Display 400, 500, 600, 700, 900 Display headings; high-contrast transitional serif with dramatic thick-thin strokes Playfair Display
Cormorant Garamond 300, 400, 500, 600, 700 Subheadings and featured text; elegant and literary with fine detail Cormorant Garamond
Lora 400, 500, 600, 700 Body text; well-balanced contemporary serif with calligraphic roots Lora
EB Garamond 400, 500, 600, 700 Body text alternative; classic old-style Garamond for a more historical feel EB Garamond
Crimson Pro 300, 400, 500, 600, 700 Long-form reading; modern take on Garamond optimized for screen Crimson Pro

Font Pairing Suggestions

Heading Body Vibe
Playfair Display 700 Lora 400 Dramatic editorial with warm, readable body; the most versatile pairing
Playfair Display 600 EB Garamond 400 Bold display meets classical prose; feels like a curated exhibition catalog
Cormorant Garamond 600 Crimson Pro 400 Refined and literary throughout; elegant restraint suitable for luxury branding
Playfair Display 900 Cormorant Garamond 300 Light Maximum contrast between heavy display and delicate subheads

CSS Example

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

body {
  font-family: 'Lora', 'Georgia', serif;
  font-size: 1.1rem;
  line-height: 1.85;
  color: #D4C9B5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #EDE6D6;
}

h1 {
  font-size: 3rem;
  line-height: 1.15;
}

h2 {
  font-size: 2rem;
  line-height: 1.3;
}

h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.4rem;
  font-style: italic;
  color: #9E6B73;
}

.botanical-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #7A9A7E;
}

.display-label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #C4A35A;
}

Layout Principles

  • Asymmetric compositions with organic flow: Avoid rigid 12-column grids in favor of layouts where content areas feel naturally placed, like elements in a still-life arrangement -- a large image offset to the left, text wrapping to the right, a trailing vine illustration bridging the gap
  • Dark canvas with generous breathing room: Allow ample negative space in the dark background; the emptiness is not wasted space but the shadow that makes the botanical subjects luminous
  • Layered z-depth through overlapping elements: Let botanical illustrations overlap cards, extend beyond section boundaries, and partially obscure edges to create a sense of three-dimensional depth
  • Single-column reading with wide margins: For text-heavy pages, use a centered column (max-width 720-840px) with wide dark margins, emulating the proportions of a printed botanical folio
  • Full-bleed botanical sections: Alternate between contained card layouts and full-width sections where botanical imagery spans the entire viewport, creating rhythm and visual contrast
  • Vertical narrative flow: Design pages as sequential experiences -- like turning the pages of a botanical atlas -- with clear section breaks, decorative dividers, and progressive revelation of content
  • Responsive degradation of ornament: On smaller screens, reduce the scale and complexity of botanical overlays rather than removing them entirely; maintain the aesthetic even at mobile sizes
  • Strategic use of white (light) space within cards: Inside cards and content containers, use slightly lighter backgrounds and generous internal padding to create comfortable reading zones within the overall darkness
  • Decorative border framing: Use thin gold or copper lines to frame key sections, referencing the gilt borders of framed botanical prints
  • Image-text integration: Rather than placing images and text in separate rigid blocks, allow them to coexist -- text overlaying semi-transparent panels on botanical backgrounds, or illustrations wrapping around text blocks

CSS / Design Techniques

Botanical Card

A card component that feels like a mounted specimen plate from a natural history collection, with layered borders and a subtle inner glow that references aged gallery lighting.

.db-card {
  background: #2A2520;
  border: 1px solid rgba(196, 163, 90, 0.2);
  border-radius: 3px;
  padding: 40px;
  position: relative;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(196, 163, 90, 0.08);
  overflow: hidden;
}

.db-card::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(196, 163, 90, 0.1);
  border-radius: 2px;
  pointer-events: none;
}

.db-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(158, 107, 115, 0.04) 0%,
    transparent 60%
  );
  pointer-events: none;
}

Botanical Button

Buttons inspired by the engraved labels on specimen jars and herbarium sheets, with a warm bloom effect on hover that feels like a flower opening.

.db-button {
  background: transparent;
  color: #C4A35A;
  border: 1px solid #C4A35A;
  border-radius: 2px;
  padding: 14px 36px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.db-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, #C4A35A, #9E6B73);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: 0;
}

.db-button:hover {
  color: #0D1117;
  border-color: #9E6B73;
  box-shadow: 0 0 30px rgba(158, 107, 115, 0.2);
}

.db-button:hover::before {
  width: 400px;
  height: 400px;
}

.db-button span {
  position: relative;
  z-index: 1;
}

A navigation bar that feels like the top edge of a gilded frame, with delicate typography and botanical accents.

.db-nav {
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196, 163, 90, 0.15);
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.db-nav .logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #EDE6D6;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.db-nav .nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.db-nav .nav-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #D4C9B5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 8px 16px;
  transition: color 0.3s ease;
  position: relative;
}

.db-nav .nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: #9E6B73;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.db-nav .nav-links a:hover {
  color: #EDE6D6;
}

.db-nav .nav-links a:hover::after {
  transform: scaleX(1);
}

Hero Section

A full-viewport hero that layers botanical imagery behind a text overlay, using multiple gradient layers to ensure readability while preserving the painterly depth.

.db-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  position: relative;
  background-color: #0D1117;
  background-image: url('botanical-hero.jpg');
  background-size: cover;
  background-position: center;
}

.db-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(13, 17, 23, 0.5) 0%, rgba(13, 17, 23, 0.85) 70%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.3) 0%, rgba(13, 17, 23, 0.9) 100%);
  z-index: 1;
}

.db-hero .content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.db-hero .eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #C4A35A;
  margin-bottom: 24px;
}

.db-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #EDE6D6;
  margin-bottom: 20px;
  line-height: 1.1;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

.db-hero .description {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  color: #D4C9B5;
  line-height: 1.9;
  margin-bottom: 36px;
}

Botanical Overlay Background

A technique for creating the signature look where botanical illustrations emerge from the darkness, using CSS gradients and blend modes to layer imagery over the dark ground.

.db-botanical-bg {
  position: relative;
  background: #0D1117;
  overflow: hidden;
}

.db-botanical-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('botanical-pattern.png');
  background-size: 800px auto;
  background-repeat: repeat;
  opacity: 0.12;
  mix-blend-mode: lighten;
  filter: saturate(0.6) contrast(1.2);
  pointer-events: none;
}

.db-botanical-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(45, 90, 61, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(158, 107, 115, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(13, 17, 23, 0.4) 0%, transparent 80%);
  pointer-events: none;
}

Floral Divider

An ornamental section divider that echoes the decorative rules found between chapters in antique botanical texts, using a central floral motif flanked by fading gold lines.

.db-divider {
  text-align: center;
  margin: 56px 0;
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-divider::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(196, 163, 90, 0.3) 25%,
    rgba(196, 163, 90, 0.3) 75%,
    transparent
  );
}

.db-divider .motif {
  position: relative;
  background: #0D1117;
  padding: 0 20px;
  color: #9E6B73;
  font-size: 1.4rem;
  line-height: 1;
}

Specimen Image Frame

A frame treatment for images that references the mounted botanical specimens in herbariums and museum displays, with labeled captions in the style of scientific illustration plates.

.db-specimen {
  position: relative;
  padding: 16px;
  background: #1A1612;
  border: 1px solid rgba(196, 163, 90, 0.15);
}

.db-specimen img {
  width: 100%;
  display: block;
  filter: brightness(0.9) contrast(1.05) saturate(0.85);
  transition: filter 0.5s ease;
}

.db-specimen:hover img {
  filter: brightness(0.95) contrast(1.1) saturate(1);
}

.db-specimen .caption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(196, 163, 90, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.db-specimen .caption .name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #7A9A7E;
}

.db-specimen .caption .detail {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8A7E6C;
}

Design Do's and Don'ts

Do's

  • Use near-black backgrounds with subtle green, blue, or warm undertones to create depth; vary the background tone slightly between sections for visual rhythm
  • Layer botanical imagery at low opacity using mix-blend-mode to create atmospheric backgrounds that do not compete with content
  • Choose serif typefaces with historical character and use italic variants generously for botanical names, quotes, and emphasis
  • Apply subtle warm radial gradients (dusty rose, muted gold) to simulate the raking light of a painting studio or gallery
  • Use thin gold or copper borders and ornamental dividers sparingly to frame content, referencing gilded picture frames
  • Incorporate vanitas symbolism thoughtfully -- a wilting petal, a resting butterfly -- as decorative elements that add narrative depth
  • Ensure sufficient contrast between text and backgrounds; test with WCAG tools since dark-on-dark palettes can easily become illegible
  • Let botanical illustrations break out of their containers occasionally, overlapping edges and extending into margins for organic, natural movement

Don'ts

  • Avoid pure black (#000000) backgrounds; they flatten the design and destroy the painterly warmth that defines the aesthetic
  • Do not use sans-serif typefaces as primary fonts; they clash with the historical, organic character of the botanical theme
  • Avoid bright, saturated neon colors or high-energy accent tones that break the moody, contemplative atmosphere
  • Do not overload the page with botanical imagery; like a still-life painting, composition requires careful negative space and intentional placement
  • Avoid sharp, geometric patterns (chevrons, grids, zigzags) that conflict with the organic, flowing nature of botanical forms
  • Do not use drop shadows with blue or cool grey tones; shadows should be warm and deep, matching the oil-painting ground
  • Avoid fast, bouncy, or playful animations; all motion should be slow, smooth, and organic -- a bloom unfurling, not a bounce
  • Do not use glossy or high-shine surface treatments (glass morphism, chrome reflections); the aesthetic is matte, textured, and painterly
Aesthetic Relationship
Dark Academia Shares the moody dark palette, warm accents, and reverence for historical tradition, but Dark Academia centers on scholarly interiors and classical education rather than natural forms
Art Nouveau Both celebrate organic, flowing natural forms and botanical motifs, but Art Nouveau uses lighter backgrounds, brighter colors, and stylized rather than realistic rendering
Baroque Shares the dramatic chiaroscuro, rich ornamentation, and vanitas symbolism, but Baroque is broader in subject matter and more opulent in surface treatment
Cottagecore Both draw on botanical and natural themes, but Cottagecore is light, airy, and nostalgic where Dark Botanical is moody, dramatic, and contemplative
Goblincore Both embrace the less conventionally beautiful aspects of nature (insects, decay, mushrooms), but Goblincore is earthy and whimsical while Dark Botanical is refined and painterly
Earth Tones Shares the warm, natural color foundation, but Earth Tones is typically lighter and more minimal, lacking the dramatic darkness and illustrative richness
Maximalism Both embrace visual abundance and layered detail, but Maximalism is broader and more eclectic, while Dark Botanical maintains strict thematic focus on flora and natural history
Grandmillennial Both reference historical decorative traditions and embrace pattern and ornament, but Grandmillennial leans toward chintz and pastel where Dark Botanical goes deep and moody

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>Dark Botanical Layout</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --db-midnight: #0D1117;
      --db-ivy: #141E17;
      --db-umber: #1A1612;
      --db-canvas: #2A2520;
      --db-rose: #9E6B73;
      --db-burgundy: #7A2E3B;
      --db-plum: #4A2040;
      --db-forest: #2D5A3D;
      --db-sage: #7A9A7E;
      --db-gold: #C4A35A;
      --db-copper: #8B6E4E;
      --db-ivory: #EDE6D6;
      --db-parchment: #D4C9B5;
      --db-faded: #8A7E6C;
      --db-dewdrop: #A8C5C8;
    }

    body {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.1rem;
      line-height: 1.85;
      color: var(--db-parchment);
      background: var(--db-midnight);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Navigation ── */
    nav {
      background: rgba(13, 17, 23, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(196, 163, 90, 0.12);
      padding: 16px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--db-ivory);
      text-decoration: none;
      letter-spacing: 0.02em;
    }

    nav .nav-links {
      display: flex;
      gap: 4px;
      list-style: none;
    }

    nav .nav-links a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--db-parchment);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 8px 14px;
      transition: color 0.3s ease;
    }

    nav .nav-links a:hover {
      color: var(--db-rose);
    }

    /* ── Hero Section ── */
    .hero {
      min-height: 85vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 100px 40px 80px;
      position: relative;
      overflow: hidden;
      background: var(--db-midnight);
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 70%, rgba(45, 90, 61, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(158, 107, 115, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(74, 32, 64, 0.06) 0%, transparent 40%);
      pointer-events: none;
    }

    .hero .eyebrow {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--db-gold);
      margin-bottom: 24px;
      position: relative;
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 700;
      color: var(--db-ivory);
      line-height: 1.12;
      margin-bottom: 20px;
      max-width: 700px;
      position: relative;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--db-rose);
    }

    .hero .subtitle {
      font-family: 'Lora', serif;
      font-size: 1.15rem;
      color: var(--db-parchment);
      max-width: 560px;
      line-height: 1.9;
      margin-bottom: 40px;
      position: relative;
    }

    .hero .cta {
      display: inline-block;
      background: transparent;
      color: var(--db-gold);
      border: 1px solid var(--db-gold);
      border-radius: 2px;
      padding: 14px 40px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      text-decoration: none;
      transition: all 0.4s ease;
      position: relative;
    }

    .hero .cta:hover {
      background: var(--db-gold);
      color: var(--db-midnight);
      box-shadow: 0 0 40px rgba(196, 163, 90, 0.15);
    }

    /* ── Divider ── */
    .divider {
      text-align: center;
      margin: 56px auto;
      max-width: 600px;
      position: relative;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .divider::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(196, 163, 90, 0.3) 20%,
        rgba(196, 163, 90, 0.3) 80%,
        transparent
      );
    }

    .divider span {
      position: relative;
      background: var(--db-midnight);
      padding: 0 20px;
      color: var(--db-rose);
      font-size: 1.3rem;
      line-height: 1;
    }

    /* ── Section ── */
    .section {
      max-width: 860px;
      margin: 0 auto;
      padding: 40px 24px;
    }

    .section-header {
      text-align: center;
      margin-bottom: 48px;
    }

    .section-header .label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--db-gold);
      margin-bottom: 12px;
    }

    .section-header h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--db-ivory);
      margin-bottom: 16px;
    }

    .section-header p {
      font-size: 1.05rem;
      color: var(--db-faded);
      max-width: 520px;
      margin: 0 auto;
    }

    /* ── Cards Grid ── */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 28px;
      margin-bottom: 48px;
    }

    .card {
      background: var(--db-canvas);
      border: 1px solid rgba(196, 163, 90, 0.15);
      border-radius: 3px;
      padding: 36px;
      position: relative;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .card:hover {
      border-color: rgba(158, 107, 115, 0.3);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      bottom: 8px;
      border: 1px solid rgba(196, 163, 90, 0.07);
      border-radius: 2px;
      pointer-events: none;
    }

    .card .card-icon {
      font-size: 1.8rem;
      margin-bottom: 16px;
      display: block;
    }

    .card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      font-weight: 600;
      color: var(--db-ivory);
      margin-bottom: 12px;
    }

    .card p {
      color: var(--db-parchment);
      font-size: 1rem;
      line-height: 1.8;
    }

    .card .botanical-note {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(196, 163, 90, 0.1);
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: var(--db-sage);
    }

    /* ── Feature Section with Dark Ivy Background ── */
    .feature {
      background: var(--db-ivy);
      padding: 80px 24px;
      margin: 48px 0;
      position: relative;
      overflow: hidden;
    }

    .feature::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 80% 50%, rgba(158, 107, 115, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(45, 90, 61, 0.06) 0%, transparent 50%);
      pointer-events: none;
    }

    .feature-inner {
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
    }

    .feature-text h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--db-ivory);
      margin-bottom: 16px;
    }

    .feature-text p {
      color: var(--db-parchment);
      margin-bottom: 24px;
    }

    .feature-image {
      background: var(--db-umber);
      border: 1px solid rgba(196, 163, 90, 0.12);
      padding: 12px;
      aspect-ratio: 4 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-image .placeholder {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--db-faded);
      font-size: 0.95rem;
      text-align: center;
    }

    /* ── Testimonial / Quote ── */
    .quote-section {
      text-align: center;
      padding: 80px 24px;
      max-width: 700px;
      margin: 0 auto;
    }

    .quote-section blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-style: italic;
      font-weight: 300;
      color: var(--db-ivory);
      line-height: 1.7;
      margin-bottom: 24px;
      position: relative;
    }

    .quote-section blockquote::before {
      content: '\201C';
      position: absolute;
      top: -20px;
      left: -10px;
      font-size: 4rem;
      color: var(--db-rose);
      opacity: 0.4;
      font-family: 'Playfair Display', serif;
      line-height: 1;
    }

    .quote-section .attribution {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--db-faded);
    }

    /* ── Footer ── */
    footer {
      border-top: 1px solid rgba(196, 163, 90, 0.1);
      padding: 40px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1000px;
      margin: 48px auto 0;
    }

    footer .footer-brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: var(--db-ivory);
    }

    footer .footer-links {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    footer .footer-links a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.85rem;
      color: var(--db-faded);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      transition: color 0.3s ease;
    }

    footer .footer-links a:hover {
      color: var(--db-rose);
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      nav {
        padding: 14px 20px;
        flex-direction: column;
        gap: 12px;
      }

      .hero {
        min-height: 70vh;
        padding: 80px 20px 60px;
      }

      .hero h1 {
        font-size: 2rem;
      }

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

      .feature-inner {
        grid-template-columns: 1fr;
      }

      .feature-image {
        order: -1;
      }

      .quote-section blockquote {
        font-size: 1.3rem;
      }

      footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 32px 20px;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">Nocturne Botanica</a>
    <ul class="nav-links">
      <li><a href="#">Collection</a></li>
      <li><a href="#">Specimens</a></li>
      <li><a href="#">Atelier</a></li>
      <li><a href="#">Journal</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <p class="eyebrow">Est. Anno MDCLXVIII</p>
    <h1>Where Darkness Meets <em>Bloom</em></h1>
    <p class="subtitle">
      A cabinet of botanical curiosities drawn from the shadow gardens
      of memory, where every petal holds the weight of a still-life
      painting and every leaf whispers of seasons past.
    </p>
    <a href="#" class="cta">Explore the Collection</a>
  </section>

  <!-- Divider -->
  <div class="divider"><span>&#10047;</span></div>

  <!-- Cards Section -->
  <section class="section">
    <div class="section-header">
      <p class="label">From the Herbarium</p>
      <h2>Botanical Studies</h2>
      <p>Each specimen captured at the fleeting moment between
         flourishing and fading.</p>
    </div>
    <div class="cards">
      <div class="card">
        <span class="card-icon">&#127801;</span>
        <h3>Rosa Damascena</h3>
        <p>Rendered in the style of the Dutch masters, each velvet
           petal unfurling against the void, catching the last
           warm light of a studio candle.</p>
        <p class="botanical-note">Damask Rose &mdash; Symbol of fleeting beauty</p>
      </div>
      <div class="card">
        <span class="card-icon">&#127807;</span>
        <h3>Hedera Helix</h3>
        <p>Dark trailing vines that creep across the composition,
           binding the arrangement together with their persistent,
           quietly insistent growth.</p>
        <p class="botanical-note">Common Ivy &mdash; Symbol of fidelity</p>
      </div>
      <div class="card">
        <span class="card-icon">&#129415;</span>
        <h3>Papilio Machaon</h3>
        <p>A swallowtail rests upon a stem, wings barely parted,
           a living emblem of transformation and the brevity
           of all delicate things.</p>
        <p class="botanical-note">Old World Swallowtail &mdash; Symbol of the soul</p>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider"><span>&#10043;</span></div>

  <!-- Feature Section -->
  <section class="feature">
    <div class="feature-inner">
      <div class="feature-text">
        <h2>The Art of Vanitas</h2>
        <p>In the tradition of 17th-century Dutch still-life painting,
           every composition tells a story of abundance and impermanence.
           Overripe fruit, wilting blossoms, and the quiet presence
           of insects remind us that all beauty is borrowed.</p>
        <p>Our atelier preserves these fleeting arrangements in
           digital form, translating oil-paint chiaroscuro into
           the luminous darkness of the modern screen.</p>
        <a href="#" class="cta" style="margin-top: 8px;">Visit the Atelier</a>
      </div>
      <div class="feature-image">
        <p class="placeholder">[ Botanical still-life<br>illustration placement ]</p>
      </div>
    </div>
  </section>

  <!-- Quote -->
  <section class="quote-section">
    <blockquote>
      In every petal there is a world entire, and in every shadow
      the memory of light. We paint not what we see, but what will
      soon be gone.
    </blockquote>
    <p class="attribution">&mdash; After the Dutch Masters</p>
  </section>

  <!-- Divider -->
  <div class="divider"><span>&#10047;</span></div>

  <!-- Second Cards Section -->
  <section class="section">
    <div class="section-header">
      <p class="label">Seasonal Arrangements</p>
      <h2>From the Garden</h2>
      <p>Curated compositions that honor the cycles of growth
         and graceful decline.</p>
    </div>
    <div class="cards">
      <div class="card">
        <h3>Autumn Requiem</h3>
        <p>Chrysanthemums and late dahlias in amber and burgundy,
           arranged with seed pods and dried grasses against
           a ground of lamp black and raw umber.</p>
      </div>
      <div class="card">
        <h3>Midnight Peony</h3>
        <p>Full-blown peonies in blush and deep rose, their
           heavy heads bowing under their own lush weight,
           surrounded by the dark geometry of trailing stems.</p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <span class="footer-brand">Nocturne Botanica</span>
    <ul class="footer-links">
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
  </footer>

</body>
</html>

Implementation Tips

  • Botanical overlay opacity: When layering botanical illustrations over dark backgrounds, keep opacity between 0.08 and 0.15 and use mix-blend-mode: lighten or screen to let the imagery emerge subtly from the darkness without overwhelming content
  • Warm radial glows: Place radial-gradient layers with dusty rose rgba(158, 107, 115, 0.05) and forest green rgba(45, 90, 61, 0.08) at asymmetric positions (not centered) to simulate the uneven warm light of a candle illuminating a still-life arrangement
  • Image treatment for photographs: Apply filter: brightness(0.85) contrast(1.08) saturate(0.7) to photographs to pull them into the muted, painterly palette; add a subtle warm color overlay with mix-blend-mode: multiply for deeper integration
  • Gold border restraint: Limit gold and copper decorative borders to one or two elements per viewport; overuse breaks the sense of precious rarity and turns the design toward gaudy rather than refined
  • Text contrast on dark surfaces: Use the ivory (#EDE6D6) for headings and parchment (#D4C9B5) for body text to maintain WCAG AA contrast ratios; test the faded tone (#8A7E6C) carefully as it can fall below minimum contrast thresholds on very dark backgrounds
  • Canvas texture overlay: For an authentic painted feel, overlay a subtle CSS noise pattern using a tiny transparent PNG tiled at low opacity (0.02-0.04), or use background-image: url('data:image/svg+xml,...') with a procedural noise pattern
  • Responsive botanical scaling: On mobile devices, reduce botanical background images to simpler, smaller motifs rather than scaling down complex arrangements that become muddy at small sizes; consider using CSS background-size with viewport-relative units
  • Performance with layered effects: Multiple radial-gradient layers, backdrop-filter: blur(), and mix-blend-mode can be GPU-intensive; limit simultaneous use to 2-3 per visible viewport area and test on lower-powered devices
← Zruck züe de Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alli Rächt vorbehalt.

Designs vu chrislemke/website_designs, lizenziert unter MIT.