← Visual design
toolshed

Maturity track

The visual progress indicator showing where a post sits in the draft-to-complete lifecycle, using plant growth as a metaphor.

Every post in the garden has a maturity stage. The maturity track visualizes this as a horizontal progression from seedling to tree.

The four stages

EmojiKeyLabelMeaning
🌱draftSeedlingRaw idea, barely formed
🌿developingSproutTaking shape, still evolving
🪴solidPlantStable, could publish
🌳completeTreeDone, no further tending expected

Visual design

The track is a horizontal flex row of emoji + connector lines. Unreached stages are dim (opacity 0.25). The current stage is larger (1.5rem vs 1.25rem). Reached stages are full opacity.

.maturity-track {
  display: flex;
  align-items: center;
  gap: 0;
}

.maturity-step {
  font-size: 1.25rem;
  opacity: 0.25;
}
.maturity-step.reached { opacity: 1; }
.maturity-step.current { font-size: 1.5rem; }

.maturity-line {
  width: 2rem;
  height: 2px;
  background: var(--color-border);
}
.maturity-line.filled {
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-2));
  opacity: 0.6;
}

In the post header

The track appears in the post header below the title. It’s interactive: hovering a stage shows its label. Clicking a stage has no effect — it’s display-only.

In stream cards

The maturity emoji appears in the top meta bar of every index card, alongside the AI label. Just the emoji, no label — it’s a quick visual signal, not a detailed description.

Frontmatter

maturity: solid   # draft | developing | solid | complete

Draft posts with draft: true are excluded from all collections at build time. A post with maturity: draft but draft: false is visible — it just signals the content is early-stage.

Why plant metaphors

The garden is built around growth as a metaphor for ideas. Posts aren’t “published” or “unpublished” — they’re at different stages of development. The plant scale makes this concrete without requiring explanation. A 🌱 is obviously less developed than a 🌳.

Mycelium tags, relations & arguments