Design Systems

Professional design system with 7,800+ components and code-implemented variants. Features 80+ unique widgets, Figma variables support, and dark mode compatibility. Lightning-fast performance designed specifically for enterprise SaaS dashboards and admin interfaces.

Apple's official iOS 18 UI kit containing hundreds of components with Auto Layout, Component Properties, variants, and light/dark mode support. Includes system interfaces, widgets, notification templates, and comprehensive typography with accessibility sizes for native iOS development.

React 19 component and block library with source-owned shadcn installs, semantic design and motion tokens, keyboard support, and reduced-motion paths. Includes live previews for 105 free components and 22 blocks.

Open-source React 19 design system from Meta with 150+ accessible components, seven themes, templates, and a CLI. Shared conventions and documentation support people and coding agents.

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

Unstyled React components for accessible interfaces and design systems. Includes composable primitives for forms, overlays, navigation, feedback, and interaction without prescribing visual styling.

Collection of copyable interface primitives for AI products, including streaming text, approval cards, tool-call states, task progress, retrieved context, and data diffs.

Advanced UI kit using Auto Layout 7.0 with slot-based system for landing pages and websites. Features nested instances, variables for dark mode, and thousands of component instances from master variants. Perfect for modern website builds with easy variant management.

React and Tailwind design system for agentic products, with source-installable chat, agent-status, dashboard, chart, and form components plus Figma tokens, CLI tools, and MCP access.

Bootstrap remains one of the most widely used CSS frameworks, and its UI kit provides responsive grid systems, components, and utility classes that work out of the box. These examples showcase Bootstrap's component library for rapid prototyping and production-ready 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.

Open-source design system from Dialpad with Vue components, tokens, icons, utilities, UI kits, and accessibility guidance. Version 10 adds composition primitives, theming, MCP tooling, and migration guides.

Ant Design is a comprehensive React UI framework created by Alibaba, providing 60+ polished enterprise components with TypeScript support, internationalization, and extensive theming. The accompanying Figma kit includes all components, making it a complete design-to-development system.

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.

The Figma Community's UI kit collection features hundreds of free and premium design kits — from Material Design and iOS components to custom systems and wireframe kits. A starting point for finding pre-built component libraries to accelerate your Figma projects.

Tailwind CSS-based component library with 27+ pages and responsive examples. Features seamless Tailwind integration with comprehensive documentation and code examples. Perfect for developers building with Tailwind CSS who need design-to-code consistency.

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.

Well-balanced design system with 5,500+ components featuring Auto Layout, dark mode support, and 420+ building blocks with comprehensive iconography. Ideal for mid-weight web and app designs requiring solid component coverage without overwhelming complexity.

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.

Complete design system for web applications with 6,500+ components, wireframe mode, multi-theming support, and 440+ icons. Regular updates through Config 2025 with Auto Layout compatibility. Ideal for SaaS platforms, dashboards, and admin panels.

Open design system for government services with accessible styles, components, and task patterns backed by cross-government research. Its Frontend package provides production-ready code and guidance.

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.

Fully responsive mobile UI kit optimized for both iOS and Android with native components following Apple HIG and Google Material Design. Features pre-built AI app templates and ready-to-use mobile screens for rapid mobile app prototyping.

Specialized landing page kit with 170+ blocks, 500+ components, and responsive breakpoints for desktop, tablet, and mobile. Modular block system for heroes, features, pricing, testimonials, and CTAs designed for high-converting marketing pages.

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.

Google's official Material 3 Design Kit featuring 500+ components and variants with Figma variables support, dark theme compatibility, and responsive design. Includes 300+ variables and styles, perfect for Android app design following Material Design guidelines.

Google's official Material Design resources provide UI kits, icons, fonts, and implementation guidelines for building interfaces that follow Material Design principles. The comprehensive system covers components, motion, theming, and accessibility across platforms.

Professional admin dashboard kit with pre-designed elements, widgets, charts, buttons, forms, and navigation components. Reduces design time for data-driven UIs with comprehensive layouts for business intelligence and reporting interfaces.

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 documentation for Nordhealth's production design system, covering 57 web components, 300 icons, tokens, accessibility guidance, Figma tooling, and patterns for dense clinical software.

Versatile UI kit with 1,000+ components and variants, 500+ mobile screens across 9 themes including e-commerce, finance, NFT, and events. Perfect for comprehensive app prototypes with both mobile and web components in a unified design system.

Open-source NVIDIA design system for operational AI, robotics, and autonomous-vehicle interfaces. It ships framework-agnostic Web Components, tokens, accessibility guidance, a CLI, and MCP tooling.

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

Comprehensive free component library with 5,000+ Tailwind CSS-based components featuring auto-layout and Figma Tokens compatibility. 100% free with extensive component coverage, perfect for Tailwind CSS projects requiring no licensing fees.

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.

966+ real-world shadcn/ui patterns and compositions. Filters, data tables, forms, and dashboards. Open source and compatible with all shadcn styles.

Open-source React and Tailwind interface kit for AI apps, with a shadcn-compatible theme and components for agent status, tool steps, diffs, questions, reasoning, and context use.

Open-source shadcn/ui layouts and components. Clean, modern designs ready to use in your Next.js projects.

Source-available library of single-file SwiftUI interactions for iOS 17+, with motion, haptics, Dynamic Type, reduced-motion support, and CLI or MCP installation. Free components use Apple frameworks only.

Tailwind UI is the official component library from the creators of Tailwind CSS, providing 500+ professionally designed, responsive components and templates. Each component is production-ready HTML with Tailwind classes — paste it into your project and customize.

Comprehensive UI starter kit with 2,500+ components, 700+ icons, and 55 predefined styles. Available for both Figma and Sketch with cross-platform compatibility. Perfect for teams needing consistent design systems across multiple design tools and platforms.

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.

The world's largest Figma UI kit with 10,000+ components and variants, 900+ global styles, and 420+ page examples. Built with 100% Auto Layout 5.0, smart variants, Figma variables, and accessibility focus. Perfect for rapid prototyping and comprehensive design systems.

Public design system behind w3.org with documented layouts, components, scripts, and templates. Its September update adds fluid type, logical properties, cleaner markup, and more flexible spacing.

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.

Corporate-focused admin dashboard with 4 home pages, 40+ inner pages, vector icons, and light/dark themes. Pixel-perfect and fully customizable design ideal for business, finance, and sales dashboard implementations. Updated October 2024.