Creating a Standardized Design System for the Web

Original: https://codingcat.dev/podcast/2-31-creating-a-standardized-design-system-for-the-web

▶ Watch on YouTube & Subscribe to CodingCat.dev

**Creating a Standardized Design System for the Web **is a CodingCat.dev podcast episode featuring Greg Whitworth alongside Alex Patterson and Brittney Postma focused on Design, CSS, HTML. Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors. Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Can you tell us about your background?
   1. Salesforce LWC web component framework.
2. Why do web components not get used more?
3. How did Open UI get started?
4. Why do we need Open UI?
   1. browser compatibility
5. What components are available?
6. Accent Color Support - https://caniuse.com/?search=accent
7. Select Menu Example - https://css-tricks.com/the-selectmenu-element/
8. Nicole Sullivan Google Chrome team, worked with
9. How to get involved?
10. What needs work?
11. CSSWG and Houdini

Technical Overview: Creating a Standardized Design System for the Web

2.31 - Creating a Standardized Design System for the Web: Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors. https://codingcat.dev/podcast/creating-a-standardized-design-system-for-the-web Sponsors: Storyblok

Have you already discovered Storyblok? They

When applying the concepts from Creating a Standardized Design System for the Web in a production codebase, teams working with Design, CSS, HTML, Storyblok 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, CSS, HTML, Storyblok covered in "Creating a Standardized Design System for the Web" (Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors.).
• **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 (Creating a Standardized Design System for the Web) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Video Chapters & Timestamps

Jump directly to any segment of Creating a Standardized Design System for the Web on YouTube using the timestamped chapters below:

• 00:00: PM (EDT)
• 00:00: Intro
• 00:00: Hello
• 00:00: Greg Whitworth Intro
• 00:00: Salesforce Lighting Platform (LWC)
• 00:00: OpenUI Overview
• 00:00: Does Salesforce back OpenUI
• 00:00: Storyblok Ad
• 00:00: How to get multiple browsers standardized
• 00:00: Browser default presets
• 00:00: Select Menu Element and custom elements
• 00:00: Why standardize?
• 00:00: Performance in JS vs Browser
• 00:00: Select Menu standardization
• 00:00: Datetimelocal standard popup
• 00:00: Emoji select element
• 00:00: It doesn't matter what the spec says, if the web adopts around it
• 00:00: OpenUI Discord Links and Teleconferences
• 00:00: How to propose a new element, web component to HTML element
• 00:00: How long does it take to implement a proposal?

Resources, Links & Official Documentation

• *Watch on YouTube: *Creating a Standardized Design System for the Web Full Video (plus Subscribe to CodingCat.dev)
• *storyblok.com: *https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=&utm_content=purrfect-podcast
• *Show Pick: *Fastify (picked by Alex Patterson)
• *Show Pick: *Fastify v4 (picked by Alex Patterson)
• *Show Pick: *Mac Studio (picked by Alex Patterson)
• *Show Pick: *Design Systems News (picked by Brittney Postma)
• *Show Pick: *Water Enhancers (picked by Brittney Postma)
• *Show Pick: *Open UI Discord (picked by Greg Whitworth)
• *Show Pick: *Binging Legal Eagle youtube reviews of lawyers in movies (picked by Greg Whitworth)
• Greg Whitworth Guest Profile & Episodes on CodingCat.dev
• Greg Whitworth on GitHub
• Episode Sponsor: Storyblok
• web.dev UI & Design Patterns: Responsive web design, typography, color systems, and UX patterns
• MDN CSS Reference: Modern layout, Grid, Flexbox, animations, and cascade layers
• MDN HTML Reference: Semantic markup, accessibility attributes, and document structure

Related CodingCat.dev Tutorials & Podcast Episodes

• 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.
• 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...
• Creating and Using Kendo UI: We have Alyssa Nicoll and Kathryn Grayson from Progress teach us all about KendoUI and how they maintain this frontend library.

Frequently Asked Questions (FAQ)

What are the main takeaways from Creating a Standardized Design System for the Web?

Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors. 2.31 - Creating a Standardized Design System for the Web: Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors. https://codingcat.dev/podcast/creating-a-standardized-design-system-for-the-web Sponsors: Storyblok

Have you already discovered Storyblok? They Throughout this podcast, Greg Whitworth breaks down real-world implementation details for Design, CSS, HTML so developers can apply these patterns directly in production.

How do you implement Design best practices in production?

When adopting Design and CSS 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 Creating a Standardized Design System for the Web walkthrough and find related code resources?

You can watch the complete video session for Creating a Standardized Design System for the Web on the CodingCat.dev YouTube channel. For a deeper dive into Design, check out our related guide: Design Systems with Web Components.