← Toolshed
Design system
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
- 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, and thematic arguments.
- Post sidebar The narrow sidebar on every post, showing linked-from backlinks, related posts, hub relationships, and suggested books.
- 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.
- View transitions How Astro's ViewTransitions component provides smooth page-to-page navigation and why dark mode state has to be re-applied on each swap.
- 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
- AI attribution box The styled aside shown at the top of posts to declare how much AI was involved in writing them.
- OG image generation How Open Graph images are generated at build time using satori and sharp, composited onto a watercolor background.
- Prose conventions The custom prose elements available in garden posts: blockquotes, observation blocks, tended notes, LinkedIn drafts, and the h6 paragraph header.