We started off building the best versions of the most essential components in our UI (e.g. buttons, alerts, icons). We collaborated with developers and product managers of current UI libraries, accessibility experts, and, of course, our Design System designers to produce a universal standard for Workday. For some components, we were able to use existing code as a starting point and a benchmark. We were a small, nimble team for a while, owning everything from component development to builds to developer advocacy.

The Checklist

• Is the design pixel perfect? If not, what are the constraints?

• Has the code been documented?

• Has the code been evaluated by accessibility experts?

• Are the components composable in a way that can work for the majority of our consumers?

Necessity drives innovation.

Along the way, we pioneered the usage of new tools at Workday including Lerna and Storybook.

Lerna

To provide developers with flexibility and neatly encapsulate code, we decided the best way to organize Canvas Kit was through a monorepo. We were one of the largest users of Lerna at the time and later on served as subject matter expert on monorepos.

Storybook

We landed on Storybook as a tool to both document and demo our CSS and React components. We loved the tools Storybook and its ecosystem provided and the Canvas Kit developer experience was greatly improved and streamlined.

But building a design system is about more than just building components...

Long term, it's about building a community of not only consumers and experts but engaged contributors. Clearly our small team of 6 couldn't be responsible for all of Workday's UI. To scale, we needed Canvas Kit to be an evolving set of components and standards informed by the needs of our ever growing user base. As Workday was rolling out its Extend product, the crucial decision was made to open source Canvas Kit to provide visibility to Canvas, invite more contributions, and establish a transparent process for our development.

The Legacy