Vintage Botanical is a design aesthetic rooted in the rich tradition of scientific botanical illustration that flourished during the 18th and 19th centuries – often called the golden age of botanical art. It draws from the meticulous hand-drawn engravings and watercolor plates found in publications like Curtis’s Botanical Magazine (established 1787) and the celebrated works of Pierre-Joseph Redouté, who elevated plant illustration into a fine art. In web and graphic design, Vintage Botanical merges this heritage of scientific precision and artistic beauty with modern layout conventions, producing interfaces that feel learned, organic, and quietly luxurious.
The aesthetic is defined by its cream and parchment paper backgrounds, fine-line botanical illustrations, muted earth-tone palettes, and elegant serif typography reminiscent of antique field guides and herbarium labels. Scientific annotations – Latin binomial names, cross-section diagrams, measurement lines, and specimen numbering – serve as decorative vocabulary, lending an air of scholarly authority without overwhelming the content. Every element suggests something drawn by hand rather than rendered by machine: stippled textures, delicate ink strokes, watercolor washes, and the natural imperfections of letterpress printing on aged stock.
Where many nature-inspired aesthetics lean toward lush maximalism, Vintage Botanical exercises restraint. Generous whitespace frames each illustration or content block the way a museum mat board frames a pressed specimen. Color is used sparingly and always in service of accuracy – sage greens, dusty roses, ochre yellows, and sepia browns echo the pigments historically available to botanical artists working with watercolor on cream-toned paper. Typography pairs high-contrast transitional serifs for headings with sturdy old-style serifs for body text, evoking the typographic conventions of 18th-century naturalist treatises.
This aesthetic is well suited for brands in wellness, herbal products, organic skincare, artisan goods, botanical gardens, luxury stationery, specialty tea and coffee, and any project that wants to communicate timeless elegance, craftsmanship, and a deep connection to the natural world.
The Vintage Botanical palette is drawn directly from the pigments and paper stocks used by historical botanical illustrators. Backgrounds are warm and cream-toned, evoking aged rag paper. Accent colors mirror the muted tones of watercolor applied by hand over engraved or lithographed line work – think of the subtle coloring in a Redouté rose plate or an 18th-century herbal. No color is bright or saturated; everything appears as if it has mellowed gracefully over two centuries.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Aged Cream | #F5EFE0 |
Primary page background; simulates antique paper |
| Vellum White | #FAF6ED |
Card and surface backgrounds; lighter paper tone |
| Parchment Gold | #EDE4D0 |
Alternate section backgrounds; label backgrounds |
| Specimen Green | #6B7F5E |
Primary botanical accent; leaf and stem illustrations |
| Sage Wash | #9EAD8C |
Secondary green; lighter foliage and watercolor fills |
| Dusty Rose | #C4979A |
Floral accent; petal highlights and decorative borders |
| Pressed Petal | #DEB5A0 |
Warm tertiary accent; dried flower tones |
| Ochre Yellow | #C9A84C |
Stamen details; warm metallic-adjacent highlights |
| Sepia Ink | #5C4833 |
Primary text color; simulates iron gall ink |
| Copper Rule | #A67B5B |
Decorative rules, borders, and metallic accents |
| Lavender Mist | #A898B0 |
Tertiary accent; subtle floral variety |
| Deep Moss | #3E5340 |
Dark accent; strong emphasis and contrast |
| Foxing Spot | #D4C4A8 |
Subtle texture spots; aged paper imperfections |
| Faded Indigo | #6B7B8D |
Annotation text; secondary information |
| Plate Border | #8C7B68 |
Illustration borders; engraving plate edges |
:root {
/* Paper tones */
--vb-cream: #F5EFE0;
--vb-vellum: #FAF6ED;
--vb-parchment: #EDE4D0;
--vb-foxing: #D4C4A8;
/* Botanical greens */
--vb-specimen-green: #6B7F5E;
--vb-sage: #9EAD8C;
--vb-deep-moss: #3E5340;
/* Floral accents */
--vb-dusty-rose: #C4979A;
--vb-pressed-petal: #DEB5A0;
--vb-lavender: #A898B0;
/* Warm tones */
--vb-ochre: #C9A84C;
--vb-copper: #A67B5B;
--vb-plate-border: #8C7B68;
/* Ink tones */
--vb-sepia: #5C4833;
--vb-faded-indigo: #6B7B8D;
/* Functional aliases */
--vb-bg-primary: var(--vb-cream);
--vb-bg-surface: var(--vb-vellum);
--vb-bg-alt: var(--vb-parchment);
--vb-text-primary: var(--vb-sepia);
--vb-text-secondary: var(--vb-plate-border);
--vb-accent: var(--vb-specimen-green);
--vb-border: var(--vb-copper);
}
Vintage Botanical typography emulates the typesetting conventions of 18th- and 19th-century naturalist publications. Headings use high-contrast transitional serifs with generous letterspacing, referencing the title pages of botanical treatises. Body text relies on sturdy old-style serifs designed for sustained reading on warm-toned paper. Scientific labels and annotations are set in italic or small caps to distinguish them from descriptive prose – a convention borrowed directly from the Linnaean taxonomic tradition. Script and calligraphic faces appear sparingly for specimen labels or decorative flourishes, echoing the handwritten annotations found in herbarium collections.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Libre Baskerville | 400, 700 | Headings; high-contrast transitional serif ideal for botanical print titles | Libre Baskerville |
| Crimson Text | 400, 600, 700 | Body text; warm old-style serif with book-printing heritage | Crimson Text |
| Cormorant Garamond | 300, 400, 500, 600 | Display headings; elegant high-contrast serif with calligraphic roots | Cormorant Garamond |
| Lora | 400, 500, 600, 700 | Alternate body text; contemporary serif with brushed curves | Lora |
| IM Fell English | 400 | Decorative labels; irregular letterforms evoking antique printing | IM Fell English |
| Spectral | 300, 400, 500 | Annotations and captions; organic serif with visible stroke variation | Spectral |
| Tangerine | 400, 700 | Specimen labels and decorative script; calligraphic flourish | Tangerine |
| Heading | Body | Vibe |
|---|---|---|
| Libre Baskerville 700 | Crimson Text 400 | Classic naturalist treatise; scholarly and warm |
| Cormorant Garamond 500 | Lora 400 | Refined botanical plate caption style |
| Libre Baskerville 400 italic | Spectral 400 | Elegant field journal with detailed annotations |
| IM Fell English 400 | Crimson Text 400 | Aged antique printing; maximum vintage character |
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Spectral:ital,wght@0,300;0,400;1,400&display=swap');
body {
font-family: 'Crimson Text', 'Georgia', serif;
font-size: 1.1rem;
line-height: 1.85;
color: var(--vb-sepia);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Libre Baskerville', 'Baskerville', serif;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--vb-deep-moss);
line-height: 1.3;
}
h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.specimen-label {
font-family: 'Spectral', serif;
font-style: italic;
font-size: 0.9rem;
color: var(--vb-faded-indigo);
letter-spacing: 0.02em;
}
.latin-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 1.2em;
color: var(--vb-specimen-green);
}
.display-script {
font-family: 'Tangerine', cursive;
font-size: 2.2rem;
color: var(--vb-copper);
}
.botanical-card {
background: var(--vb-vellum);
border: 1px solid var(--vb-foxing);
padding: 32px;
position: relative;
box-shadow: 0 1px 4px rgba(92, 72, 51, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Double-line plate border */
.botanical-card::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 1px solid var(--vb-copper);
pointer-events: none;
opacity: 0.4;
}
.botanical-card:hover {
box-shadow: 0 4px 16px rgba(92, 72, 51, 0.12);
transform: translateY(-2px);
}
.botanical-card h3 {
font-family: 'Libre Baskerville', serif;
font-size: 1.3rem;
color: var(--vb-deep-moss);
margin-bottom: 8px;
}
.botanical-card .card-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--vb-specimen-green);
font-size: 1rem;
margin-bottom: 16px;
}
.botanical-card p {
font-family: 'Crimson Text', serif;
color: var(--vb-sepia);
line-height: 1.8;
}
.botanical-btn {
display: inline-block;
background: var(--vb-specimen-green);
color: var(--vb-vellum);
border: none;
padding: 12px 32px;
font-family: 'Libre Baskerville', serif;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
/* Inner border detail */
.botanical-btn::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid rgba(250, 246, 237, 0.35);
pointer-events: none;
transition: border-color 0.3s ease;
}
.botanical-btn:hover {
background: var(--vb-deep-moss);
box-shadow: 0 3px 10px rgba(62, 83, 64, 0.25);
}
.botanical-btn:hover::before {
border-color: rgba(250, 246, 237, 0.5);
}
/* Outlined variant */
.botanical-btn--outline {
background: transparent;
color: var(--vb-specimen-green);
border: 1px solid var(--vb-specimen-green);
}
.botanical-btn--outline::before {
display: none;
}
.botanical-btn--outline:hover {
background: var(--vb-specimen-green);
color: var(--vb-vellum);
}
.botanical-nav {
background: var(--vb-vellum);
border-bottom: 1px solid var(--vb-foxing);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
/* Decorative double rule beneath nav */
.botanical-nav::after {
content: '';
position: absolute;
bottom: -4px;
left: 32px;
right: 32px;
height: 1px;
background: var(--vb-foxing);
opacity: 0.5;
}
.botanical-nav .brand {
font-family: 'Libre Baskerville', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--vb-deep-moss);
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 20px 0;
}
.botanical-nav .nav-links {
display: flex;
gap: 8px;
list-style: none;
}
.botanical-nav .nav-links a {
font-family: 'Crimson Text', serif;
font-size: 1rem;
color: var(--vb-sepia);
text-decoration: none;
padding: 20px 16px;
position: relative;
transition: color 0.2s ease;
}
.botanical-nav .nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 2px;
background: var(--vb-specimen-green);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.botanical-nav .nav-links a:hover {
color: var(--vb-specimen-green);
}
.botanical-nav .nav-links a:hover::after {
transform: scaleX(1);
}
.botanical-hero {
background: linear-gradient(
180deg,
var(--vb-cream) 0%,
var(--vb-parchment) 100%
);
text-align: center;
padding: 100px 40px 80px;
position: relative;
overflow: hidden;
}
/* Subtle aged vignette around edges */
.botanical-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(92, 72, 51, 0.06) 100%
);
pointer-events: none;
}
.botanical-hero h1 {
font-family: 'Libre Baskerville', serif;
font-size: clamp(2.2rem, 5.5vw, 3.8rem);
font-weight: 700;
color: var(--vb-deep-moss);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 12px;
}
.botanical-hero .hero-latin {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
color: var(--vb-specimen-green);
margin-bottom: 24px;
}
.botanical-hero .hero-description {
font-family: 'Crimson Text', serif;
font-size: 1.15rem;
color: var(--vb-sepia);
max-width: 600px;
margin: 0 auto 32px;
line-height: 1.85;
}
/* Decorative botanical rule */
.botanical-hero .hero-rule {
width: 120px;
height: 1px;
background: var(--vb-copper);
margin: 0 auto 24px;
position: relative;
}
.botanical-hero .hero-rule::before {
content: '\2E19'; /* reversed comma, resembles a leaf */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
color: var(--vb-copper);
background: var(--vb-parchment);
padding: 0 8px;
}
.aged-paper {
background-color: var(--vb-cream);
background-image:
/* Subtle fiber texture */
repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(92, 72, 51, 0.015) 3px,
rgba(92, 72, 51, 0.015) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 4px,
rgba(92, 72, 51, 0.01) 4px,
rgba(92, 72, 51, 0.01) 5px
),
/* Foxing spots simulation */
radial-gradient(ellipse at 15% 25%, rgba(212, 196, 168, 0.3) 0%, transparent 40%),
radial-gradient(ellipse at 78% 60%, rgba(212, 196, 168, 0.2) 0%, transparent 35%),
radial-gradient(ellipse at 45% 85%, rgba(212, 196, 168, 0.25) 0%, transparent 30%);
}
.specimen-plate {
background: var(--vb-vellum);
padding: 40px;
position: relative;
text-align: center;
max-width: 500px;
margin: 40px auto;
}
/* Outer plate border */
.specimen-plate::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 2px solid var(--vb-plate-border);
pointer-events: none;
}
/* Inner plate border */
.specimen-plate::after {
content: '';
position: absolute;
top: 14px;
left: 14px;
right: 14px;
bottom: 14px;
border: 1px solid var(--vb-plate-border);
opacity: 0.5;
pointer-events: none;
}
.specimen-plate img {
max-width: 100%;
height: auto;
filter: sepia(8%) saturate(90%);
}
.specimen-plate .plate-caption {
font-family: 'Spectral', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--vb-faded-indigo);
margin-top: 16px;
letter-spacing: 0.02em;
}
.specimen-plate .plate-number {
position: absolute;
bottom: 20px;
right: 24px;
font-family: 'Spectral', serif;
font-size: 0.75rem;
color: var(--vb-plate-border);
letter-spacing: 0.05em;
}
.vine-divider {
text-align: center;
margin: 48px 0;
position: relative;
height: 24px;
}
.vine-divider::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 24px;
background: no-repeat center / contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M20,12 C40,4 60,20 80,12 S120,4 140,12 S160,20 180,12' fill='none' stroke='%236B7F5E' stroke-width='1' opacity='0.5'/%3E%3Cellipse cx='60' cy='8' rx='4' ry='6' fill='%239EAD8C' opacity='0.3' transform='rotate(-20 60 8)'/%3E%3Cellipse cx='100' cy='12' rx='3' ry='5' fill='%239EAD8C' opacity='0.25' transform='rotate(15 100 12)'/%3E%3Cellipse cx='140' cy='8' rx='4' ry='6' fill='%239EAD8C' opacity='0.3' transform='rotate(-10 140 8)'/%3E%3C/svg%3E");
opacity: 0.7;
}
.herbarium-label {
background: var(--vb-parchment);
border: 1px solid var(--vb-copper);
padding: 20px 28px;
max-width: 400px;
position: relative;
font-family: 'Crimson Text', serif;
}
.herbarium-label::before {
content: '';
position: absolute;
top: -1px;
left: 20%;
right: 20%;
height: 3px;
background: var(--vb-specimen-green);
opacity: 0.6;
}
.herbarium-label .label-title {
font-family: 'Libre Baskerville', serif;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--vb-deep-moss);
margin-bottom: 8px;
}
.herbarium-label .label-species {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.3rem;
color: var(--vb-specimen-green);
margin-bottom: 4px;
}
.herbarium-label .label-details {
font-size: 0.9rem;
color: var(--vb-plate-border);
line-height: 1.7;
}
#5C4833) or deep moss (#3E5340) for a warmer reading experience| Aesthetic | Relationship |
|---|---|
| Cottagecore | Shares floral motifs and warm cream palettes, but Cottagecore is more rustic and whimsical while Vintage Botanical is scholarly and precise |
| Art Nouveau | Both draw heavily from botanical forms, but Art Nouveau stylizes and abstracts plant life into flowing decorative patterns |
| Dark Academia | Shares the scholarly, antiquarian atmosphere and serif-heavy typography, but uses darker palettes and architectural imagery |
| Arts and Crafts | Related emphasis on handmade quality and rejection of industrial aesthetics; Arts and Crafts is broader in subject matter |
| Grandmillennial | Both embrace traditional, vintage-inspired design, but Grandmillennial includes a wider range of decorative patterns like chintz and toile |
| Earth Tones | Shares the muted, nature-derived color philosophy, but Earth Tones is more minimal and contemporary in layout |
| Japandi | Both value restraint and natural materials, but Japandi is more geometric and minimal, lacking the ornamental richness |
| Wabi-Sabi | Shares appreciation for imperfection and natural aging, but Wabi-Sabi is more austere and Japanese-inflected |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vintage Botanical</title>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Spectral:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
<style>
/* ============================================
CSS Custom Properties
============================================ */
:root {
--vb-cream: #F5EFE0;
--vb-vellum: #FAF6ED;
--vb-parchment: #EDE4D0;
--vb-foxing: #D4C4A8;
--vb-specimen-green: #6B7F5E;
--vb-sage: #9EAD8C;
--vb-deep-moss: #3E5340;
--vb-dusty-rose: #C4979A;
--vb-pressed-petal: #DEB5A0;
--vb-lavender: #A898B0;
--vb-ochre: #C9A84C;
--vb-copper: #A67B5B;
--vb-plate-border: #8C7B68;
--vb-sepia: #5C4833;
--vb-faded-indigo: #6B7B8D;
}
/* ============================================
Reset and Base
============================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Crimson Text', 'Georgia', serif;
font-size: 1.1rem;
line-height: 1.85;
color: var(--vb-sepia);
background-color: var(--vb-cream);
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(92, 72, 51, 0.015) 3px,
rgba(92, 72, 51, 0.015) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 4px,
rgba(92, 72, 51, 0.01) 4px,
rgba(92, 72, 51, 0.01) 5px
);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--vb-specimen-green);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--vb-deep-moss);
}
/* ============================================
Navigation
============================================ */
.nav {
background: var(--vb-vellum);
border-bottom: 1px solid var(--vb-foxing);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.nav::after {
content: '';
position: absolute;
bottom: -4px;
left: 32px;
right: 32px;
height: 1px;
background: var(--vb-foxing);
opacity: 0.4;
}
.nav .brand {
font-family: 'Libre Baskerville', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--vb-deep-moss);
text-decoration: none;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 18px 0;
}
.nav .brand span {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
color: var(--vb-specimen-green);
margin-left: 6px;
}
.nav ul {
display: flex;
gap: 4px;
list-style: none;
}
.nav ul a {
font-family: 'Crimson Text', serif;
font-size: 1rem;
color: var(--vb-sepia);
padding: 18px 16px;
display: block;
position: relative;
}
.nav ul a::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 2px;
background: var(--vb-specimen-green);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav ul a:hover {
color: var(--vb-specimen-green);
}
.nav ul a:hover::after {
transform: scaleX(1);
}
/* ============================================
Hero Section
============================================ */
.hero {
background: linear-gradient(180deg, var(--vb-cream) 0%, var(--vb-parchment) 100%);
text-align: center;
padding: 100px 40px 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(92, 72, 51, 0.05) 100%
);
pointer-events: none;
}
.hero h1 {
font-family: 'Libre Baskerville', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
color: var(--vb-deep-moss);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 8px;
}
.hero .latin {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1rem, 2.5vw, 1.4rem);
color: var(--vb-specimen-green);
margin-bottom: 28px;
}
.hero .rule {
width: 100px;
height: 1px;
background: var(--vb-copper);
margin: 0 auto 28px;
position: relative;
}
.hero .rule::before {
content: '\273B';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.9rem;
color: var(--vb-copper);
background: var(--vb-parchment);
padding: 0 10px;
}
.hero p {
font-family: 'Crimson Text', serif;
font-size: 1.15rem;
color: var(--vb-sepia);
max-width: 580px;
margin: 0 auto 36px;
line-height: 1.85;
}
.hero .btn {
display: inline-block;
background: var(--vb-specimen-green);
color: var(--vb-vellum);
padding: 14px 36px;
font-family: 'Libre Baskerville', serif;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
position: relative;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.hero .btn::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid rgba(250, 246, 237, 0.3);
pointer-events: none;
}
.hero .btn:hover {
background: var(--vb-deep-moss);
color: var(--vb-vellum);
box-shadow: 0 4px 12px rgba(62, 83, 64, 0.25);
}
/* ============================================
Container
============================================ */
.container {
max-width: 860px;
margin: 0 auto;
padding: 60px 32px;
}
.container h2 {
font-family: 'Libre Baskerville', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--vb-deep-moss);
text-align: center;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.container .section-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--vb-specimen-green);
text-align: center;
margin-bottom: 40px;
}
/* ============================================
Vine Divider
============================================ */
.divider {
text-align: center;
margin: 48px 0;
position: relative;
height: 24px;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 24px;
background: no-repeat center / contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M20,12 C40,4 60,20 80,12 S120,4 140,12 S160,20 180,12' fill='none' stroke='%236B7F5E' stroke-width='1' opacity='0.5'/%3E%3Cellipse cx='60' cy='8' rx='4' ry='6' fill='%239EAD8C' opacity='0.3' transform='rotate(-20 60 8)'/%3E%3Cellipse cx='100' cy='12' rx='3' ry='5' fill='%239EAD8C' opacity='0.25' transform='rotate(15 100 12)'/%3E%3Cellipse cx='140' cy='8' rx='4' ry='6' fill='%239EAD8C' opacity='0.3' transform='rotate(-10 140 8)'/%3E%3C/svg%3E");
opacity: 0.7;
}
/* ============================================
Specimen Card Grid
============================================ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
margin-bottom: 48px;
}
.card {
background: var(--vb-vellum);
border: 1px solid var(--vb-foxing);
padding: 32px;
position: relative;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 1px solid var(--vb-copper);
pointer-events: none;
opacity: 0.3;
}
.card:hover {
box-shadow: 0 4px 16px rgba(92, 72, 51, 0.12);
transform: translateY(-2px);
}
.card .card-number {
font-family: 'Spectral', serif;
font-size: 0.7rem;
color: var(--vb-plate-border);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.card h3 {
font-family: 'Libre Baskerville', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--vb-deep-moss);
margin-bottom: 4px;
}
.card .card-latin {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--vb-specimen-green);
margin-bottom: 14px;
}
.card p {
font-size: 1rem;
line-height: 1.75;
color: var(--vb-sepia);
}
/* ============================================
Specimen Plate
============================================ */
.plate {
background: var(--vb-vellum);
padding: 40px;
position: relative;
text-align: center;
max-width: 500px;
margin: 0 auto 48px;
}
.plate::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 2px solid var(--vb-plate-border);
pointer-events: none;
}
.plate::after {
content: '';
position: absolute;
top: 14px;
left: 14px;
right: 14px;
bottom: 14px;
border: 1px solid var(--vb-plate-border);
opacity: 0.4;
pointer-events: none;
}
.plate .plate-illustration {
width: 200px;
height: 260px;
margin: 0 auto 20px;
position: relative;
}
/* CSS-only botanical illustration (stylized) */
.plate .plate-illustration .stem {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 180px;
background: var(--vb-specimen-green);
opacity: 0.6;
}
.plate .plate-illustration .leaf {
position: absolute;
width: 30px;
height: 50px;
border-radius: 50% 0 50% 0;
border: 1.5px solid var(--vb-specimen-green);
opacity: 0.5;
}
.plate .plate-illustration .leaf:nth-child(2) {
left: 50%;
top: 80px;
transform: translateX(5px) rotate(25deg);
}
.plate .plate-illustration .leaf:nth-child(3) {
right: 50%;
top: 55px;
transform: translateX(-5px) rotate(-30deg) scaleX(-1);
}
.plate .plate-illustration .flower {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 1.5px solid var(--vb-dusty-rose);
opacity: 0.5;
}
.plate .plate-illustration .flower::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--vb-ochre);
opacity: 0.4;
}
.plate .plate-caption {
font-family: 'Spectral', serif;
font-style: italic;
font-size: 0.85rem;
color: var(--vb-faded-indigo);
letter-spacing: 0.02em;
}
.plate .plate-number {
position: absolute;
bottom: 20px;
right: 24px;
font-family: 'Spectral', serif;
font-size: 0.7rem;
color: var(--vb-plate-border);
letter-spacing: 0.05em;
}
/* ============================================
Herbarium Label
============================================ */
.label {
background: var(--vb-parchment);
border: 1px solid var(--vb-copper);
padding: 20px 28px;
max-width: 420px;
margin: 0 auto 48px;
position: relative;
}
.label::before {
content: '';
position: absolute;
top: -1px;
left: 20%;
right: 20%;
height: 3px;
background: var(--vb-specimen-green);
opacity: 0.5;
}
.label .label-heading {
font-family: 'Libre Baskerville', serif;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vb-deep-moss);
margin-bottom: 6px;
}
.label .label-species {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.3rem;
color: var(--vb-specimen-green);
margin-bottom: 4px;
}
.label .label-details {
font-family: 'Crimson Text', serif;
font-size: 0.9rem;
color: var(--vb-plate-border);
line-height: 1.7;
}
/* ============================================
Featured Text Section
============================================ */
.featured-text {
text-align: center;
padding: 40px 20px;
max-width: 640px;
margin: 0 auto;
}
.featured-text blockquote {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-style: italic;
color: var(--vb-deep-moss);
line-height: 1.6;
margin-bottom: 12px;
}
.featured-text cite {
font-family: 'Spectral', serif;
font-size: 0.85rem;
color: var(--vb-plate-border);
font-style: normal;
letter-spacing: 0.05em;
}
/* ============================================
Buttons
============================================ */
.btn {
display: inline-block;
background: var(--vb-specimen-green);
color: var(--vb-vellum);
padding: 12px 32px;
font-family: 'Libre Baskerville', serif;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.btn::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid rgba(250, 246, 237, 0.3);
pointer-events: none;
}
.btn:hover {
background: var(--vb-deep-moss);
color: var(--vb-vellum);
box-shadow: 0 3px 10px rgba(62, 83, 64, 0.25);
}
.btn--outline {
background: transparent;
color: var(--vb-specimen-green);
border: 1px solid var(--vb-specimen-green);
}
.btn--outline::before {
display: none;
}
.btn--outline:hover {
background: var(--vb-specimen-green);
color: var(--vb-vellum);
}
/* ============================================
Footer
============================================ */
.footer {
background: var(--vb-parchment);
border-top: 1px solid var(--vb-foxing);
text-align: center;
padding: 40px 32px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: -4px;
left: 60px;
right: 60px;
height: 1px;
background: var(--vb-foxing);
opacity: 0.4;
}
.footer p {
font-family: 'Spectral', serif;
font-size: 0.8rem;
color: var(--vb-plate-border);
letter-spacing: 0.04em;
}
.footer .footer-ornament {
color: var(--vb-sage);
font-size: 1rem;
margin-bottom: 12px;
letter-spacing: 0.3em;
opacity: 0.6;
}
/* ============================================
Responsive
============================================ */
@media (max-width: 768px) {
.nav {
flex-direction: column;
padding: 12px 20px;
gap: 8px;
}
.nav ul {
gap: 0;
}
.nav ul a {
padding: 10px 12px;
font-size: 0.9rem;
}
.hero {
padding: 60px 24px 50px;
}
.container {
padding: 40px 20px;
}
.card-grid {
grid-template-columns: 1fr;
}
.plate {
padding: 28px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="#" class="brand">Herbarium <span>Botanica</span></a>
<ul>
<li><a href="#collection">Collection</a></li>
<li><a href="#specimen">Specimen</a></li>
<li><a href="#about">About</a></li>
<li><a href="#journal">Journal</a></li>
</ul>
</nav>
<!-- Hero Section -->
<header class="hero">
<h1>The Botanical Archive</h1>
<div class="latin">Illustrationes Plantarum Rariorum</div>
<div class="rule"></div>
<p>
A curated collection of hand-drawn botanical specimens, rendered with the
precision of scientific illustration and the warmth of watercolor on aged
cream paper.
</p>
<a href="#collection" class="btn">Explore the Collection</a>
</header>
<!-- Collection Section -->
<section class="container" id="collection">
<h2>Featured Specimens</h2>
<div class="section-subtitle">From the permanent collection</div>
<div class="card-grid">
<div class="card">
<div class="card-number">Plate I</div>
<h3>Damask Rose</h3>
<div class="card-latin">Rosa damascena Mill.</div>
<p>
Cultivated since antiquity for its fragrance, the damask rose
presents layered petals in soft pink, fading to cream at the
margins. Prized by perfumers and herbalists alike.
</p>
</div>
<div class="card">
<div class="card-number">Plate II</div>
<h3>Common Sage</h3>
<div class="card-latin">Salvia officinalis L.</div>
<p>
A woody perennial with velvety grey-green leaves and whorls
of violet-blue flowers. Long valued in the apothecary garden
for its aromatic and medicinal properties.
</p>
</div>
<div class="card">
<div class="card-number">Plate III</div>
<h3>English Lavender</h3>
<div class="card-latin">Lavandula angustifolia Mill.</div>
<p>
Slender spikes of purple florets atop silvery foliage.
Illustrated from a specimen collected in the south of France,
pressed and documented in the summer of 1847.
</p>
</div>
</div>
</section>
<!-- Divider -->
<div class="divider"></div>
<!-- Specimen Plate -->
<section class="container" id="specimen">
<h2>Specimen Plate</h2>
<div class="section-subtitle">Detailed illustration study</div>
<div class="plate">
<div class="plate-illustration">
<div class="stem"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="flower"></div>
</div>
<div class="plate-caption">
Rosa centifolia L. — watercolor over engraving, c. 1802
</div>
<div class="plate-number">Pl. XLVII</div>
</div>
<!-- Herbarium Label -->
<div class="label">
<div class="label-heading">Herbarium Specimen</div>
<div class="label-species">Rosa centifolia L.</div>
<div class="label-details">
Family: Rosaceae<br>
Collector: J. Redouté<br>
Location: Jardin du Luxembourg, Paris<br>
Date: 14 June 1802<br>
Habitat: Cultivated garden, full sun
</div>
</div>
</section>
<!-- Divider -->
<div class="divider"></div>
<!-- Quote Section -->
<section class="container" id="about">
<div class="featured-text">
<blockquote>
“The study of botany is not merely a science, but an art of
seeing -- to observe the infinite variation of form in a single petal
is to glimpse the architecture of nature itself.”
</blockquote>
<cite>— From the preface to <em>Flora Londinensis</em>, 1777</cite>
</div>
</section>
<!-- Divider -->
<div class="divider"></div>
<!-- Journal Section -->
<section class="container" id="journal">
<h2>From the Field Journal</h2>
<div class="section-subtitle">Notes and observations</div>
<div class="card-grid">
<div class="card">
<div class="card-number">Entry No. 42</div>
<h3>On Pressing Specimens</h3>
<p>
The art of pressing requires patience above all. Each leaf must be
positioned with care, the moisture drawn slowly through layers of
blotting paper. The finest specimens retain their color for decades.
</p>
</div>
<div class="card">
<div class="card-number">Entry No. 58</div>
<h3>Watercolor Technique</h3>
<p>
Begin with the palest washes, building depth through successive
layers. The cream of the paper itself provides the lightest value
-- never apply white pigment over botanical subjects.
</p>
</div>
</div>
<div style="text-align: center; margin-top: 36px;">
<a href="#" class="btn">Read the Journal</a>
<a href="#" class="btn btn--outline" style="margin-left: 12px;">View All Plates</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-ornament">— ✿ —</div>
<p>
Herbarium Botanica · A study in vintage botanical design<br>
Typeset in Libre Baskerville & Crimson Text · Printed on cream vellum
</p>
</footer>
</body>
</html>
box-shadow values with sepia-brown (rgba(92, 72, 51, 0.08)) instead of pure black; warm shadows maintain the antique paper feeling#F5EFE0 (cream) or #FAF6ED (vellum) as your lightest background values; pure #FFFFFF feels clinical against this paletterepeating-linear-gradient rather than loading heavy image textures; overlay sparse radial-gradient spots to simulate foxingfilter: sepia(12%) saturate(85%) to all photographs so they harmonize with the muted botanical palettefont-variant: small-caps and generous letter-spacing: 0.12em for category labels and specimen headings to evoke museum cataloging conventions::before and ::after pseudo-elements to create the look of an engraved plate border#5C4833 on #F5EFE0) maintains at least a 7:1 contrast ratio for WCAG AA compliance; test with a contrast checker