2020—Present
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
CONTENTS
Impact
Methods of use
History
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