Building the foundation layer of Seeds
Role
Design lead partnered with design engineer lead
Scope
Define semantic tokens for Sprout's UI theme for both light and dark modes. Create Figma tooling in the form of Variables to be consumed by the design system components
Impact
System wide adoption enabling dark mode and product theme extensions
Source
Overview
UI theming was not aligned between design tooling and coded implementation. There was no single source of truth, theming logic existed in different places, so consistency depended on people remembering the right values rather than the system enforcing it.
Dark mode was not supported. Without a semantic layer connecting primitive color values to their role in the UI, supporting a second theme meant manually re-specifying color per component rather than swapping a mode.
Product branding had no framework. Sprout’s suite includes distinct product lines that each carry their own brand accent, but nothing in the token system accounted for multiple brand identities living on top of the same UI theme.
Starting with the primitive layer
I built out the Sprout Social color scale as primitive tokens in Figma variables — the raw palette, unopinionated about where or how it would be used.
Building the semantic layer on top
The semantic naming structure was derived from workshops with a number of engineers and designers from across the organization. Once aligned I built out the semantic token Figma variables and mapped them back to primitive tokens. This indirection is what makes theming possible: a semantic token can point to a different primitive value depending on mode, without touching any component.
Solving light and dark mode through the semantic layer
With semantic tokens as the interface between raw color and component, dark mode became a matter of defining an alternate mapping. Each semantic token pointing to a different literal value for dark mode, rather than a parallel design effort. The mode became a variable, not a fork of the system.
Connecting tokens to components
The point of this architecture wasn't a well-organized Figma file for its own sake, it was making sure design system components actually consumed these tokens. So that a designer using a Seeds component in Figma, and an engineer implementing it in code, were both working from the same source of truth.
Extending the model to product theming
The suite's distinct products needed their own navigation and brand identity while sharing the same underlying components. I set up an additional layer of semantic tokens specifically for navigation and product branding, so a component could stay identical in structure while its brand-facing color shifted per product.
Previous project
Navigation redesign
Next project
Seeds components