SPROUT · DESIGN LIBRARY

One front door for everything Sprout.

Every design asset the project has — the brand and voice, the system and its tokens, the living mark and its motion, go-to-market, merch, the decisions of record, and the public GitHub surfaces. Each card opens the real thing.

Every active design asset, across nine shelves, top to bottom in the order a newcomer meets them — who Sprout is, then how it's built. All to one standard — one voice, one palette, one living character. New here? Start at the top; it's all aligned via the consistency pass. Tend well.

Brand & identity

start here · who Sprout is

START HERE

Quiet care for living things

Sprout Brand Identity.dc.html · v1

The first articulation of the brand's personality, voice, and visual identity — framed to share, publish, or drop in a portfolio. Start here for the high-level "who Sprout is" story; it suits decks, about pages, and external intros. Skim it for the narrative — the binding rules live next door in the Brand Guidelines.

CANONICAL

The brand is a plant that finally has a voice

Sprout Brand Guidelines.dc.html · v1 · ADR-0007

The canonical, locked brand reference: voice do/don'ts, the living mark and its motion states, the seven-band mood system, and the character↔instrument boundary. This is the one to build to whenever you write copy or place Sprout — it governs every plant-facing surface. Follow it directly; it's the decision of record (ADR-0007), with the others as background.

BRAND

One plant, one voice, one little world

Sprout - Brand World.dc.html

The expansive brand world: the hero, the four-beat story, Sprout's voice across surfaces, applications, and the sticker/merch system. Use it when you need the full creative universe — campaigns, launch storytelling, merch — and it feeds social, GitHub, and any narrative surface. Browse it for tone and applications; pull specific rules from the Brand Guidelines.

Voice & personality

how Sprout speaks

VOICE

The plant is the story

Sprout - Plant POV.dc.html

The winning direction pushed further: Sprout narrating in first person, the living mark front and centre. Start here for the "plant speaks for itself" voice and hero treatment; it informs in-app hero states, social, and onboarding. Look to it for tone and staging, and pair it with Day in the Life for motion.

PRODUCT LAYER

The personality layer

Sprout v3 Personality Layer.dc.html · v3.0.0 · ADR-0008

The accepted, additive layer that brings the character onto the product — the mood↔band map, the drop-in mark component, voice strings, and the refined soil mode. Use it when wiring Sprout into the dashboard or any product surface; Data consumes its files and firmware needs no change. Adopt per its incorporation note — it layers on, never restyling the instrument (ADR-0008).

COMPONENT

sprout-mark — the living mark, in code

sprout-mark-demo.html · v3 component

A live demo of the <sprout-mark> custom element — the seven band states, each posed and colored by the calibrated band. Use it to see the real component run before wiring it in, and as the copy-paste API reference (band / mood / size / static). It ships in the v3 personality layer; drop it on hero, empty, and loading surfaces — never inside dense readouts.

EXPLORATION · HISTORY

Shortlist, narrowing as we go

Sprout Personality Directions.dc.html

