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.
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 |
: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;
}
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 |
| 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 |
@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;
}
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;
}
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);
}
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;
}
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;
}
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;
}
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;
}
| 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 |
<!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>✿</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">🌹</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 — Symbol of fleeting beauty</p>
</div>
<div class="card">
<span class="card-icon">🌿</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 — Symbol of fidelity</p>
</div>
<div class="card">
<span class="card-icon">🦇</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 — Symbol of the soul</p>
</div>
</div>
</section>
<!-- Divider -->
<div class="divider"><span>✻</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">— After the Dutch Masters</p>
</section>
<!-- Divider -->
<div class="divider"><span>✿</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>
mix-blend-mode: lighten or screen to let the imagery emerge subtly from the darkness without overwhelming contentradial-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 arrangementfilter: 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#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 backgroundsbackground-image: url('data:image/svg+xml,...') with a procedural noise patternbackground-size with viewport-relative unitsradial-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