Design systems -collections of common components, colors, and other constants- are a key way to scale teams and web applications on the modern web. They're particularly handy for deduplicating frontend development costs for microfrontends and remote teams. But how do you create one from scratch -- or, much more commonly, in-flight from an existing service?
This hands-on talk will take you through three stages of crafting your design system:

Stage 1: Extracting colors, spacing, and typography from your existing brand. We’ll cover how slight variances in behavior are generally not intentional, and you want to deduplicate as much as possible.

Stage 2: Creating components following using the first stage’s designs. We’ll start with low-level atom components such as buttons and text, then work up towards forms and other larger conglomerations.

Stage 3: Documentation is critical! TypeScript provides in-IDE developer hints and can enforce proper usage, while Storybook scaffolds gloriously interactive docs pages.

By creating and using a design system, you'll both help and enforce your designers and developers are creating their most consistent work at shockingly reduced costs.