The five personality directions that were explored, with the winner (Plant's POV) and why each other was cut. Read it last, for the why behind the voice — and to avoid drifting back into a rejected frame; it's an exploration/history artifact, not a live rule. The chosen direction is codified in the Brand Guidelines.

Foundations

the standard & the system

THE STANDARD

One Sprout, everywhere

Sprout Brand Consistency Pass.dc.html · changelog

The system-wide alignment pass and the canon in one place — the single standard for voice, color, the mark, type, and character, plus the changelog of every v3 soil-mode fix and how to apply it. Open it whenever “on-brand” is in question; it's the tiebreaker, and it teaches the how by example. The superseded generations are distilled in _archive/roads-not-taken.md; the original bytes live in Git history.

REVIEW

Read against the contract

Sprout Capture Panel Review.dc.html · #101

The Experiment Capture panel read line-by-line against sprout-tokens.css — a before/after and six small, in-system fixes (atom pills, action hierarchy, status-as-state, baseline alignment), each naming the token it should already honor. Open it when the panel uses the tokens but doesn't yet speak them; the liftable CSS is paste-ready for the dashboard.

PRODUCT SURFACE

Capture as one calm surface

Sprout Experiment Capture.dc.html · #335 epic · #323 · #324 · #325 · #334 · #327 · #336 · #326

The design-pass for the unified capture flow — Plan → Capture → Notes as one lab instrument, not three cards. Serial-by-default with confirm-to-stop and an isolated experiments/<id>/ that never touches the living log (#323); live per-probe channel cards (#334); a raw-ADC trace with band zones and raw-unit stats — no calibrated %, ever (#325); tiered provenance showing what's stamped today and rendering not-yet fields as — unavailable · #ref (#324); and a Hypothesis / Method / Findings / Conclusion notes layer that interprets without ever editing the raw, autosaved (#327). Closing the epic: an agent-drafted plan you review before arming (#326), operator-set per-probe labels that ride the channel cards, legend and saved readings (R1), a bounded duration that auto-stops the run even if the browser closes (R3), and subject-as-human-note with a derived machine id and field guards (#336). The design-pass that unblocks Data to build the slices.

PRODUCT SURFACE

Every Sprout, one glance

Sprout Multi-Device Dashboard.dc.html · #486 · #485 registry · ADR-0020

Per-device card grouping for the host dashboard, live now that the second Sprout is real (the S3 bring-up). The device is the fence: each group owns its own connection state, time source, and calibration status — the calibrated windowsill rig and the unwired, provisional-cal S3 side by side without one coloring the other. Single device? The chrome collapses to today's dashboard. With a simulator: take the S3 offline, or remove it.

CONCEPT SKETCH

v0.9.0 ahead of need — watering, tank & optionality

Sprout v090 Watering Concepts.dc.html · #597 · ADR-0016 · ADR-0022 · ADR-0028

Direction for the pumps wave, sketched while v0.8.0 builds: the watering loop on the plant card (with the silent-failure alert as the loudest state), the one-human-touch approval moment, modeled-vs-measured tank grammar (a derived number never dresses as a measurement), the never-a-nag refill voice, and the minimum rig rendered first-class. Iterated at v0.9.0 grooming.

PRODUCT SURFACE

Can you trust your sensor?

Sprout Trust Your Sensor.dc.html · #912 · SENSOR_QA

A three-minute board check before Sprout ever reads the number: a cheap capacitive sensor can be wrong before the software sees it, and a large share ship with a known functional flaw. Your eyes, a multimeter, and five annotated board photos tell you whether yours is the well-made kind — in Sprout's voice: "I can only be as good as the sensor I'm reading." The out-of-box trust surface.

PRODUCT SURFACE

The untethered states

Sprout Untethered States.dc.html · #279 · PRD-0005 R8 · ADR-0018

Offline / online / syncing for a Sprout with nothing tethered but power — drawn against the real served status (GET /, #532), with a pull-the-plug simulator. State lives in a chip + one voice line, never in the numbers; quality gates the band; "last heard" is the viewer's clock; sync progress is the store's claim, drawn transport-agnostic. Hardens the exploration's sketch into the buildable spec.

PRODUCT SURFACE

The experiment lab notebook

Sprout Lab Notebook.dc.html · #156 · PRD-0004

The token-faithful Lab Notebook UX — a catalog of every capture, load-for-analysis detail (trajectory + per-probe stats + the manifest facts), the Hypothesis / Method / Findings / Conclusion living log, and studies that group captures into one finding. This is the visual system the Data lane builds the #154 catalog and the later slices against — plain by default: raw + band, never a bare %, notes a clearly-marked interpretation layer that never edits the capture.

STANDARD

Series color from the band ramp

Sprout Chart Palette.dc.html · #203 · #99

The sanctioned categorical series palette for multi-probe charts — drawn from the band ramp so the dashboard reads as one palette instead of generic blues and purples. Paste-ready SENSOR_COLORS for dashboard.py / dashboard_template.html, plus the guardrails — fault-red stays reserved, a series color is the probe's identity not its band, overflow uses a dash pattern. Hand to Data for the swap.

STANDARD

Where a plant lived, and how it moved

Sprout Band-Lane Visual Language.dc.html · #625 · PRD-0007

The visual language for the range & movement band-lane view — the live counterpart to the calibration ladder, on the same seven --band-* lanes. Rules the marker set (now dot, provisional ring, from-triangle, reach diamond, dotted connector), the evidence-weighted band-span whisker over raw min–max, the discrete movement connector that never fabricates continuity, the window selector vocabulary, and the calm-empty / excluded / NO_SIGNAL states — no unearned mark on the air-dry lane. Design rules the language; Data builds the live view against it.

RULING

The chip reads the band

Sprout Band-Chip Vocabulary.dc.html · Item 1

Supersedes the mood-word ruling and completes it. Rules all three chip problems: the reconciled 7-row fw ↔ band ↔ mood word list bound to mood-band-map.json (retiring Drowning / Soggy / Critical); a unified chip grammar across surfaces (summary = band · mood; instrument readout = fw · band, no mood, per the §6 boundary); and one-line fixes for the two word collisions (SATURATED→RAILED; keep Parched/parched disambiguated by rule). Reuse-only — no new tokens.

FOUNDATIONS

A system for tending things that grow

Sprout Design System.dc.html · v1

The full design system — every token, the instrument component set, and both in-context dashboards (light + soil). Reach for it whenever you're building or extending a data surface and need the authoritative spec; it governs the dashboard, analytics, and any served UI. Read it top to bottom, then lift values from sprout-tokens.css and rebuild components in your stack to match.

standalone · no runtime print / PDF

EXPLORATION · HISTORY

Tend a tiny jungle

Plant Design System.dc.html · direction A

An early visual direction — lush, botanical, playful, with organic blobs and a saturated garden palette. Read it as historical reference for how the look was chosen, not as a live dependency; it lives in the exploration archive. The system that actually shipped is the Sprout Design System above.

Tokens, code & components

the building blocks

TOKENS

The tokens — one source of truth

sprout-tokens.css · ADR-0004

Every color, type role, space step, radius, and elevation as CSS custom properties — light and the refined soil (dark) mode, plus the seven --band-* meaning colors. Consume these; never redefine them. This is the file every other surface inherits from.

COMPONENT

<sprout-mark> — the living mark, in code

components/sprout-mark.js · component

The drop-in custom element — vanilla, framework-agnostic, reduced-motion aware. Pass a band and it poses and colors itself. This is the source; the live seven-state demo shows it running.

MOTION

The motion vocabulary

components/sprout-motion.css

Sway, breathe, droop, and bob keyframes for hand-rolled marks — for surfaces that draw their own Sprout instead of using the component. Apply a class to the foliage group; it honors reduced-motion. Same motion language as the component.

The mood↔band map

components/mood-band-map.json · canonical

The 1:1 mapping from each of the seven calibrated bands to a mood — the single source of truth Data reads to turn a reading into a feeling. Mood follows the band, never the 0–100 index. This is the reading rule, as data.

“I'm a little thirsty — no rush.”

VOICE

The voice-string pool

components/voice-strings.json

First-person lines keyed by mood and by surface — fault, empty, onboarding, notification. Pick one that fits the band; never invent a number. The written half of Sprout's voice, ready to wire into any product surface.

Motion & character

the mark, alive

REPO HOME

The repo home, alive — dawn to dusk

Sprout Welcome.dc.html · repo hero

A self-running day-in-the-life built as the repository's front door — waking at dawn, a passing rain, the midday sun, dusk, and sleep, with the precise instrument reading the soil right beside the plant. Use it as the animated hero on the README: capture it as a looping GIF or short video, or link this live page. Mood follows the calibrated band (never a number), it honors reduced-motion, and an occasional companion bloom rewards anyone who lingers.

MOTION

Dawn to dusk, on a loop

Sprout Day in the Life.dc.html

A compressed day-cycle of Sprout — waking, soaking up sun, drinking, sleeping — the motion engine behind reels and pitches. Use it for video, presentations, and any storytelling that needs the character alive over time; it powers social clips and deck moments. Scrub to a beat, set the duration, and export the frame.

CHARACTER

The character, alive

Sprout - On Stage.dc.html

A full animated character scene — Sprout living through moods and moments on a staged backdrop. Use it as the showcase of the character's range and personality; it suits hero moments, launch pages, and demos. Watch it to feel the character, then pull specific poses into the mark and loader system.

MOTION

The mark, animated

Sprout Loader.dc.html

The loading states: the seedling grows, breathes, and spins while the soil is read, in light and soil variants. Use it any time a surface needs a branded wait or splash — app launch, data refresh, empty/loading screens. Drop in the matching variant; all motion honors reduced-motion.

Go-to-market

taking it public

DECK

Tend a tiny jungle — the pitch

Sprout Deck.dc.html

The product introduction deck — what Sprout is and why, in the brand's voice, ready to present. See it first to grasp the story; it fits investor, portfolio, and team intros. Present it as-is or lift individual slides — print/export variants exist alongside it.

print / PDF

TEMPLATE

A pitch-deck template

Sprout Deck Template.dc.html · 10 layouts

A reusable, branded slide template for any Sprout presentation — ten master layouts (title, agenda, section, content, stat, two-column, image, quote, data, closing). Use it as the starting point for your own pitch decks and talks: duplicate it and swap the placeholder copy. It presents full-screen, prints to PDF, and exports to editable PowerPoint.

PowerPoint .pptx

SOCIAL

Social starter kit

Sprout Social Kit.dc.html

The social starter kit: a GitHub page, LinkedIn-ready posts, and a generic asset set, with the copy already written. Use it when launching or sharing the project publicly; it feeds the repo README, social posts, and announcements. Swap in the final name and post — the Phase 3 GitHub package builds directly on it.

Merch & swag

stickers, magnets, patches

MERCH

Stickers, magnets & patches

Sprout Merch Library.dc.html · 4 sets

Production-ready merch built on the living mark — two sticker sets, a magnet set, and a patch set, each at least 40% its own. Use it to brief a print shop or choose a giveaway; every piece carries its size, cut, and finish, mapped to who it's for (contributors, supporters, kids, promo). Pair it with the production spec for the full vendor handoff.

production spec →

PRINT SPEC

Sending Sprout to the print shop

Sprout Merch Production Spec.dc.html

The vendor-facing production guide: file prep, CMYK + Pantone bridges, and the size/cut/finish/thread limits each process imposes — plus how we put the merch to work (contributor rewards, supporter packs, kids, promo). Read it before sending art to a printer; approve a proof, then run.

Docs & decisions

the written record

Design system overview

README.md

The v1 system in prose — what it is, the non-negotiable principles, and how the pieces fit.

Brand guide — the written reference

brand/BRAND.md

The canonical text: voice rules, the mark, the mood system, the boundary. The visual guide's source of record.

ADR

The design system & token contract

docs/adr/0004-design-system.md

Decision of record: tokens are the one source of truth, and who owns what. The contract everything consumes.

ADR

Brand & voice guidelines

docs/adr/0007-brand-guidelines.md

Decision of record: the voice, the living mark, the seven-band moods, the character↔instrument boundary.

ADR

The v3 personality layer

docs/adr/0008-…-personality-layer.md

Decision of record: the additive character layer and the one soil-mode token refinement, ratified.

ADR

The Library is the front door

docs/adr/0010-design-library-front-door.md

Decision of record: the Library is the single front door; supersede-never-delete; and consistency is a gate inside the verification gate.

How the pages run

runtime/RUNTIME.md

The runtime behind every .dc.html page here — how they boot, stream, and the per-folder support.js rule.

Adopting v3

components/INCORPORATION.md

The step-by-step for wiring the personality layer into the product — what each lane consumes, and in what order.

Community & GitHub

the public face

The repository's front page

README.md

The README that greets every visitor — hero, first-person intro, the reading principles, brand links.

How to contribute

.github/CONTRIBUTING.md

The welcome and the one clean path from idea to merge — warm, plain, and kind. Voiced in the batch-2 pass.

Issue forms

.github/ISSUE_TEMPLATE/ · bug · feature · task

The three voiced issue templates that greet anyone filing — inviting, not bureaucratic.

Pull request template

.github/PULL_REQUEST_TEMPLATE.md

The framing that carries a change through the verification gate — "thanks for tending Sprout."

Discussions — categories & welcome

community/discussions.md

The voiced Discussions tab — category copy and the in-character welcome post (the one public first-person greeting).

Release-notes voice

community/release-notes-voice.md

How releases speak — the template and tone for turning merged PRs into notes that sound like Sprout.

tend well.

one voice · one palette · one living character