Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
ClassiqueTextureOrganiqueClair
Vorschau

Vintage Botanical Design Reference

Overview

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.

Visual Characteristics

Core Design Traits

  • Cream and parchment backgrounds: Warm off-white and ivory tones that simulate aged paper stock, never pure white
  • Hand-drawn botanical illustration: Detailed line drawings of plants, flowers, leaves, seeds, and roots rendered in a scientific illustration style with visible ink strokes and stippling
  • Scientific labeling and annotations: Latin species names, measurement lines, cross-section diagrams, specimen numbering, and handwritten notes used as decorative elements
  • Muted, nature-derived color palette: Sage greens, dusty roses, ochre yellows, sepia browns, and faded lavenders drawn from historical watercolor pigments
  • Fine-line engraving textures: Delicate hatching, stipple shading, and cross-hatching that reference copperplate and steel engraving printing techniques
  • Watercolor wash accents: Soft, translucent color fields with visible brushwork edges and gentle pigment pooling, applied sparingly
  • Herbarium-style specimen layouts: Elements arranged as if pressed and mounted, with generous margins and careful spacing
  • Aged paper effects: Subtle foxing spots, slight yellowing, soft vignetting, and worn edges that evoke antique documents
  • Ornamental borders from botanical elements: Vine tendrils, leaf garlands, seed pod arrangements, and floral corner pieces framing content areas
  • Serif-heavy typography: Transitional and old-style serifs with visible stroke contrast, evoking 18th-century typesetting
  • Gold and copper metallic accents: Restrained use of warm metallic tones for rules, monograms, and small ornamental details

Design Principles

  • Scientific precision meets artistic beauty: Every decorative element should feel accurate enough to appear in a naturalist field guide
  • Restrained elegance: Favor a few well-placed botanical motifs over dense floral wallpaper; less is more
  • Generous negative space: Frame content the way a museum mounts a pressed specimen -- with ample breathing room on all sides
  • Layered paper depth: Stack parchment tones, vellum overlays, and subtle shadows to create tactile, physical depth
  • Warmth without saturation: Keep all colors desaturated and warm-shifted, as if faded by time and sunlight
  • Typographic hierarchy through weight and style: Use italic, small caps, and letterspacing to establish hierarchy rather than relying on color contrast alone
  • Handmade imperfection: Embrace slight irregularities in line weight, color application, and alignment that suggest hand craftsmanship
  • Natural symmetry: Favor centered, symmetrical compositions inspired by the bilateral symmetry of botanical specimens

Color Palette

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

CSS Custom Properties

: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);
}

Typography

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

Font Pairing Suggestions

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

CSS Example

@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);
}

Layout Principles

  • Centered single-column layouts: Favor a 700-900px max-width centered reading column, like a page from a printed botanical monograph
  • Generous margins and padding: Use 40-60px padding on content blocks; botanical design demands breathing room around every element
  • Specimen-card grid: When displaying multiple items, use a relaxed 2- or 3-column CSS Grid with wide gaps (24-32px), each card resembling a mounted herbarium sheet
  • Vertical rhythm through typographic spacing: Maintain consistent baseline rhythm with 1.85 line-height and harmonious margin multiples
  • Botanical dividers between sections: Replace horizontal rules with SVG vine lines, leaf sprigs, or decorative botanical ornaments
  • Plate-style image framing: Surround illustrations and images with thin double borders and caption areas below, mimicking engraved plate presentation
  • Label-based information hierarchy: Use small-caps labels, italic annotations, and letterspaced category headers to organize information as in a museum catalog
  • Asymmetric margin notes: Occasionally place annotations, specimen numbers, or small illustrations in the margins for an authentic field-guide feel
  • Responsive simplification: On mobile, collapse multi-column grids to single-column, scale botanical ornaments proportionally, and maintain generous vertical spacing
  • Footer as colophon: Treat the page footer like a book colophon with small type, ornamental rules, and printer-style credits

CSS / Design Techniques

Botanical Card

.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 Button

.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 Navigation

.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);
}

Hero Section

.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 Texture Background

.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 Frame

.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;
}

Botanical Vine Divider

.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

.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;
}

Design Do's and Don'ts

Do's

  • Use cream, vellum, and parchment tones instead of pure white for all backgrounds; warmth is fundamental
  • Employ scientific-style annotations (Latin names, plate numbers, measurement notations) as decorative vocabulary
  • Pair high-contrast serif headings with readable old-style serif body text for authentic period typography
  • Apply subtle sepia or warm-tone filters to photographs so they harmonize with the antique palette
  • Use double-line borders, thin rules, and plate-style frames to reference engraved print conventions
  • Keep botanical illustrations line-based and monochromatic or lightly washed; avoid fully rendered realistic paintings
  • Incorporate generous whitespace and vertical rhythm; the aesthetic is about curation, not density
  • Use small caps and letterspacing for labels and category headings to evoke museum and herbarium cataloging

Don'ts

  • Avoid pure black text; use sepia (#5C4833) or deep moss (#3E5340) for a warmer reading experience
  • Avoid bright, saturated colors -- neons, electric blues, hot pinks -- that shatter the muted antique tone
  • Do not use rounded pill-shaped buttons or bubbly UI elements; the aesthetic favors rectangular, structured forms
  • Avoid sans-serif fonts as primary typefaces; this aesthetic is built on serif and script typography
  • Do not apply heavy drop shadows or glossy effects that feel digital and contemporary
  • Avoid cluttered layouts or dense information grids; each element should have breathing room like a museum display
  • Do not use pure gradient backgrounds or color-block sections; transitions should be subtle paper-tone shifts
  • Avoid modern stock photography with saturated editing; if using photos, desaturate and warm-shift them
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

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>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. &mdash; 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&eacute;<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>
        &ldquo;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.&rdquo;
      </blockquote>
      <cite>&mdash; 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">&mdash; &#10047; &mdash;</div>
    <p>
      Herbarium Botanica &middot; A study in vintage botanical design<br>
      Typeset in Libre Baskerville &amp; Crimson Text &middot; Printed on cream vellum
    </p>
  </footer>

</body>
</html>

Implementation Tips

  • Warm shadows only: Tint all box-shadow values with sepia-brown (rgba(92, 72, 51, 0.08)) instead of pure black; warm shadows maintain the antique paper feeling
  • Avoid pure white: Use #F5EFE0 (cream) or #FAF6ED (vellum) as your lightest background values; pure #FFFFFF feels clinical against this palette
  • Paper texture via CSS: Generate subtle fiber textures with repeating-linear-gradient rather than loading heavy image textures; overlay sparse radial-gradient spots to simulate foxing
  • Sepia-filter photographs: Apply filter: sepia(12%) saturate(85%) to all photographs so they harmonize with the muted botanical palette
  • SVG botanical ornaments: Use inline SVG for vine dividers, leaf motifs, and corner ornaments; keep them single-color and low-opacity so they read as subtle engraving details
  • Small caps for labels: Use font-variant: small-caps and generous letter-spacing: 0.12em for category labels and specimen headings to evoke museum cataloging conventions
  • Double-border plate framing: Layer two border elements (an outer 2px solid and an inner 1px solid at reduced opacity) using ::before and ::after pseudo-elements to create the look of an engraved plate border
  • Accessible contrast: While the palette is muted, ensure body text (#5C4833 on #F5EFE0) maintains at least a 7:1 contrast ratio for WCAG AA compliance; test with a contrast checker
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.