Seeds

Sprout Social's system, Seeds, built for the multi-channel social-media management tools its marketers work in all day.

Why we like it

Seeds has the most product-shaped token architecture on this list. Its tokens are split into eight independently versioned packages, color, typography, space, border, motion, depth, data-viz and more, so a team can update one category on its own cadence without a color change forcing a typography bump.

One of those packages, Network Color, encodes each social platform's brand hues as first-class tokens, exactly the kind of thing you'd only invent living inside a social-management product, and it can change on its own schedule when a platform rebrands. Tokens output to CSS, SCSS, JS, Android and iOS, and the component library, Racine, is published to npm.

Where it fits

Seeds fits product teams building a React web app who want tokens usable across web and native, and the Network Color idea suits anything that surfaces third-party brands.

One note: the tokens and Racine are published on npm, but we couldn't find a public open-source source repo, so treat it as publicly available rather than open source.

Ideas to borrow

  1. 01.

    Token architecture

    Break tokens into independently versioned packages by category, so consumers upgrade one concern at a time instead of swallowing an all-or-nothing release.

  2. 02.

    Token architecture

    Model volatile third-party brand values, each network's hues, as their own first-class token package, so they version and change on their own cadence.

Screenshots

Fig. 1Seeds' design tokens page, where Color (v2.5.0) and Network color (v2.22.0) sit side by side as separately versioned npm packages, each with its own install command and CSS, SCSS, JS, XML and iOS outputs.
Fig. 2The Network palette in Seeds' color reference, giving each social platform's brand hue, from X and Facebook to Bluesky, LinkedIn and Snapchat, its own token next to the core ramps such as Magenta.
Fig. 3Seeds' chart color rotation, a fixed order of data viz tokens from Teal 500 through Purple 700 and Pink 700 that charts apply series by series so neighboring data stays easy to tell apart.

Further reading

Related