← Toolshed
Visual design
How this garden's interface works: the components, patterns, and decisions behind it. Each entry is a living document.
Foundation
Tokens, color, typography, spacing
- Color tokens The full color token system, light and dark mode values, and semantic usage rules.
- Dark mode How the theme toggle works, how flash of wrong theme is prevented, and the token switching strategy.
- Spacing and typography The spacing scale, font stack, heading sizes, and label/meta typography conventions used across every component.
Layout
Page structure, grids, scrolling
- Homepage stream How the homepage feed is built, filtered, and displayed, including pinning, exclusion rules, and the sidebar.
- One page, one scrollbar Two-column layouts use a single native scrollbar. No sticky sidebars, no overflow on columns.
- Post layout with sidebar The two-column grid used on every post: a fluid article column next to a fixed 14rem sidebar.
Components
Reusable visual building blocks
- AI attribution box The styled aside shown at the top of posts to declare how much AI was involved in writing them.
- Chat panel The Ask drawer for grounded conversation with the garden. One panel, two bots (a per-page chat bot and a RAG ask bot), switched via a mode toggle. Plus contextual follow-up chips and a system-prompt picker.
- Collection icons How each collection gets its own hand-drawn SVG icon, where they come from, and how CSS filter tinting keeps assets minimal.
- Folder-tab panels The panel pattern with a protruding label tab used for filter sidebars, toolshed panels, and any grouped content block.
- Index card (mosaic card) The signature card pattern used in the stream, library, and kanban. White card, colored bookmark strip, ruled meta bar, and a double-line separator.
- Maturity track The visual progress indicator showing where a post sits in the draft-to-complete lifecycle, using plant growth as a metaphor.
- Mycelium section The collapsible post footer drawer that surfaces tags, semantic triples, thematic arguments, and open questions.
- Post sidebar The narrow sidebar on every post, showing linked-from backlinks, related posts, hub relationships, and suggested books.
- Reading font picker A small Aa control in the header lets visitors swap the body font between Nunito (default), Mulish, Atkinson Hyperlegible, and Roboto.
- Sketchy filter (hand-drawn aesthetic) The SVG feTurbulence filter that gives collection icons their hand-drawn, organic wobble.
- Tag pills Capsule-shaped tag links used in the Mycelium section footer and as filter checkboxes in the sidebar.
Interactive controls
Buttons, filters, pagination, navigation
- Header mega menu The dropdown navigation pattern used for The Garden and Toolshed top-level entries, with collection grids and icon links.
- Mobile filter bar When a page has a desktop filter sidebar, mobile gets a compact toggle button and collapsible panel instead.
- Mobile header and nav drawer How the header collapses into a hamburger menu on mobile, and the design principles for the nav drawer layout.
- Pagination for long lists Long lists use pagination, not infinite scroll. Same mechanism as the homepage stream.
- Pill bar A segmented control for mutually exclusive options: sort order, view mode, any pick-one group.
- Wiki link hover preview Hovering an internal wiki link shows a small popup with the target post's title and description, without navigating away.
Content
Prose, post formatting, attribution
Mockups
- Acorn watercolor test Three-tile background test for the watercolor acorn illustration: white, moss, and dark.
- Card excerpt preview Side-by-side preview comparing the current card description with a proposed three-line excerpt plus read-more link.
- Chip placement mockup Comparison of where Wander chips could live: in-stream (current), in a toolbar popover, in a side rail, or in a band above the composer.
- Earth-tone palette variants Side-by-side preview of candidate earth-tone palettes (terracotta accent, earth-green accent) in light and dark mode, used to pick the May 2026 site palette.
- Meta line preview Two options for the post header meta line: all metadata items as labelled pills, versus inline labels separated by dots.
- Status strip designs Three patterns for showing review status (pending, done, skipped) on a list of cards: thick left border, tinted background, or status dot.
- Workflow analysis tool Interactive tool for mapping a workflow into ordered steps with an owner per step (Claude, Maaike, both), then visualising it as a swimlane diagram.