Decibel Design System
When our 1100+ person software group was acquired out from IBM to become a standalone private equity backed company, we found ourselves in the position of needing to quickly and completely reestablish our identity in the marketplace.
After engaging with a branding agency we were handed a seven page creative brief that was effectively a set of logos, typefaces, and a handful of colors more appropriately sized for an individual marketing website rather than a complex portfolio of dozens of software products.
We quickly scaled this to an expansive offering comprised of Acoustic design principles, a foundational design language, brand guidelines, human interface guidelines, and a comprehensive set of atomic React-based components.
Audit & Align
After researching dozens of open source design systems I advocated for using the IBM Carbon Design system as a starting point. Carbon was extremely un-opinionated and therefore easy to build upon, had significant investment in its’ React library, and was truly open source in terms of our ability to own and extend. It also had a much smaller footprint than what we would need—particularly as it related to more complex organisms and page templates. Thorough documentation of what was missing vs. what was needed led to our first round of designs for our Atoms, Organisms, and flexible Page Templates.
Elements
Foundational elements like extended UI brand colors, type styles and tokens, UI icons, and a library of product illustrations.
Atoms
Organisms
Grid + Templates
Pages
Documentation & Assets
Complete design documentation lives on InVision’s Design System Manager site, React components live in Storbyook, and the Sketch Library lives in Abstract for version control and distribution.
