Atlassian Design Guidelines

End-to-end design language to create straightforward and beautiful experiences.

Firefox Photon Design System

Launch recognizable, enjoyable Firefox products and features faster.

GitHub Primer

Open-source it to allow the community to design and build their own projects.

GitLab Design System - Pajamas

Resources, components, and design guidelines behind GitLab.

Google Material Design

Create intuitive and beautiful products with Material Design.

IBM Carbon

Carbon is IBM's open-source design system for products and experiences.

Shopify Polaris

Our design system helps us work together to build a great experience for all of Shopify's merchants.

A design system governance process

A guide to collaborating on design systems

Building a Design System? Start with a map

Building your design system

Design Systems are for People

Design Systems vs. Pattern Libraries vs. Style Guides – What's the Difference?

From Figma to Production: The Modern Design-to-Code Pipeline in 2026

How Spotify organises work in Figma to improve collaboration

How to Build Design Systems

What is a Design System – Everything You Need to Know

Your sketch library is not a design system

Design system checklist

Build better design systems. An open-source checklist to help you plan, build and grow your design system.

Design Systems Survey

Designers and developers from more than 20 industries tell us about their design systems and their uses.

Design.system

Resources for the design systems community.

Super friendly

We help in-house teams make better digital products with design systems.

AI Web Design Codex

Knowledge base of 60 cross-linked guides on web design, UX, accessibility, and conversion, for humans and AI agents.

Button Hover Specimens

Catalogue of 131 button hover mechanisms and 117 press states on one identical button, each with its own markup and code to copy. Same label, same box, same rule, so the interaction is the only variable. No dependencies.

Figma

Helps teams create, test, and ship better designs from start to finish (cross-platform).

InVision

The digital product design platform powering the world's best user experiences.

Sketch

A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).

AdobeXD

Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.

Marvel

Marvel has everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands.

UXPin

Design and manage your entire UX/UI project in one tool.

Penpot

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.

Lunacy

A free graphic design tool with offline mode, built-in assets (icons, illustrations, photos), and real-time collaboration. Great alternative to Sketch and Figma (macOS, Windows, Linux).

Abstract

Design collaboration without the chaos (for Sketch and XD on macOS).

Avocode

Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.

InVision Design System Manager

Powers creative and consistent design at scale with a central place to manage design and coded components.

Zeplin

The better way to share, organize and collaborate on designs—built with developers in mind.

Accessibility for developers

5 simple ways developers can help improve and enforce website accessibility.

Stark

Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.

The A11Y Project

A community-driven effort to make web accessibility easier. See resources section.

InclusiveColors palette creator

Creates accessible custom Tailwind-style color palettes that pass WCAG contrast checks and can be exported to CSS/Figma/Adobe.

Nutilz Color Shades Generator

Generates a 50-950 tint/shade scale from any hex color and exports it as CSS variables, SCSS, or a Tailwind config.

Color Blindness Simulator

Shows how any image or built-in test scene looks with protan, deutan, or tritan vision at adjustable severity, side by side with the original. Uses the Machado (2009) model, so partial deficiencies can be simulated rather than only the complete forms.

Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software in 2020

Design Tokens W3C Community Group

View repository on GitHub here!

DesignTokens.dev

Ship your design tokens without managing infrastructure.

Diez

Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams.

Design Tokens Validator

Validate your design tokens against the Design Token Community Group spec.

Abstract Connect

A Design tokens extractor for devs using Abstract & JavaScript.

Zeplin JSON export tokens

Design tokens Zeplin extension to generate your tokens in JSON format.

CSS Variable Generator

Generate scoped CSS custom properties with light and dark theme pairs, plus SCSS, Less, and JSON design-token exports.

Figmagic

Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

Style Dictionary

A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language.

Superposition

Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have.

Theo

Theo is an abstraction for transforming and formatting Design Tokens.

Designesy

40-check design-system contract verification engine. Scores any URL against DTCG 2025.10 token conformance, WCAG 2.2 AA, motion, and typography. Includes DTCG token validator, stylelint plugin, and MCP server.

A designer's guide to the Figma API

Building a Visual Studio Code Theme with Style Dictionary

Design tokens with Figma

Documenting Design Tokens

How to manage your Design Tokens with Style Dictionary

(September 27, 2018)

Manage design tokens with TypeScript and styled-components

Theo Design Tokens Using Node-Sass Importer For Any Build Method

Tokenize it

Tokens in Design Systems

Backlight

With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.

Stencil

Toolchain for building reusable, scalable Design Systems.

Zeroheight

Create beautiful living styleguides and document all your design system resources in one place. Learn about this.

Backlight

With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.

Pattern Lab

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

React Styleguidist

Isolated React component development environment with a living style guide.

Storybook

Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Styled System

Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object.

Accessibility

Test component compliance with web accessibility standards.

Console

Show console output like logs, errors, and warnings in the Storybook.

Dependency discovery in Storybook

Design systems workflow in Storybook

How design systems use Storybook

How packaging makes it dead simple to share UI components

Storybook design system

Storybook Docs sneak peek

Chromatic

Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.

Sherlo

Visual testing platform for React Native Storybook. Captures screenshots on iOS and Android simulators in the cloud and detects visual changes automatically.

Testing library

Simple and complete testing utilities that encourage good testing practices.

Designesy

40-check design-system contract verification engine. Scores any URL against DTCG 2025.10 token conformance, WCAG 2.2 AA, motion, and typography. Includes DTCG token validator, stylelint plugin, and MCP server.

Acing the System Design Interview

Book that gives the insights, skills, and practice needed to ace the toughest system design interview questions by Zhiyong Tan.

Atomic Design

Atomic design methodology for creating design systems by Brad Frost.

Building Design Systems

Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis.

Design systems

A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine).

Front-End Style Guides

Creating and maintaining style guides for websites by Anna Debenham.

Frontend Architecture for Design Systems

A modern blueprint for scalable and sustainable websites by Micah Godbolt.

Introduction to Design Systems

A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian

Modular Web Design

Creating Reusable Components for user experience design and documentation by Nathan Curtis.

Building Accessible Interfaces: Patterns And Techniques

Will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind by Sara Soueidan.

Design Processes & Systems in Craft

Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there? In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded by Courtney Bradford.

Design Systems - The State of the Web

Conversation about the role of design systems in modern web development and how they can change the dynamics between designer and developer by Adam Argyle (Design Advocate at Google).

Design Systems

Women of React conf by Neha Sharma.

How To Build a Design System | UXPin

Will teach you how to build a UX Design System using the UX Pin prototyping & design platform.

Introducing Design Systems Into Chaos

Shares practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos by Diana Mounter (Design Systems Lead at GitHub).

Jina Anne - Designing a Design System

Will share strategies for how to approach, design and build an effective design system; how to successfully maintain the system to ensure ongoing usefulness by Jina (Lead Designer on the Design Systems team at Salesforce UX).

Level up your Design System with styled-system

Women of React conf by Taley'a Mirza.

Maintaining Design Systems

Helps you learn how to keep your system and the products it serves in sync and understand how to maintain and evolve your design system to give your users get the best possible experience by Brad Frost (Front-end designer).