This document compares the design systems manager tools Zeroheight and Supernova. It discusses the current implementation status of Storybook, Zeroheight, and Supernova, and the need to centralize and streamline design system documentation. The decision is leaning towards Supernova, but simpler options are being explored. The consequences of the decision include centralizing documentation, minimizing duplicate work, and updating the lifecycle process. Alternatives considered include Luro and Figmayo. The pros and cons of Zeroheight and Supernova are outlined, along with their pricing details.

Current Implementation Status

Storybook

• It has been fully implemented, and we recently finished migrating Styleguidist to SB 🎉
• Added some level of branding to the SB site, proving that it is a possibility
• We’ve included some level of guidelines (beyond just API docs) for some components.

Zeroheight

• N/A

Supernova

• N/A

Context

The Wonder Blocks team previously used Webflow to build a custom guidelines/style guide site for our final “source of truth.” It was primarily maintained and created by the MPP team. It gave them the flexibility to create a personalized/branded look and feel but lacked focused tooling and features for design systems (including not having a responsive layout). Additionally, rich content, imagery, etc., was static and not connected to anything living, like Figma. Thus adding additional tech debt and maintenance.

Later, the WB team decided to start using Storybook ↗. This has proved successful but doesn’t allow non-technical folks to contribute easily. This includes making stylistic changes to make it look/feel like Wonder Blocks/Khan Academy. (Noted in the Storybook Pros/Cons below). There’s also not a decent implementation of Storybook for Mobile (React-native), thus making it more challenging to include docs for the Mobile-app.

As a temporary solution for Design-specific guidelines that are easy to access and create, the team (with Reony) decided to use the Figma library file to document some guidelines for each component. For example, see the Links component guidelines ↗ in Figma.

With all that said, there’s a clear need to centralize and streamline all of this effort and content.

Decision ✅

(TBD...)