Design Aesthetic Reference
A warm, contemplative web aesthetic rooted in personal knowledge management, interconnected notes, and the organic cultivation of ideas over time.
Typography
readable serifs, clean sans-serifs, and honest monospace
Display / Cormorant Garamond
Cultivate Ideas
Heading / IBM Plex Sans
Connected Knowledge
Body / Lora
Warm serif text designed for sustained, comfortable reading of dense, idea-rich content. Each note is a living plant.
Body Italic / Lora
Ideas grow through connection and continuous tending, not through a single flash of insight.
Code / IBM Plex Mono
[[wikilink]] — backlinks — graph-view
Metadata / IBM Plex Sans
IBM Plex Sans + Lora
Scholarly but modern; clear hierarchy for navigation and reading
Cormorant Garamond + Lora
Classic literary garden; elegant and deeply bookish
Lora 700 + Lora 400
Single-family harmony; cohesive and understated
Color Palette
warm soil tones, leafy greens, and amber desk-lamp glow
Components
cultivating ideas through seedling, budding, and evergreen stages
A systematic approach to personal knowledge management using atomic, densely linked notes that build understanding over decades of sustained practice.
When note A links to note B, note B automatically knows about note A. This creates an emergent web of connections that mirrors how ideas relate in your mind.
Combining digital garden principles with spaced repetition to create a system where revisiting and refining notes follows cognitive science patterns.
The practice of learning and creating in public, sharing unfinished work, and letting others see your thinking process as it evolves and matures over time.
Force-directed layouts, radial trees, and node clustering techniques for rendering the interconnected web of a personal knowledge graph effectively.
Embedding fragments of one note inside another without duplication, allowing the same atomic idea to appear in multiple contexts while remaining a single source of truth.
Visual Effects
warm, tactile effects built entirely with CSS
SVG noise filter creates a subtle parchment texture reminiscent of aged notebook pages.
SVG force-directed node graph visualizes connections between notes in the garden.
Layered radial gradients in garden greens create a living, organic background feeling.
Subtle grid lines with dotted-underline link styling evoke interconnected note references.
Left border accent with warm amber glow creates a highlighted aside or annotation block.
Dark charcoal background with faint horizontal rules for displaying code snippets and metadata.
Interactive Elements
gentle, purposeful interactions that invite exploration
A garden is something that grows, changes, and evolves. It is never finished. The gardener tends, prunes, connects, and cultivates — knowing that the beauty lies not in completion, but in the ongoing act of care.— The Philosophy of Digital Gardens
plant seeds, cultivate connections, grow knowledge
The Digital Garden aesthetic embraces warm earthy tones, readable serif typography, dense internal linking, and visible growth indicators. Every note is a living document, continuously refined through the quiet practice of intellectual gardening.
Back to the Garden