styled-system - Design system utilities for styled-components and other css-in-js libraries

•    Javascript

Design system utilities for styled-components, glamorous, and other css-in-js libraries

awesome-scalability - Scalable, Available, Stable, Performant, and Intelligent System Design Patterns

An updated and curated list of readings to illustrate best practices and patterns in building scalable, available, stable, performant, and intelligent large-scale systems. Concepts are explained in the articles of prominent engineers and credible references. Case studies are taken from battle-tested systems that serve millions to billions of users. Understand your problems: scalability problem (fast for a single user but slow under heavy load) or performance problem (slow for a single user) by reviewing some design principles and checking how scalability and performance problems are solved at tech companies. The section of intelligence are created for those who work with data and machine learning at big (data) and deep (learning) scale.

tachyons - Functional css for humans

•    CSS

Functional css for humans. Quickly build and design new UI without writing css.

primer - The design system that powers GitHub

•    CSS

Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project. The Primer repo is managed as a monorepo that is composed of many npm packages.

storybook - Interactive UI component dev & test: React, React Native, Vue, Angular

•    Javascript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

evergreen - 🌲 Evergreen React UI Framework by Segment

•    Javascript

All Evergreen developers get in free. Register with SEGMENTDIGSDEVS. Evergreen is built on the belief that you can never predict all future requirements, only prepare for it. Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.

ant-design - 🐜 A UI Design Language

•    TypeScript

An enterprise-class UI design language and React-based implementation. Read our contributing guide.

ant-ux - :guitar: A sitemap template for ux design

•    Javascript

This is a materials library which assists designers to define, refine and finalise the inter-page logic of their products. At the early stage of the product design process, you can use it to draw the logic diagram between pages. Throughout this process, it can help you visualise and understand product architectures and business processes more easily. OmniGraffle is a software which can help you create precise and beautiful graphics ranging from website wireframes, flow charts, organization structure to illustrations. There are unlimited usage scenarios. For example, you can use it to facilitate thinking process, to visualise brain storm ideas, to draw mind map, to create prototypes of website and PDF files, or use it as a style manager. OmniGraffle provides extensive options for objects, canvases, templates, inspectors, and stencils, fully representing its nature of WYSIWYG. You can also customise your own "Stencils", a group of pre-defined drag-able elements.

awesome-design-systems - 💅🏻 ⚒ A collection of awesome design systems

Know a resource that isn't listed below? Feel free to create a new pull request, or open an issue. A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.

kit - Tools for developing, documenting, and testing React component libraries

•    Javascript

Install the Kit CLI to get started with isolated component development. Create an examples folder for your components. This folder can be used for development, documentation, and testing purposes.

x0 - Document & develop React components without breaking a sweat

•    Javascript

Read more about x0 in our blog post. x0 renders a directory of React components, automatically handling routing based on filename. Create a docs folder and add an index.js file.

system-design-interview - System design interview for IT companies

System design is a very broad topic. Even a software engineer with many years of working experience at a top IT company may not be an expert on system design. If you want to become an expert, you need to read many books, articles, and solve real large scale system design problems. Spend a few minutes questioning the interviewer and agreeing on the scope of the system. Remember to make sure you know all the requirements the interviewer didn't tell you about in the beginning.

design-system - Salesforce Lightning Design System

•    Javascript

Welcome to the Salesforce Lightning Design System brought to you by Salesforce UX. Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.

vue-design-system - An open source tool for building UI Design Systems with Vue.js

•    Javascript

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

theo - Theo is a an abstraction for transforming and formatting Design Tokens

•    Javascript

Theo is an abstraction for transforming and formatting Design Tokens. As of Theo v6, the gulp plugin is distributed as a separate package: gulp-theo.

paris - Define and apply styles to Android views programmatically

•    Kotlin

Paris lets you define and apply styles programmatically to Android views, including custom attributes. To use Paris in a library module see Library Modules.

argon-design-system - Argon - Design System for Bootstrap 4 by Creative Tim

•    CSS

Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites. Argon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.

sync.sketchplugin - Keep your design team in sync!

•    Javascript

Share styles with your team using Google Sheets. Install from Sketch Toolbox (recommended) or download the zip, unzip, and open sync.sketchplugin.

style-dictionary - A build system for creating cross-platform styles.

•    Javascript

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

html-sketchapp-cli - Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp

•    Javascript

Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp and Puppeteer. Then run the html-sketchapp command to generate JSON files in html-sketchapp's "Almost Sketch" format, ready to be imported into Sketch.