> Canonical URL: https://codingcat.dev/podcast/2-25-building-maintaining-design-systems

# Building & Maintaining Design Systems

![](https://cdn.sanity.io/images/hfh83o0w/production/1c30255287eb5e57cef6c748fc2e1c94d1fc77a3-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/images/hfh83o0w/production/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Michael Chan](https://cdn.sanity.io/images/hfh83o0w/production/6550c4bb327bfb8707731c726bf6ba54bc2cbb30-400x400.png?w=96&h=96&q=82&fit=max&auto=format)Michael Chan](/guest/michael-chan)June 1, 2022

## Listening Options

[Spotify](https://open.spotify.com/episode/2S3qZfcaZStAfdItj3z2uQ)[Apple](https://podcasts.apple.com/us/podcast/2-25-building-maintaining-design-systems/id1491655542?i=1000566586619)[YouTube](https://www.youtube.com/watch?v=9yDPv1LGVZo)[Pocket Casts](https://pca.st/episode/eacf525b-74c0-4043-a6e1-99a626264633)[Castbox](https://castbox.fm/episode/id2508485-id505154135)[Castro](https://castro.fm/episode/lrhRzW)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Sponsors

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/e355e7e90e37726637596011069c154ae515da9f-1200x675.png?w=1200&q=82&fit=max&auto=format)

### Builder.io

Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-team autonomy with a platform that is developer approved.](https://www.builder.io?utm_source=codingcatdev)

**Building & Maintaining Design Systems ** is a CodingCat.dev podcast episode featuring Michael Chan alongside Alex Patterson and Brittney Postma focused on Design, Builder.io. Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=9yDPv1LGVZo) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Can you give us some of your background and how you ended up at Chromatic (Storybook)?
- How would you describe Storybook and Chromatic and what are they used for?
- At what point do you need a design system?
- Who owns a design system? (Designers or developers)
- Do most design systems still use Atomic Design?
- How to get feedback?
- What are the benefits of Chromatic?Zero Height sharing Stories

- How important are Design tokens?
- How do you maintain a design system over time?
- Customizability
- Possibly demo storybook if we get a chance (I can try and set this up in a coding cat branch)
- Empathy Day!

## Technical Overview: Building & Maintaining Design Systems

2.25 - Building and maintaining Design Systems: Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too. https://codingcat.dev/podcast/2-25-building-and-maintaining-design-systems Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experien

When applying the concepts from **Building & Maintaining Design Systems**  in a production codebase, teams working with Design, Builder.io should align their implementation with the [**web.dev UI & Design Patterns**](https://web.dev/learn/design) (Responsive web design, typography, color systems, and UX patterns). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for Design, Builder.io covered in "Building & Maintaining Design Systems" (Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [web.dev UI & Design Patterns](https://web.dev/learn/design) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Building & Maintaining Design Systems)](https://www.youtube.com/watch?v=9yDPv1LGVZo) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Building & Maintaining Design Systems**](https://www.youtube.com/watch?v=9yDPv1LGVZo) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): PM (EST)
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Michael Chan Intro
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Traveling
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Michael Chan Intro
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Storybook and Chromatic
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): At what point do you need a design system?
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Anything is a design system
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Progress
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): How do you get developers and designers on the same page?
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Communication and it belongs to everyone
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Maintainable
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Feedback
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Builder.io
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Chromatic benefits
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Visual Regression Testing
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): The Git Problem
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Design Tokens
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Small team
- [**00:00**](https://www.youtube.com/watch?v=9yDPv1LGVZo&t=0s): Challenges with Tokens

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Building & Maintaining Design Systems Full Video](https://www.youtube.com/watch?v=9yDPv1LGVZo) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **builder.io: ** [https://Builder.io](https://Builder.io)
- **:35 - Liturgy: ** [https://hopeinsource.com/liturgy/](https://hopeinsource.com/liturgy/)
- **Show Pick: ** [FreeCodeCamp - How to create and Implement a Design System with CSS (picked by Alex Patterson)](https://www.freecodecamp.org/news/how-to-create-and-implement-a-design-system-with-css/)
- **Show Pick: ** [AirBnB Design System (picked by Alex Patterson)](https://airbnb.design/building-a-visual-language/)
- **Show Pick: ** [Using Components within an Atomic Design System (picked by Alex Patterson)](/post/design-systems-with-web-components)
- **Show Pick: ** [Brad Frost and Storybook (picked by Brittney Postma)](https://bradfrost.com/blog/post/atomic-design-and-storybook/)
- **Show Pick: ** [Atomic Design (picked by Brittney Postma)](https://bradfrost.com/blog/post/atomic-web-design/)
- **Show Pick: ** [Basecamp Shapeup (picked by Michael Chan)](https://basecamp.com/shapeup)
- [**Michael Chan Guest Profile & Episodes on CodingCat.dev**](/guest/michael-chan)
- [**Michael Chan on GitHub**](https://github.com/chantastic)
- [**Episode Sponsor: Builder.io**](https://www.builder.io?utm_source=codingcatdev)
- [**web.dev UI & Design Patterns:**](https://web.dev/learn/design) Responsive web design, typography, color systems, and UX patterns
- [**Builder.io Developer Documentation:**](https://www.builder.io/c/docs/developers) Visual headless CMS, SDKs, and design-to-code workflows

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Building Design Systems with Backlight.dev**](/podcast/2-7-building-design-systems-with-backlight-dev): We sit down with m4dz, developer advocate from the <div>RIOTS team. We talk all about the Backlight.dev design system.
- [**Design Systems: From Atomic Design to a Global Solution**](/podcast/4-8-design-systems-brad-frost): Dive into the world of creating and maintaining successful design systems, unpack the layer cake approach, and explore the potential future of a global design s...
- [**Design Systems with Web Components**](/post/design-systems-with-web-components): How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Building & Maintaining Design Systems?

Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too. 2.25 - Building and maintaining Design Systems: Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too. https://codingcat.dev/podcast/2-25-building-and-maintaining-design-systems Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experien Throughout this podcast, Michael Chan breaks down real-world implementation details for Design, Builder.io so developers can apply these patterns directly in production.

### How do you implement Design best practices in production?

When adopting Design and Builder.io in a production stack, start by validating your configuration against the [**web.dev UI & Design Patterns**](https://web.dev/learn/design) (Responsive web design, typography, color systems, and UX patterns). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Building & Maintaining Design Systems walkthrough and find related code resources?

You can watch the complete video session for [**Building & Maintaining Design Systems**](https://www.youtube.com/watch?v=9yDPv1LGVZo) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Design, check out our related guide: [**Building Design Systems with Backlight.dev**](/podcast/2-7-building-design-systems-with-backlight-dev).

## Episode Summary

2.25 - Building and maintaining Design Systems: Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too.

https://codingcat.dev/podcast/2-25-building-and-maintaining-design-systems

Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experien

## Picks

### Alex Patterson

- [FreeCodeCamp - How to create and Implement a Design System with CSS](https://www.freecodecamp.org/news/how-to-create-and-implement-a-design-system-with-css/)
- [AirBnB Design System](https://airbnb.design/building-a-visual-language/)
- [Using Components within an Atomic Design System](https://codingcat.dev/tutorial/design-systems-with-web-components)

### Brittney Postma

- [Brad Frost and Storybook](https://bradfrost.com/blog/post/atomic-design-and-storybook/)
- [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)

### Michael Chan

- [Basecamp Shapeup](https://basecamp.com/shapeup)

## Recent Podcasts

[View More](/podcasts/page/1)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

November 19, 2025

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

November 4, 2025

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)