Design systems
106 items from klaufel/awesome-design-systems ★899
-
React Styleguidist react-styleguidist.js.org
Isolated React component development environment with a living style guide.
-
Design Systems are for People publication.design.systems
-
Shopify Polaris polaris.shopify.com
Our design system helps us work together to build a great experience for all of Shopify's merchants.
-
Nutilz Color Shades Generator nutilz.com
Generates a 50-950 tint/shade scale from any hex color and exports it as CSS variables, SCSS, or a Tailwind config.
-
How to Build Design Systems medium.muz.li
-
Storybook Docs sneak peek medium.com
-
How design systems use Storybook medium.com
-
Dependency discovery in Storybook medium.com
-
Tokens in Design Systems medium.com
-
-
A designer's guide to the Figma API medium.com
-
Google Material Design material.io
Create intuitive and beautiful products with Material Design.
-
Acing the System Design Interview manning.com
Book that gives the insights, skills, and practice needed to ace the toughest system design interview questions by Zhiyong Tan.
-
Front-End Style Guides maban.co.uk
Creating and maintaining style guides for websites by Anna Debenham.
-
Button Hover Specimens jsabutis.github.io
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.
-
A guide to collaborating on design systems invisionapp.com
-
Accessibility for developers invisionapp.com
5 simple ways developers can help improve and enforce website accessibility.
-
InVision Design System Manager invisionapp.com
Powers creative and consistent design at scale with a central place to manage design and coded components.
-
-
Viewport github.com
Build responsive components by adjusting Storybook's viewport size and orientation.
-
Source github.com
View a story's source code to see how it works and paste into your app.
-
Storyshots github.com
Take a code snapshot of every story automatically with Jest.
-
Links github.com
Link stories together to build demos and prototypes with your UI components.
-
Knobs github.com
Interact with component inputs dynamically in the Storybook UI.
-
Docs github.com
Document component usage and properties in Markdown.
-
Backgrounds github.com
Switch backgrounds to view components in different settings.
-
Actions github.com
Get UI feedback when an action is performed on an interactive element.
-
Accessibility github.com
Test component compliance with web accessibility standards.
-
Stark getstark.co
Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.
-
-
Introduction to Design Systems fem-design-systems.netlify.app
A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian
-
Zeplin JSON export tokens extensions.zeplin.io
Design tokens Zeplin extension to generate your tokens in JSON format.
-
Manage design tokens with TypeScript and styled-components erikverweij.dev
-
Design Processes & Systems in Craft dotall.com
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.
-
Diez diez.org
Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams.
-
DesignTokens.dev designtokens.dev
Ship your design tokens without managing infrastructure.
-
Design Systems Survey designsystemssurvey.seesparkbox.com
Designers and developers from more than 20 industries tell us about their design systems and their uses.
-
Design system checklist designsystemchecklist.com
Build better design systems. An open-source checklist to help you plan, build and grow your design system.
-
Designesy designesy.org
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.
-
Building your design system designbetter.co
-
Design.system design.systems
Resources for the design systems community.
-
GitLab Design System - Pajamas design.gitlab.com
Resources, components, and design guidelines behind GitLab.
-
Firefox Photon Design System design.firefox.com
Launch recognizable, enjoyable Firefox products and features faster.
-
-
Documenting Design Tokens dbanks.design
-
Color Blindness Simulator colorvisionlabs.com
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.
-
Chromatic chromaticqa.com
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.
-
Your sketch library is not a design system bradfrost.com
-
A design system governance process bradfrost.com
-
Tokenize it blog.prototypr.io
- next page of items loading…
