The Digital Garden is a web design aesthetic rooted in the philosophy of personal knowledge management, interconnected note-taking, and the organic cultivation of ideas over time. Popularized by thinkers like Maggie Appleton, Andy Matuschak, and communities around tools such as Obsidian and Roam Research, the Digital Garden rejects the reverse-chronological blog format in favor of a wiki-like structure where pages are densely linked, continuously evolving, and never truly “finished.” Each note is treated as a living plant: seedlings represent nascent ideas, budding notes are partially developed thoughts, and evergreen notes are fully mature concepts that have been refined through sustained attention.
Visually, the Digital Garden aesthetic draws from the warmth and tactility of old encyclopedias, personal journals, library card catalogs, and botanical illustrations. The palette is earthy and inviting: warm creams, soft sage greens, muted browns, and gentle amber tones create a reading environment that feels like a sunlit study or a well-worn library rather than a corporate dashboard. Typography leans toward readable serifs and humanist sans-serifs that evoke printed books, academic papers, and hand-annotated marginalia. Layouts favor generous whitespace, comfortable line lengths, and a single-column or asymmetric two-column structure that foregrounds content while offering unobtrusive navigation through backlinks, tag clusters, and optional graph visualizations.
The aesthetic embraces imperfection and process. Growth indicators (seedling, budding, evergreen icons), timestamps showing when a note was last tended, and explicit status labels signal that knowledge is alive and evolving. Hover previews allow readers to glimpse linked notes without navigating away, and interactive node graphs reveal the underlying web of connections. The overall experience is one of wandering through a personal library: warm, contemplative, non-linear, and deeply human. Unlike minimalist design movements that strip away personality, the Digital Garden celebrates the idiosyncratic voice of its author, encouraging readers to explore, linger, and discover unexpected connections between ideas.
The Digital Garden palette is drawn from the natural world of a well-tended garden: warm soil tones, leafy greens, sun-bleached paper, and the amber glow of a desk lamp. The overall feeling is warm, approachable, and easy on the eyes during long reading sessions. Backgrounds lean toward cream and parchment rather than pure white, while text uses dark brown or warm charcoal to avoid the harshness of pure black.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Parchment Cream | #FAF6F0 |
Primary page background; warm off-white base |
| Notebook White | #FFFFFF |
Card and note surfaces for subtle lift |
| Garden Sage | #6B8F71 |
Primary accent; links, icons, active states |
| Deep Fern | #3D6B4F |
Headings, strong emphasis, hover states |
| Warm Soil | #5C4B3A |
Primary body text; warm dark brown |
| Bark Brown | #3E2F23 |
Bold text, high-emphasis headings |
| Amber Glow | #D4A853 |
Highlights, callout borders, star ratings |
| Soft Marigold | #E8C56D |
Secondary highlight, tag backgrounds |
| Seedling Green | #A8D5A2 |
Growth indicators, success states, new notes |
| Budding Olive | #8BA888 |
Intermediate growth indicators, secondary accent |
| Dusty Rose | #C4A0A0 |
Tertiary accent, decorative elements |
| Fog Gray | #B0A99F |
Muted secondary text, borders, dividers |
| Twilight Charcoal | #2C2C2C |
Dark-mode text alternative, code blocks |
| Linen Tan | #F0E8DA |
Alternate surface, sidebar background |
| Pressed Leaf | #4A7C59 |
Graph nodes, internal link underlines |
:root {
--dg-parchment: #FAF6F0;
--dg-white: #FFFFFF;
--dg-sage: #6B8F71;
--dg-fern: #3D6B4F;
--dg-soil: #5C4B3A;
--dg-bark: #3E2F23;
--dg-amber: #D4A853;
--dg-marigold: #E8C56D;
--dg-seedling: #A8D5A2;
--dg-budding: #8BA888;
--dg-rose: #C4A0A0;
--dg-fog: #B0A99F;
--dg-charcoal: #2C2C2C;
--dg-linen: #F0E8DA;
--dg-leaf: #4A7C59;
}
Digital Garden typography is designed for sustained, comfortable reading of dense, idea-rich text. Serif fonts dominate body copy, evoking the printed book or academic journal. Headings use either a slightly bolder weight of the same serif or a contrasting humanist sans-serif. Monospace fonts appear in code blocks, wikilink syntax, and metadata displays. The overall typographic tone is scholarly but approachable, never cold or corporate.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Lora | 400, 500, 600, 700 | Body text; elegant transitional serif with excellent readability | Lora |
| Source Serif 4 | 300, 400, 600 | Body text alternative; open-source serif inspired by scholarly publishing | Source Serif 4 |
| Inter | 400, 500, 600 | UI elements, navigation, metadata labels; clean humanist sans-serif | Inter |
| IBM Plex Sans | 400, 500, 600 | Headings and navigation; warm and technical without being cold | IBM Plex Sans |
| IBM Plex Mono | 400, 500 | Code blocks, wikilink syntax, metadata; readable monospace | IBM Plex Mono |
| Cormorant Garamond | 400, 500, 600 | Display headings; refined old-style serif for large text | Cormorant Garamond |
| Heading | Body | Vibe |
|---|---|---|
| IBM Plex Sans 600 | Lora 400 | Scholarly but modern; clear hierarchy between navigation and reading |
| Cormorant Garamond 500 | Source Serif 4 400 | Classic literary garden; elegant and deeply bookish |
| Inter 600 | Lora 400 | Clean and functional; foregrounds content with minimal friction |
| Lora 700 | Lora 400 | Single-family harmony; cohesive and understated |
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
body {
font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
font-size: 1.125rem;
line-height: 1.85;
color: #5C4B3A;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
color: #3D6B4F;
line-height: 1.3;
}
code, pre, .wikilink-syntax {
font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
font-size: 0.9em;
}
.metadata, .note-status, .tag {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #B0A99F;
}
.garden-card {
background: var(--dg-white);
border: 1px solid rgba(107, 143, 113, 0.15);
border-radius: 12px;
padding: 28px 32px;
box-shadow: 0 1px 4px rgba(92, 75, 58, 0.06);
transition: box-shadow 0.25s ease, transform 0.25s ease;
position: relative;
}
.garden-card:hover {
box-shadow: 0 4px 16px rgba(92, 75, 58, 0.1);
transform: translateY(-2px);
}
.garden-card .note-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dg-sage);
margin-bottom: 12px;
}
.garden-card .note-title {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--dg-bark);
margin-bottom: 8px;
line-height: 1.35;
}
.garden-card .note-excerpt {
font-family: 'Lora', serif;
font-size: 0.95rem;
color: var(--dg-soil);
line-height: 1.7;
}
.garden-card .tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px;
}
.garden-card .tag {
background: rgba(107, 143, 113, 0.1);
color: var(--dg-fern);
padding: 3px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
}
.garden-button {
background: var(--dg-sage);
color: var(--dg-parchment);
border: none;
border-radius: 8px;
padding: 10px 24px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(61, 107, 79, 0.2);
}
.garden-button:hover {
background: var(--dg-fern);
box-shadow: 0 2px 8px rgba(61, 107, 79, 0.3);
transform: translateY(-1px);
}
.garden-button--secondary {
background: transparent;
color: var(--dg-sage);
border: 1.5px solid var(--dg-sage);
box-shadow: none;
}
.garden-button--secondary:hover {
background: rgba(107, 143, 113, 0.08);
box-shadow: none;
transform: none;
}
.garden-nav {
background: var(--dg-parchment);
border-bottom: 1px solid rgba(176, 169, 159, 0.3);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
background: rgba(250, 246, 240, 0.92);
}
.garden-nav .logo {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--dg-fern);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.garden-nav .logo .leaf-icon {
font-size: 1.2rem;
}
.garden-nav .nav-links {
display: flex;
gap: 4px;
list-style: none;
}
.garden-nav .nav-links a {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
font-weight: 400;
color: var(--dg-soil);
text-decoration: none;
padding: 8px 14px;
border-radius: 6px;
transition: background 0.15s ease, color 0.15s ease;
}
.garden-nav .nav-links a:hover,
.garden-nav .nav-links a.active {
background: rgba(107, 143, 113, 0.1);
color: var(--dg-fern);
}
.garden-nav .search-trigger {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
color: var(--dg-fog);
background: rgba(176, 169, 159, 0.12);
border: 1px solid rgba(176, 169, 159, 0.25);
border-radius: 8px;
padding: 6px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.garden-hero {
background: linear-gradient(175deg, var(--dg-parchment) 0%, var(--dg-linen) 60%, rgba(168, 213, 162, 0.12) 100%);
padding: 80px 40px 64px;
text-align: center;
position: relative;
}
.garden-hero h1 {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 3rem;
font-weight: 500;
color: var(--dg-bark);
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.garden-hero .subtitle {
font-family: 'Lora', serif;
font-size: 1.2rem;
font-style: italic;
color: var(--dg-soil);
max-width: 540px;
margin: 0 auto 24px;
line-height: 1.7;
opacity: 0.85;
}
.garden-hero .stats {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 32px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
color: var(--dg-fog);
}
.garden-hero .stats strong {
display: block;
font-size: 1.5rem;
color: var(--dg-fern);
font-weight: 600;
}
/* Internal wikilinks - distinct from external links */
a.wikilink {
color: var(--dg-fern);
text-decoration: none;
border-bottom: 1.5px dotted var(--dg-sage);
padding-bottom: 1px;
transition: border-color 0.15s ease, color 0.15s ease;
}
a.wikilink:hover {
color: var(--dg-sage);
border-bottom-style: solid;
border-color: var(--dg-sage);
}
/* External links */
a.external {
color: var(--dg-soil);
text-decoration: underline;
text-decoration-color: rgba(92, 75, 58, 0.3);
text-underline-offset: 3px;
}
a.external::after {
content: '\2197';
font-size: 0.7em;
margin-left: 2px;
opacity: 0.5;
}
/* Hover preview tooltip */
.link-preview {
position: absolute;
background: var(--dg-white);
border: 1px solid rgba(107, 143, 113, 0.2);
border-radius: 10px;
padding: 16px 20px;
max-width: 320px;
box-shadow: 0 8px 24px rgba(92, 75, 58, 0.12);
font-family: 'Lora', serif;
font-size: 0.85rem;
line-height: 1.6;
color: var(--dg-soil);
z-index: 200;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.link-preview.visible {
opacity: 1;
transform: translateY(0);
}
/* Backlinks panel */
.backlinks-panel {
background: var(--dg-linen);
border-radius: 12px;
padding: 24px 28px;
margin-top: 48px;
border: 1px solid rgba(176, 169, 159, 0.2);
}
.backlinks-panel h3 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dg-fog);
margin-bottom: 16px;
}
.backlinks-panel .backlink-item {
padding: 8px 0;
border-bottom: 1px solid rgba(176, 169, 159, 0.15);
}
.backlinks-panel .backlink-item:last-child {
border-bottom: none;
}
.backlinks-panel .backlink-title {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
color: var(--dg-fern);
font-size: 0.95rem;
}
.backlinks-panel .backlink-excerpt {
font-family: 'Lora', serif;
font-size: 0.85rem;
color: var(--dg-fog);
margin-top: 4px;
line-height: 1.5;
}
.note-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 12px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.note-badge--seedling {
background: rgba(168, 213, 162, 0.2);
color: #4A7C59;
}
.note-badge--seedling::before {
content: '\1F331';
font-size: 0.85em;
}
.note-badge--budding {
background: rgba(139, 168, 136, 0.2);
color: #3D6B4F;
}
.note-badge--budding::before {
content: '\1F33F';
font-size: 0.85em;
}
.note-badge--evergreen {
background: rgba(107, 143, 113, 0.15);
color: #3D6B4F;
}
.note-badge--evergreen::before {
content: '\1F332';
font-size: 0.85em;
}
.graph-container {
background: var(--dg-parchment);
border: 1px solid rgba(176, 169, 159, 0.2);
border-radius: 12px;
overflow: hidden;
position: relative;
}
.graph-node {
fill: var(--dg-sage);
stroke: var(--dg-parchment);
stroke-width: 2;
cursor: pointer;
transition: fill 0.15s ease;
}
.graph-node:hover {
fill: var(--dg-fern);
}
.graph-node--active {
fill: var(--dg-amber);
r: 8;
}
.graph-link {
stroke: rgba(176, 169, 159, 0.35);
stroke-width: 1;
}
.graph-link--active {
stroke: var(--dg-sage);
stroke-width: 1.5;
}
.graph-label {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 11px;
fill: var(--dg-soil);
pointer-events: none;
}
.garden-callout {
background: rgba(212, 168, 83, 0.08);
border-left: 3px solid var(--dg-amber);
border-radius: 0 10px 10px 0;
padding: 20px 24px;
margin: 24px 0;
font-family: 'Lora', serif;
font-size: 0.95rem;
line-height: 1.75;
color: var(--dg-soil);
}
.garden-callout .callout-title {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--dg-amber);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
| Aesthetic | Relationship |
|---|---|
| Dark Academia | Shares the scholarly, book-loving atmosphere and serif typography, but Dark Academia is moody and somber where Digital Garden is warm and sunlit |
| Cottagecore | Both use earthy palettes and organic motifs, but Cottagecore is pastoral and decorative while Digital Garden is knowledge-focused and structurally wiki-like |
| Hygge | Shares the emphasis on warmth, comfort, and inviting atmospheres; Hygge focuses on physical coziness while Digital Garden applies it to intellectual spaces |
| Flat Design | Both value clean layouts and clear typography, but Flat Design is neutral and system-like while Digital Garden is personal and warm-toned |
| Japandi | Shares minimalist restraint and natural material references, but Japandi is cooler and more austere where Digital Garden embraces visible complexity |
| Wabi-Sabi | Both celebrate imperfection and organic growth, but Wabi-Sabi is rooted in Japanese aesthetics while Digital Garden draws from Western library and botanical traditions |
| Arts and Crafts | Shares the rejection of industrial uniformity and love of handmade quality; Arts and Crafts focuses on physical craft while Digital Garden applies similar values to digital knowledge work |
| Earth Tones | Shares the warm, natural color palette foundation; Earth Tones is a broader color movement while Digital Garden adds specific structural and navigational patterns on top |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Digital Garden</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ============================================
DIGITAL GARDEN - Quick-Start Template
============================================ */
/* --- Reset & Base --- */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dg-parchment: #FAF6F0;
--dg-white: #FFFFFF;
--dg-sage: #6B8F71;
--dg-fern: #3D6B4F;
--dg-soil: #5C4B3A;
--dg-bark: #3E2F23;
--dg-amber: #D4A853;
--dg-marigold: #E8C56D;
--dg-seedling: #A8D5A2;
--dg-budding: #8BA888;
--dg-rose: #C4A0A0;
--dg-fog: #B0A99F;
--dg-charcoal: #2C2C2C;
--dg-linen: #F0E8DA;
--dg-leaf: #4A7C59;
}
body {
font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
font-size: 1.125rem;
line-height: 1.85;
color: var(--dg-soil);
background-color: var(--dg-parchment);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--dg-fern);
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/* --- Navigation --- */
.nav {
background: rgba(250, 246, 240, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(176, 169, 159, 0.25);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
}
.nav-logo {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--dg-fern);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.nav-links {
display: flex;
gap: 4px;
list-style: none;
}
.nav-links a {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
color: var(--dg-soil);
padding: 8px 14px;
border-radius: 6px;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.active {
background: rgba(107, 143, 113, 0.1);
color: var(--dg-fern);
}
.search-btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
color: var(--dg-fog);
background: rgba(176, 169, 159, 0.12);
border: 1px solid rgba(176, 169, 159, 0.25);
border-radius: 8px;
padding: 6px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.search-btn:hover {
background: rgba(176, 169, 159, 0.2);
color: var(--dg-soil);
}
/* --- Hero --- */
.hero {
background: linear-gradient(175deg, var(--dg-parchment) 0%, var(--dg-linen) 60%, rgba(168, 213, 162, 0.1) 100%);
padding: 72px 40px 56px;
text-align: center;
}
.hero h1 {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 3rem;
font-weight: 500;
color: var(--dg-bark);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.hero .subtitle {
font-family: 'Lora', serif;
font-size: 1.15rem;
font-style: italic;
color: var(--dg-soil);
max-width: 520px;
margin: 0 auto;
line-height: 1.7;
opacity: 0.8;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 36px;
font-family: 'IBM Plex Sans', sans-serif;
}
.hero-stat {
text-align: center;
}
.hero-stat strong {
display: block;
font-size: 1.6rem;
font-weight: 600;
color: var(--dg-fern);
}
.hero-stat span {
font-size: 0.8rem;
color: var(--dg-fog);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* --- Main Layout --- */
.main-layout {
max-width: 1100px;
margin: 0 auto;
padding: 40px 32px;
display: grid;
grid-template-columns: 1fr 280px;
gap: 48px;
}
.content-area {
max-width: 720px;
}
.sidebar {
font-family: 'IBM Plex Sans', sans-serif;
}
/* --- Note Cards Grid --- */
.notes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.note-card {
background: var(--dg-white);
border: 1px solid rgba(107, 143, 113, 0.12);
border-radius: 12px;
padding: 24px 28px;
box-shadow: 0 1px 4px rgba(92, 75, 58, 0.05);
transition: box-shadow 0.25s ease, transform 0.25s ease;
text-decoration: none;
display: block;
color: inherit;
}
.note-card:hover {
box-shadow: 0 4px 16px rgba(92, 75, 58, 0.1);
transform: translateY(-2px);
}
.note-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.72rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.badge-seedling {
background: rgba(168, 213, 162, 0.2);
color: var(--dg-leaf);
}
.badge-budding {
background: rgba(139, 168, 136, 0.2);
color: var(--dg-fern);
}
.badge-evergreen {
background: rgba(107, 143, 113, 0.15);
color: var(--dg-fern);
}
.note-card h3 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--dg-bark);
margin-bottom: 8px;
line-height: 1.35;
}
.note-card p {
font-size: 0.9rem;
color: var(--dg-soil);
line-height: 1.65;
opacity: 0.85;
}
.note-card .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.tag {
background: rgba(107, 143, 113, 0.08);
color: var(--dg-sage);
padding: 2px 9px;
border-radius: 10px;
font-size: 0.72rem;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
}
.note-card .meta {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.75rem;
color: var(--dg-fog);
margin-top: 12px;
}
/* --- Single Note View --- */
.note-view {
margin-top: 40px;
}
.note-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(176, 169, 159, 0.2);
}
.note-header h2 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--dg-bark);
margin-bottom: 8px;
line-height: 1.3;
}
.note-header .note-meta {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.82rem;
color: var(--dg-fog);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.note-body p {
margin-bottom: 1.4em;
}
.note-body a.wikilink {
color: var(--dg-fern);
border-bottom: 1.5px dotted var(--dg-sage);
padding-bottom: 1px;
transition: border-color 0.15s ease;
}
.note-body a.wikilink:hover {
border-bottom-style: solid;
}
.note-body blockquote {
border-left: 3px solid var(--dg-amber);
background: rgba(212, 168, 83, 0.06);
padding: 16px 20px;
margin: 24px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
}
.note-body code {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.88em;
background: rgba(176, 169, 159, 0.12);
padding: 2px 6px;
border-radius: 4px;
color: var(--dg-bark);
}
.note-body pre {
background: var(--dg-charcoal);
color: #E8E0D4;
padding: 20px 24px;
border-radius: 10px;
overflow-x: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.88rem;
line-height: 1.6;
margin: 24px 0;
}
/* --- Callout --- */
.callout {
background: rgba(212, 168, 83, 0.07);
border-left: 3px solid var(--dg-amber);
border-radius: 0 10px 10px 0;
padding: 18px 22px;
margin: 24px 0;
}
.callout-label {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--dg-amber);
margin-bottom: 6px;
}
.callout p {
font-size: 0.95rem;
margin-bottom: 0;
}
/* --- Backlinks Panel --- */
.backlinks {
background: var(--dg-linen);
border-radius: 12px;
padding: 24px 28px;
margin-top: 48px;
border: 1px solid rgba(176, 169, 159, 0.18);
}
.backlinks h3 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dg-fog);
margin-bottom: 14px;
}
.backlink-item {
padding: 10px 0;
border-bottom: 1px solid rgba(176, 169, 159, 0.15);
}
.backlink-item:last-child {
border-bottom: none;
}
.backlink-item a {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
color: var(--dg-fern);
font-size: 0.92rem;
}
.backlink-item a:hover {
text-decoration: underline;
}
.backlink-item .excerpt {
font-size: 0.82rem;
color: var(--dg-fog);
margin-top: 3px;
line-height: 1.5;
}
/* --- Sidebar --- */
.sidebar-section {
margin-bottom: 32px;
}
.sidebar-section h4 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dg-fog);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(176, 169, 159, 0.2);
}
.sidebar-toc a {
display: block;
font-size: 0.88rem;
color: var(--dg-soil);
padding: 4px 0;
transition: color 0.15s ease;
}
.sidebar-toc a:hover {
color: var(--dg-fern);
}
.sidebar-toc a.active {
color: var(--dg-fern);
font-weight: 500;
}
.sidebar-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sidebar-tags .tag {
font-size: 0.78rem;
padding: 4px 11px;
cursor: pointer;
transition: background 0.15s ease;
}
.sidebar-tags .tag:hover {
background: rgba(107, 143, 113, 0.18);
}
/* Mini graph placeholder */
.mini-graph {
background: var(--dg-linen);
border: 1px solid rgba(176, 169, 159, 0.2);
border-radius: 10px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: var(--dg-fog);
font-size: 0.85rem;
}
/* --- Recently Tended --- */
.recent-list {
list-style: none;
}
.recent-list li {
padding: 8px 0;
border-bottom: 1px solid rgba(176, 169, 159, 0.12);
font-size: 0.88rem;
}
.recent-list li:last-child {
border-bottom: none;
}
.recent-list a {
color: var(--dg-soil);
}
.recent-list a:hover {
color: var(--dg-fern);
}
.recent-list .date {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
color: var(--dg-fog);
margin-left: 8px;
}
/* --- Buttons --- */
.btn {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
border: none;
border-radius: 8px;
padding: 10px 22px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: var(--dg-sage);
color: var(--dg-parchment);
box-shadow: 0 1px 3px rgba(61, 107, 79, 0.2);
}
.btn-primary:hover {
background: var(--dg-fern);
box-shadow: 0 2px 8px rgba(61, 107, 79, 0.3);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--dg-sage);
border: 1.5px solid var(--dg-sage);
}
.btn-secondary:hover {
background: rgba(107, 143, 113, 0.08);
}
/* --- Footer --- */
.footer {
text-align: center;
padding: 40px 32px;
margin-top: 48px;
border-top: 1px solid rgba(176, 169, 159, 0.2);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.82rem;
color: var(--dg-fog);
}
.footer a {
color: var(--dg-sage);
}
.footer a:hover {
text-decoration: underline;
}
/* --- Divider --- */
.section-divider {
text-align: center;
margin: 40px 0;
color: var(--dg-seedling);
font-size: 0.9rem;
letter-spacing: 0.4em;
opacity: 0.6;
}
/* --- Responsive --- */
@media (max-width: 900px) {
.main-layout {
grid-template-columns: 1fr;
padding: 24px 20px;
}
.sidebar {
order: -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.notes-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2.2rem;
}
.hero-stats {
gap: 24px;
}
.nav {
padding: 0 16px;
}
.nav-links {
display: none;
}
}
@media (max-width: 600px) {
.sidebar {
grid-template-columns: 1fr;
}
.hero {
padding: 48px 20px 40px;
}
.hero h1 {
font-size: 1.8rem;
}
.hero-stats {
flex-direction: column;
gap: 16px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<a href="#" class="nav-logo">
<span>🌱</span> My Digital Garden
</a>
<ul class="nav-links">
<li><a href="#" class="active">Garden</a></li>
<li><a href="#">Notes</a></li>
<li><a href="#">Topics</a></li>
<li><a href="#">Graph</a></li>
<li><a href="#">About</a></li>
</ul>
<button class="search-btn">
🔍 Search · <kbd>/</kbd>
</button>
</nav>
<!-- Hero Section -->
<header class="hero">
<h1>A Garden of Connected Ideas</h1>
<p class="subtitle">
A personal knowledge base where thoughts grow, branch, and intertwine
over time. Nothing here is finished; everything is evolving.
</p>
<div class="hero-stats">
<div class="hero-stat">
<strong>127</strong>
<span>Notes</span>
</div>
<div class="hero-stat">
<strong>384</strong>
<span>Connections</span>
</div>
<div class="hero-stat">
<strong>18</strong>
<span>Topics</span>
</div>
</div>
</header>
<!-- Main Content -->
<div class="main-layout">
<!-- Content Area -->
<main class="content-area">
<!-- Notes Grid -->
<section>
<div class="notes-grid">
<a href="#note" class="note-card">
<span class="note-badge badge-evergreen">🌲 Evergreen</span>
<h3>Evergreen Notes Should Be Atomic</h3>
<p>Each note captures a single concept, making it easier to form
connections across disparate topics and reuse ideas in new contexts.</p>
<div class="tags">
<span class="tag">note-taking</span>
<span class="tag">knowledge</span>
</div>
<div class="meta">Tended 2 days ago</div>
</a>
<a href="#note" class="note-card">
<span class="note-badge badge-budding">🌿 Budding</span>
<h3>Spaced Repetition and Long-Term Memory</h3>
<p>Exploring how systematic review intervals transform fleeting
encounters with information into durable understanding.</p>
<div class="tags">
<span class="tag">learning</span>
<span class="tag">memory</span>
</div>
<div class="meta">Tended 5 days ago</div>
</a>
<a href="#note" class="note-card">
<span class="note-badge badge-seedling">🌱 Seedling</span>
<h3>Tools Shape the Thoughts They Hold</h3>
<p>Early reflections on how the medium of note-taking influences
the structure and quality of the ideas we develop.</p>
<div class="tags">
<span class="tag">tools-for-thought</span>
</div>
<div class="meta">Planted 1 week ago</div>
</a>
<a href="#note" class="note-card">
<span class="note-badge badge-evergreen">🌲 Evergreen</span>
<h3>Writing as Thinking</h3>
<p>The act of writing is not merely recording what you already know;
it is a process of discovering what you think by articulating it.</p>
<div class="tags">
<span class="tag">writing</span>
<span class="tag">thinking</span>
</div>
<div class="meta">Tended 1 day ago</div>
</a>
</div>
</section>
<div class="section-divider">• • •</div>
<!-- Single Note View Example -->
<section class="note-view" id="note">
<div class="note-header">
<span class="note-badge badge-evergreen">🌲 Evergreen</span>
<h2>Evergreen Notes Should Be Atomic</h2>
<div class="note-meta">
<span>Planted: Jan 12, 2025</span>
<span>Last tended: Mar 2, 2026</span>
<span>843 words</span>
</div>
</div>
<div class="note-body">
<p>
The most effective evergreen notes are <strong>atomic</strong>: each note
captures exactly one idea, concept, or claim. This constraint is not a
limitation but a liberating structure. When notes are atomic, they become
composable building blocks that can be recombined in surprising ways.
</p>
<p>
Atomicity supports <a href="#" class="wikilink">dense linking</a> because
a tightly scoped note can be referenced from many different contexts without
ambiguity. If a note tries to cover three ideas, any link to it becomes
imprecise -- the reader cannot tell which of the three ideas is being referenced.
</p>
<div class="callout">
<div class="callout-label">💡 Key Insight</div>
<p>
Think of atomic notes like LEGO bricks. A single, well-shaped piece can
participate in hundreds of different structures. A fused, multi-purpose
piece is useful in exactly one.
</p>
</div>
<p>
This principle connects to the broader idea that
<a href="#" class="wikilink">writing is thinking</a>. The discipline of
expressing one idea per note forces clarity. If you cannot articulate the
note's core concept in a single title, the idea likely needs further
decomposition. See also
<a href="#" class="wikilink">spaced repetition and long-term memory</a>
for how atomicity aids review.
</p>
<p>
In practice, atomic notes range from a single paragraph to a few hundred
words. They have a clear title that functions as an <code>API</code> for
the idea -- other notes reference them by title, creating a web of meaning
that grows richer with each new connection.
</p>
<pre><code># Example note structure
---
title: Evergreen Notes Should Be Atomic
status: evergreen
planted: 2025-01-12
tended: 2026-03-02
tags: [note-taking, knowledge-management]
---
One idea per note. Composable. Linkable. Reusable.</code></pre>
</div>
<!-- Backlinks -->
<div class="backlinks">
<h3>🔗 4 Notes Link Here</h3>
<div class="backlink-item">
<a href="#">Writing as Thinking</a>
<p class="excerpt">"...the atomic structure of evergreen notes forces the kind of precision that transforms vague intuitions into clear claims..."</p>
</div>
<div class="backlink-item">
<a href="#">Tools Shape the Thoughts They Hold</a>
<p class="excerpt">"...tools that enforce atomicity, like Zettelkasten-inspired apps, nudge thinkers toward..."</p>
</div>
<div class="backlink-item">
<a href="#">Knowledge Graphs as Thinking Environments</a>
<p class="excerpt">"...atomic notes are the ideal node size for a knowledge graph because each node represents exactly one concept..."</p>
</div>
<div class="backlink-item">
<a href="#">The Collector's Fallacy</a>
<p class="excerpt">"...collecting sprawling notes creates the illusion of learning; atomic notes require genuine processing..."</p>
</div>
</div>
</section>
<div style="margin-top: 32px; display: flex; gap: 12px;">
<a href="#" class="btn btn-primary">Explore the Garden</a>
<a href="#" class="btn btn-secondary">View Graph</a>
</div>
</main>
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-section">
<h4>On This Page</h4>
<nav class="sidebar-toc">
<a href="#" class="active">Evergreen Notes Should Be Atomic</a>
<a href="#">Key Insight</a>
<a href="#">Note Structure Example</a>
<a href="#">Backlinks</a>
</nav>
</div>
<div class="sidebar-section">
<h4>Graph View</h4>
<div class="mini-graph">
Interactive graph
</div>
</div>
<div class="sidebar-section">
<h4>Topics</h4>
<div class="sidebar-tags">
<span class="tag">note-taking</span>
<span class="tag">knowledge</span>
<span class="tag">learning</span>
<span class="tag">writing</span>
<span class="tag">thinking</span>
<span class="tag">tools-for-thought</span>
<span class="tag">memory</span>
<span class="tag">creativity</span>
<span class="tag">reading</span>
</div>
</div>
<div class="sidebar-section">
<h4>Recently Tended</h4>
<ul class="recent-list">
<li>
<a href="#">Writing as Thinking</a>
<span class="date">Mar 3</span>
</li>
<li>
<a href="#">Evergreen Notes Should Be Atomic</a>
<span class="date">Mar 2</span>
</li>
<li>
<a href="#">Bi-Directional Links</a>
<span class="date">Feb 28</span>
</li>
<li>
<a href="#">The Collector's Fallacy</a>
<span class="date">Feb 25</span>
</li>
<li>
<a href="#">Spaced Repetition</a>
<span class="date">Feb 20</span>
</li>
</ul>
</div>
</aside>
</div>
<!-- Footer -->
<footer class="footer">
<p>
🌱 Tended with care ·
This garden grows in public ·
<a href="#">RSS</a> ·
<a href="#">Source</a> ·
<a href="#">About the Gardener</a>
</p>
<p style="margin-top: 8px; opacity: 0.7;">
Inspired by the digital gardening movement. Nothing here is finished.
</p>
</footer>
</body>
</html>
:root variables so the garden’s tone can be adjusted in one place; this also makes it trivial to offer a dark-mode variant by swapping variable values under a [data-theme="dark"] selectormouseenter and mouseleave listeners to .wikilink elements that fetch note excerpts (via a JSON index or data attributes) and display them in an absolutely positioned tooltip near the cursord3-force; keep node counts manageable (under 500) and use progressive disclosure to show labels only on hoverAlt+Left for back, / for search)font-display: swap, and prefer CSS-based decorative effects over image assets