Using Design Systems in WordPress Block Themes with Mike McAlister

WordPress design systems and block themes help you build a site that looks consistent on every page, even if you're not a designer. Mike McAlister, the designer behind the Ollie block theme, shares how he picks fonts, font sizes and colors so a site fits together on desktop and mobile. In this episode: Block themes put typography, spacing and colors in the WordPress site editor, so the theme's presets act like design guardrails you can tweak with a few sliders. Mike likes six font sizes at most, with the biggest and smallest used rarely, plus dark grays and one brand color, so headings and sections stay consistent across your whole site. A good way to start is the free Ollie theme from wordpress.org, which comes with around 50 patterns, so you can learn patterns, Global Styles and template parts before you pay for anything. Your layouts and content stay in place when you switch block themes, because they're built from native WordPress blocks. Block styles and fonts only load on pages that use them, which helps your site load faster. Guest: Mike McAlister, designer and creator, Ollie Website: https://mikemcalister.com/ X: https://x.com/mikemcalister Ollie: https://olliewp.com/ Chapters 00:00:00 Meet Mike McAlister and Ollie 00:02:42 How block themes give you a design system 00:07:02 Why limits keep your design consistent 00:15:20 Getting started with the free Ollie theme 00:18:49 Switching themes without losing content 00:24:37 Custom blocks and faster pages 00:27:19 How many fonts, sizes and colors to use 00:31:12 Designing in Figma before building 00:43:07 Where WordPress is heading 00:56:48 Where to learn design for free Episode page: https://webtalk.show/episodes/005-using-design-systems-on-wordpress-a-chat-with-mike-mcalister/ Hosted by Armando J. Perez-Carreno. Learn more at https://perezcarreno.com