Design Systems⁽²⁶⁾

Province of British Columbia design system with Figma tokens, CSS and JavaScript variables, and React components for consistent government service interfaces.

Carbon is IBM's open-source design system providing production-ready React and Web Components, Figma kits, design tokens, and comprehensive guidelines. Built on the IBM Design Language, it's a mature, well-documented system ideal for enterprise applications.

A curated archive of design principles from teams across the industry — Apple, Google, GOV.UK, and hundreds more. Browse by company or principle type to find inspiration for establishing your own team's design values and decision-making framework.

A podcast dedicated to the practical side of design systems — featuring real conversations with practitioners about governance, adoption challenges, component APIs, and scaling design systems across organizations.

April 2026 checkpoint: AI-powered generative design, 60% cycle reduction, cloud collaboration, and spatial/3D UX are production-ready. Most teams still lag. The insight: competitive advantage goes to design orgs adopting agent-first and spatial design NOW — the tools are no longer the bottleneck.

A long-running podcast featuring interviews with design system leaders from companies like Shopify, Figma, GitHub, and Salesforce. Deep conversations about strategy, tooling, and the organizational dynamics behind successful design systems.

Tokens evolve from static values (colors, spacing) to behavioral ones: motion curves, layout logic, and adaptive personalization rules. Enables AI agents to generate UI within system constraints — the infrastructure layer that keeps generative design on-brand.

Semantic design variables replacing hardcoded values across design systems. Enables multi-brand scalability and bridges the gap between design intent and implementation.

DesignSystems.media aggregates articles, talks, tools, and resources about design systems from across the web. A one-stop hub for staying current with best practices, new tools, and community discussions in the design systems space.

Autonomous agents now span Figma → Jira → GitHub — detecting design drift, enforcing brand principles, and flagging accessibility failures in code. This is the governance-beyond-humans model: agents become the system's immune system. Unified collaboration hubs replace handoff lag with real-time spec access in editors and tickets.

Fluent 2 is Microsoft's cross-platform design system providing components, design tokens, and guidelines for building apps across Windows, web, iOS, and Android. Its adaptive design language ensures consistency while respecting each platform's conventions.

Frontify is a brand management platform that helps teams create, maintain, and share brand guidelines, digital asset libraries, and design system documentation in one centralized hub. Used by companies like Uber and Lufthansa to keep brand consistency at scale.

A YouTube channel delivering in-depth tutorials and talks about building and maintaining design systems. Covers topics from token architecture and component APIs to Figma workflows and developer handoff — practical knowledge from experienced practitioners.

Public state design system with Figma components, accessible style guidance, design tokens, and icon packages. A practical reference for teams building clear, consistent government services.

Omlet analyzes your codebase to show exactly how design system components are being used — adoption rates, prop usage patterns, and which teams are (or aren't) using the system. Data-driven insights for proving design system ROI and identifying gaps.

Modulor is an open-source design system providing a comprehensive set of accessible web components, design tokens, and documentation. Built for flexibility, it offers a solid foundation for teams who want a customizable starting point rather than building from scratch.

Role-specific AI agents (strategist, visual designer, accessibility reviewer) coordinate via shared docs. Agents handle consistency checks; humans preserve judgment on aesthetics. A practical model for augmenting design orgs without losing decision authority.

Public design system for New York State services with web components, CSS utilities, design tokens, accessibility guidance, and a Figma library for agency teams.

Primer is GitHub's open-source design system featuring React components, CSS utilities, Figma kits, and detailed documentation. Its thoughtful approach to accessibility, color modes, and responsive design makes it an excellent reference for building modern design systems.

The Component Gallery collects and compares UI components across real design systems — see how different companies implement buttons, modals, navigation, and more. An invaluable research tool when designing components for your own system.

Graph-powered multi-brand token architecture with contextual awareness, dynamic inheritance, and multi-mode theming. The infrastructure layer for scalable design systems that span multiple brands without losing coherence.

Paste is Twilio's design system built for creating consistent customer engagement experiences. It provides a rich set of accessible React components, design tokens, and detailed usage guidelines — one of the most thorough open-source design systems available.

A detailed video breakdown of how to build a typography system within your design system — covering type scales, responsive sizing, line heights, font pairing, and token naming conventions. Practical walkthrough with real implementation examples.

Wise's design system showcases how a global fintech company creates consistent, trustworthy interfaces across 80+ countries. A great case study in designing for internationalization, clarity in financial interfaces, and multi-platform consistency.

Workbench is Gusto's open design system providing components and patterns specifically built for complex business applications — payroll, HR, and benefits interfaces. A valuable reference for teams designing dense, data-heavy admin UIs.

Annual practitioner survey: Web Components gaining over React, AI unstalling stalled adoption, accessibility gap narrowed from 46% to 10%. Real benchmark data, no hype.