Building & Maintaining Design Systems

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 or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Can you give us some of your background and how you ended up at Chromatic (Storybook)?
2. How would you describe Storybook and Chromatic and what are they used for?
3. At what point do you need a design system?
4. Who owns a design system? (Designers or developers)
5. Do most design systems still use Atomic Design?
6. How to get feedback?
7. What are the benefits of Chromatic?
   1. Zero Height sharing Stories
8. How important are Design tokens?
9. How do you maintain a design system over time?
10. Customizability
11. Possibly demo storybook if we get a chance (I can try and set this up in a coding cat branch)
12. 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 (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 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) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Video Chapters & Timestamps

Jump directly to any segment of Building & Maintaining Design Systems on YouTube using the timestamped chapters below:

• 00:00: PM (EST)
• 00:00: Intro
• 00:00: Michael Chan Intro
• 00:00: Traveling
• 00:00: Michael Chan Intro
• 00:00: Storybook and Chromatic
• 00:00: At what point do you need a design system?
• 00:00: Anything is a design system
• 00:00: Progress
• 00:00: How do you get developers and designers on the same page?
• 00:00: Communication and it belongs to everyone
• 00:00: Maintainable
• 00:00: Feedback
• 00:00: Builder.io
• 00:00: Chromatic benefits
• 00:00: Visual Regression Testing
• 00:00: The Git Problem
• 00:00: Design Tokens
• 00:00: Small team
• 00:00: Challenges with Tokens

Resources, Links & Official Documentation

• Watch on YouTube: Building & Maintaining Design Systems Full Video (plus Subscribe to CodingCat.dev)
• builder.io: https://Builder.io
• :35 - Liturgy: https://hopeinsource.com/liturgy/
• Show Pick: FreeCodeCamp - How to create and Implement a Design System with CSS (picked by Alex Patterson)
• Show Pick: AirBnB Design System (picked by Alex Patterson)
• Show Pick: Using Components within an Atomic Design System (picked by Alex Patterson)
• Show Pick: Brad Frost and Storybook (picked by Brittney Postma)
• Show Pick: Atomic Design (picked by Brittney Postma)
• Show Pick: Basecamp Shapeup (picked by Michael Chan)
• Michael Chan Guest Profile & Episodes on CodingCat.dev
• Michael Chan on GitHub
• Episode Sponsor: Builder.io
• web.dev UI & Design Patterns: Responsive web design, typography, color systems, and UX patterns
• Builder.io Developer Documentation: Visual headless CMS, SDKs, and design-to-code workflows

Related CodingCat.dev Tutorials & Podcast Episodes

• 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: 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: 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 (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 on the CodingCat.dev YouTube channel. For a deeper dive into Design, check out our related guide: Building Design Systems with Backlight.dev.