Design reference 18 · Workspaces & discovery
Knowledge Garden
Encourage exploration through connected ideas while showing where each piece belongs.
Download design ZIP · Open interactive specimen
Design specification
Philosophy and fit. Encourage exploration through connected ideas while showing where each piece belongs. Suitable for personal knowledge bases, wikis, research notes, and living project documentation.
Visual grammar. Use a readable central note, a compact topic tree, and a contextual rail for backlinks and related concepts. Soft grey-green surfaces, dark green-black text, compact sans-serif headings, and a clear sans body create a cultivated, practical tone. The interface distinguishes a note's hierarchy from its cross-links; a small trail records the current route through the collection.
Specimen and flow. *The Small Systems Garden* contains fictional notes on everyday design. Visitors open a concept, follow a contextual link, and inspect notes that link back to it. Supporting views show a topic overview and a local search result with matched passages.
Adaptation and identity. Mobile moves the tree and backlinks into clearly labelled sections. Preserve readable notes, meaningful connections, and stable URLs; avoid graph visualisations as compulsory navigation, unexplained tags, and decorative pseudo-botanical clutter. Effort: medium.
Distinctive composition. A compact sans-serif note workspace separates the topic tree, developing-note metadata, reading surface, and coloured backlink panels. This gives Knowledge Garden an editable, connected character distinct from the book-like Scholarly Folio.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.