clarity - UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

•    TypeScript

Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. This repository includes everything you need to build, customize, test, and deploy Clarity. For complete documentation, visit the Clarity website.The easiest way to run a sample Angular application with Clarity is to use the Clarity Seed.

system-design-primer - Learn how to design large-scale systems

•    Python

Learn how to design large-scale systems.Prep for the system design interview.

css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

•    CSS

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

stylable - Stylable - CSS for components

•    TypeScript

Stylable enables you to write reusable, highly-performant components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability. At build time, the preprocessor converts the Stylable CSS into a minimal, flat, static, valid vanilla CSS that works cross-browser.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

•    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

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.

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.

docz - ✍🏻It has never been so easy to document your things!

•    TypeScript

Libraries that make our life easier coming up every day. Styleguides and design system are growing so fast. Today, tools that allow us to be quick and effective in what we are doing are really necessary. We can't lose time with tasks that should be trivial for us. Thinking about that docz came out. Documenting our things is one of the most important and heavy processes when you're creating something new. We waste a lot of time with unnecessary setups to build something that can represent and we want with our own style.

alva - Create living prototypes with code components.

•    TypeScript

Alva is a radically new digital design tool built for cross-functional product teams. Alva works with your production frontend components, adding up-to-date, responsive, and interactive designs to your living styleguide.

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.

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.

design-system-react - Salesforce Lightning Design System in React

•    Javascript

Welcome to the project! 👋 This library is the React implementation of the Salesforce Lightning Design System. This library has a peer dependency on @salesforce-ux/design-system, react, and react-dom. It is tested with React 16 and has a stable API despite its version number. Please polyfill this library in order to meet your target environment needs. Please view Create React App Setup for more information on using this library with Create React App.

uikit - 🛠 Component code and tests for the design system

•    HTML

The UI-Kit for the Australian Government Design System. The GOV.AU UI-Kit is distributed through the npm ecosystem and can only be installed through the npm command. Npm requires node.js and the UI-Kit needs a node.js 5 or higher.

lab - React UI component design tool

•    HTML

React UI component design tool

cosmos - Auth0 Design System

•    Javascript

Auth0 Design System

designs - Blockstack designs

•    HTML

Blockstack Design is an open source design cooperative led by designers, developers, writers and enthusiasts of the Blockstack community and decentralized internet movement. We are working hard at building a more open and beautiful internet in a collaborative manner.

design-system-playground - Experiment with design systems by updating stateful theme data which controls typography and colors

•    Javascript

Experiment with design systems by updating stateful theme data which controls typography and colors.

helloper.com - My homepage.

•    HTML

This is the source of helloper.com. It's based on the Kollegorna Middleman Boilerplate. The master branch is automatically deployed to my 512 mb Vultr VPS using Codeship.

wonder-blocks - React components for Wonder Blocks design system.

•    Javascript

The Khan Academy Wonder Blocks design system. This is work-in-progress and a lot of things are still in motion.

axiom - Axiom - Brandwatch design system and React pattern library

•    Javascript

This is the monorepo for Axiom packages. Axiom uses lerna and yarn workspaces to manage the various packages. To get up and running developing locally, you need the lerna cli. We're using the latest stable Node.js release.