Search for a command to run...
Curated design systems resources for designers and developers.
A signal-to-noise breakdown of which 2026 design trends are genuinely reshaping the discipline. Covers the shift from static design libraries to AI-driven intent-based systems, and what it means for designers to evolve from pixel-pushers to quality-control strategists.
Added Feb 2026
A curated roundup of the best design system documentation sites in the industry, from Shopify Polaris to IBM Carbon. Great reference for teams building their own design system docs — each example is analyzed for what makes it effective.
Added Jan 2025
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.
Advanced palette builder from Lyft Design using perceptually uniform color scales (HSLuv/LCH). Creates accessible, predictable color systems for design systems — the tool behind thoughtful ramp generation.
Added Mar 2026
Open-source framework for building Generative UI — AI-generated interfaces that adapt in real-time based on user context and intent. Supports static (AI selects components), declarative (structured JSON specs), and open-ended (full surface generation) patterns. The infrastructure layer for GenUI design systems.
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.
Design System University offers structured courses on building, scaling, and governing design systems. Covers everything from token architecture and component APIs to organizational strategy and adoption — taught by experienced design system practitioners.
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.
A practical guide to building design systems that grow with your organization. Covers component architecture, governance, contribution models, and the organizational dynamics that determine whether a design system thrives or withers.
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.
Figma Make is an AI-powered generator that learns from your existing design system to produce team-specific UI patterns. Describe what you want in natural language and it outputs components that already match your brand tokens, spacing, and component conventions.
Design Lint scans your Figma file for inconsistencies — missing styles, detached components, incorrect spacing, and other common issues. Like a linter for code, it catches design debt before it ships, making it invaluable for design system maintenance.
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.
Brad Frost's chapter on maintaining design systems from his book Atomic Design tackles the hardest part of design systems — keeping them alive. Covers governance models, regular check-ins, handling updates, and building a culture of contribution.
Master is a Figma plugin from Dominate Design that supercharges component management — batch edit properties, sync instances across files, and manage variants at scale. A power tool for design system maintainers working with large component libraries.
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.
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.
Propstar automatically generates visual property tables for Figma components, documenting all variants, props, and states. It creates clean, shareable component specs that help teams understand and correctly use design system components.
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.
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.
UI Color Palette generates complete, balanced color palettes from a single color — creating tints, shades, and semantic color roles ready for design system use. It outputs palettes directly as Figma styles or variables, saving hours of manual color scale creation.
UXPin is a design tool that bridges the gap between design and code by letting you build prototypes with real React, Storybook, or npm components. Its merge technology means designers work with production components directly, eliminating design-development drift.
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.
