Design System Starter Kit is a library of lightly styled foundations, components, and patterns to kickstart or supplement design system projects. It’s the ongoing, collaborative distillation of agency, freelance, and personal design work.

Live Preview



Methods of use


Live embed

Who used this project?

This library was used by myself and other designers in design systems and projects for the following agency clients:

  • GoSite

  • [Redacted], company in the health sector

  • Yotta

  • Hyperwrite

  • Neon

How was this project used

Design System Starter Kit something

  • It has been used as a starting template

  • A la carte supplementation. Pulling in components and styles as needed to new current projects

  • Used to “front-run” project needs. e.g. "We’re going to need some to edit rich text for this feature, so let’s spend some discretionary

Project history

Design System Starter Kit has undergone four stages.

Stage 1

I was dissatisfied with

  • Forking previous clients

  • Currently available design systems

It began as a personal library and pandemic in early 2020.

Stage 2

After a new months work I shared some of the results and received partial funding from my employer, webuild.io. The project was eventually fully subsidized by webuild.

Stage 3

After being successfully deployed in several client projects, DSSK became a higher priority at the webuild and was adopted as an official internal project. More people were brought onto the project including designers and a producer for project management.

With more contributors onboard, my focus then shifted to

  • Providing higher lever direction and steering.

  • Running design reviews with contributors.

  • Working on more difficult, longer term project areas.

  • Conducting design system interviews with key designers from each client project to better understand design system use across the agency.

Project Impact

Design System Starter Kit became the central repository for successful patterns at webuild. It became a common language and library across clients. Every project benefitted from every other project.

Sister project

Design System Starter Kit is a collection of building blocks. Figma Scripting & Plugin Playground is a collection of small tools to manipulate building blocks.

Design System Starter Kit is to nouns as Figma Scripting Playground is to verbs