DESIGN
DESIGN SYSTEMS
CODE TO DESIGN
INTEGRATIONS
USE CASES
OVERVIEW
TESTIMONIALS
PRODUCT
LEARN| Company | System | repository | code depth | components | JS library/framework | typescript | web components | tests | linter | CSS | CSS in JS | design tokens | bundle manager | UI kit | brand guidelines | color palette | color naming | contrast analysis | typography | icons | space / grid | illustration | data visualization | animation | voice & tone | accessibility guidelines | design principles | documentation website | code documentation | storybook | distribution | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Placeholder | Placeholder | |||||||||||||||||||||||||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | hound scss lint | Sass | no | no | no | no | no | natural (e.g. red, light red) | no | no | no | no | no | no | no | no | no |
| ||||||||
Placeholder | HTML/CSS/JS | yes | Vanilla | no | no | no |
| Sass | no | no | Gulp |
| no | no | no | no | no | no | no | no | no | |||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| ESLint | Radium | yes | no | Webpack | no | no | natural (e.g. red_400) | no | no | no | no | no | no | no | no | no |
| ||||||||
Placeholder | HTML/CSS/JS | yes | Vanilla | no | no | Qunit | ESLint | Less | no | no |
| no | natural (e.g. teal) | no | no | no | no |
| ||||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
|
| no | no |
| no | no |
| no | no | no | no | no | no | no |
| ||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| prettier |
| yes | no | no | no | no | natural (e.g. red0) | no | no | no | no | no | no | no | no | no | no | npm | |||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no |
| Sass | no | json | Webpack | no | natural (e.g. blue) | no | no | npm | ||||||||||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | no | stlylus | no | no | Gulp | no | no | natural (e.g. green primary) | no | no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | Jest | ESLint | postCSS | no | no | Webpack | no | no |
| no | no | no | no | no | no | yes |
| ||||||||||
Placeholder | no | visual only | no | no | no | no | no | no | no | no | no | no | no | hex, rgb, cmyk, pms only | no | no | no | no | no | no | ||||||||||||
Placeholder | HTML/CSS/JS | yes | jQuery | no | no |
| no | Sass | no | no | Gulp | no | natural (e.g. yellow) | no | no | no | no | no | no | no | npm | |||||||||||
Placeholder | no | CSS | yes | no | no | no | no | no | CSS | no | no | no |
| no | no | no | no | no | no | no | ||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| ESLint |
| yes | Webpack |
| no | natural (e.g. red_10) | no | no | no | no | no | no | no |
| |||||||||||
Placeholder | no | HTML/CSS/JS | yes | Jade | no | yes | no | no | CSS | no | no | no | no | no | natural (e.g. blue-900) | no | no | no | no | no | no | no | no | no | ||||||||
Placeholder | no | visual only | no | no | no | no | no | no | no | no | no | no | no | abstract (e.g. cloud) | no | no | no | no | no | no | no | no | no | no | ||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | no | Sass | no | yaml | Webpack | no | no | natual (e.g. orange-dark) | no | no | no | no | no | no | no | no |
| |||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | no | Sass | no | no | Grunt | no |
| no | no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | HTML/CSS/JS | yes | Vanilla | no | no | Jest |
| postCSS | no | no | rollup | no | no |
| no | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | no | HTML/CSS | yes | no | no | no | no | no | CSS | no | no | no | no | no | natural (e.g. yellow) | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | HTML/CSS | no | no | no | no | no | Sass | no | no | Gulp | no | no | specific (e.g. $button-colour) | no | no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | no | HTML/CSS | yes | no | no | no | no | no | CSS | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no | ||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | Jest |
|
| no | no |
| no |
| no | no | no | npm | |||||||||||||||
Placeholder | CSS | yes | no | no | no | no | no | Sass | no | no | no | no | no | no | no | no | no | no | no | no | no |
| ||||||||||
Placeholder | HTML/CSS/JS | yes | jQuery | no | no | Jasmine | jshint | Sass | no | no | Grunt | no | no | specific (e.g. $feature-copy) | no | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| ESLint | Fela | yes | no | no | no | no | abstract (e.g. grass) | no | no | no | no | no | no | no | no | no | no |
| |||||||
Placeholder | Bitbucket | HTML/CSS/JS | yes | any | no | no | no | no | Sass | no |
| no | no |
| no | no | no | Markdown | no |
| ||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
| Sass | no | no | Webpack |
| no | no | no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | HTML/CSS/JS | yes | Vanilla | no | yes | no | no | CSS | no | no | Gulp | no | no | branded and natural (e.g.NIBlueBrush) | no | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no | ESLint | Sass | no | no | Gulp | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no | npm | |||||
Placeholder | HTML/CSS/JS | yes | React | no | no | Jest | prettier |
| yes | no | no | no | no |
| no | no | no | no | no | no | yes |
| ||||||||||
Placeholder | HTML/CSS/JS | yes |
| no | no |
|
|
| no | no |
| no | no | no | no | no | no | no | no | no | no | no |
| |||||||||
Placeholder | HTML/CSS/JS | yes | Vanilla | no | no | proprietary | ESLint | Sass | no | no |
| branded (e.g. audi black) | no | no | no | no | no |
| ||||||||||||||
Placeholder | HTML/CSS | yes | no | no | no |
| no | Sass | no | no | no |
| no | no | no | no | no | no | npm | |||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
|
| no | no | Webpack | no | no | hex only | no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | HTML/CSS/TS | yes | React | yes | no |
|
|
| no |
|
| no |
| no | npm | |||||||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no | no | Sass | no | no | Webpack | no | natural (e.g. color-blue-500 | no | no | no | no | no | no | no | npm | |||||||||||
Placeholder | HTML/CSS/JS | yes | jQuery | no | no | no |
| Sass | no | no | Grunt | no | natural (e.g. green-dark) | no | no | no | no | no | no | npm | ||||||||||||
Placeholder | HTML/CSS/TS | yes | React | yes | no |
|
|
| yes | no | Webpack |
| no | no | ||||||||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| ESLint | Sass | no |
| gulp | no |
| no | no | npm | ||||||||||||||||
Placeholder | HTML/CSS/JS | yes |
| no | no |
| ESLint | Sass | no | no | Gulp | no | specific (e.g. text-01) | no | no | no | no | npm | ||||||||||||||
Placeholder | HTML/CSS/JS | yes | Polymer | no | yes |
| no | Sass | no | no | Gulp | no |
| no | no | no | no | no | Bower | |||||||||||||
Placeholder | HTML/CSS/JS | yes |
| yes | no |
|
|
| no | yes |
| no | natural (e.g. Red Medium) | no | no | no |
| |||||||||||||||
Placeholder | HTML/CSS/JS | yes | no | no | Jest | ESLint | sass | no | no | Webpack | no | no | natural | no | no | no | no | Markdown | no data |
| ||||||||||||
Placeholder | HTML/CSS/JS | yes | yes | no | no | no | no |
| no | no |
| natural (e.g. blue, gray, white) | no | no | no | no | no | no | npm | |||||||||||||
Placeholder | no | visual only | no | no | no | no | no | no | CSS | no | no | no | no | no | no | no | no | yes | no | no | no | |||||||||||
Placeholder | HTML/CSS/JS | yes | jQuery | no | no | no | ESlint, Sasslint | Sass | no | no | Gulp | no | natural (e.g. blue primary) | no | no | no | ||||||||||||||||
Placeholder | HTML/CSS/JS | yes |
| yes | no |
| ESLint | Less | no | no | Webpack | no | abstract (e.g. Sunset Orange) | no | no | no | npm | |||||||||||||||
Placeholder | private | HTML/CSS/JS | yes | React | no | no | yes | ESLint | Sass | no data |
| no data | Sketch | no |
| no | Icon Font | no | no | no | no | no data | no | no data | ||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | jasmine | ESLint | Sass | no | no | Gulp | no | no |
| no | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | HTML/CSS/JS | yes |
| no | no |
| ESLint | Sass | no | no | webpack | no | no |
| no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | private | HTML/CSS | yes | no | no | no | no data | no data | Less | no | no | no data | Sketch | no |
| no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | harmony | no data | no data | yes | no data | no data | no data | no data | no data | no data | no data | no data | no data | no data |
| no | no | no | no | no | no | no data | ||||||||||
Placeholder | HTML/CSS/JS | yes |
| no | no |
|
|
| no | no | Webpack | no | no | generig (e.g. color-1) | no | no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | HTML/CSS | yes | React | no | no | AVA | StyleLint | Sass | no | PostCSS | no | no | natural (e.g. gray-300) | no | no | no | no | no | no | no | no | no | ||||||||||
Placeholder | no data | no data | yes | React | no | no |
| ESLint | Sass | no data |
| yes | Sketch | no data | abstract (e.g. calypso) | no data | no data | no data | no data | no data | ||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | yes |
| ESLint | Sass | no | yes | Webpack | Sketch | natural (e.g. red, light red) | no | no | no | no |
| ||||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| ESLint | Sass | no | no |
| no data | no | Natural (e.g. $mintPrimary) | no | no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | no | Sass | no | no | no | no | no |
| no | no | no | no | no | no | no | no | no | no | no | no data | ||||||
Placeholder | HTML/CSS | yes | no | no | no | no data | StyleLint | Less | no | no | Gulp | no | no | natural (e.g. orange) | no | no | no | no | no | no | no | no | no | no | npm | |||||||
Placeholder | GitHub | HTML/CSS/JS | yes | React | no | no | no data | no data | no data | no data | no data | no data | no data | no data |
| no | no data | Icon Font | no | no | no | no | no data | no data | no data | |||||||
Placeholder | GitHub | HTML/CSS/JS | yes | no data | no data | no data | no data | no data | no data | no data | no data | no data | no data | no data | specific (e.g. success color) | no | no | no | no data | no data | no data | |||||||||||
Placeholder | GitHub | HTML/CSS | yes | no | no | no data | no data | no data | no data | no data | no data | no data | no data | no | natural (e.g. blue) | no | no | no | no | no data | no data | no data | no data | |||||||||
Placeholder | HTML/CSS | yes | no | no | no | no data | no data | Sass | no | no | no data | no data | no | abstract (e.g. event cyan) | no | no | no | no | no | no | no | no | no data | no data | no data | |||||||
Placeholder | no data | HTML/CSS/JS | yes | React | no data | no data | no data | no data | Sass | no data | no data | no data | no data | no |
| no | no | no data | no | no | no | no | no data | no data | npm | |||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no | scsslint | Sass | no | no | Grunt | no |
| no | no | no | no | no |
| |||||||||||||
Placeholder | HTML/CSS/JS | yes | Angular | yes | no |
| TSLint |
| no | no | Webpack | no | natural (e.g. red) | no | no | no | no | no | no | npm | ||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no | no | Less | no | no | Webpack | no |
| no | no | no | no | no | no | no | npm | |||||||||||
Placeholder | HTML/CSS/JS/SWIFT | yes | React | yes | no |
| TSLint | Sass | no | no | Webpack | Adobe XD | no |
| no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | GitHub | HTML/CSS/JS | yes | React | no data | no data | no data | no data | no data | no data | no data | Webpack | no | no |
| no | no | no | no | no | no data | yes |
| |||||||||
Placeholder | no | HTML/CSS/JS | yes | Vue | no | no | no | no |
| yes | no |
| no | natural pattern | no | no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | no data | HTML/CSS/JS/SWIFT | yes | React | no data | no | no data | no data | Sass | yes | Sass | no data | no data |
| no | no | no | no | no | no | no | no data | no data | npm | ||||||||
Placeholder | HTML/CSS/JS | yes | React | yes | no |
| ESLint |
| no data | no data | no | no | Abstract (e.g. Peach) | no | no | no | no | no data | ||||||||||||||
Placeholder | HTML/CSS/JS | Vue | no | no |
|
| Sass | no | Webpack | natural (e.g. green-500) | npm | |||||||||||||||||||||
Placeholder | no data | HTML/CSS/JS | yes | React | no data | no data | no data | no data | Sass | no | no data | no data | Sketch |
| no | no | no data | no data | no data | |||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
| Prettier | Less | no | no | Webpack | no |
| no | no | no | no | no |
| |||||||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
|
| yes | no data | Webpack | no | no |
| no | no | no | no | no | no | no | no | Markdown | no | npm | |||||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
| postCSS | no | no | Webpack | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no | no |
| ||||
Placeholder | HTML/CSS/JS | yes | React | no | no |
|
| CSS | no | no | Webpack | no | no | natural (e.g. dark_indigo) | no | no | no | no | no | no | no | no | npm | |||||||||
Placeholder | HTML/CSS/JS | yes |
| no | no |
| no | Sass | no | no | no | semantic | no | no | no | no data | npm | |||||||||||||||
Placeholder | HTML/CSS/JS | yes | Node | no | no | no |
| Sass | no | json | Webpack | no | natural (e.g. blue) | no | no | no | no | no | no | no | npm | |||||||||||
Placeholder | HTML/CSS/JS | yes | React | yes | no |
| no | no | styled-components | json |
| no | no | no | natural (e.g. blue) | no | no | no | no | no | no | no | no | npm | ||||||||
Placeholder | HTML/CSS/JS | yes | React | no | no | no |
| Tachyons | no | json | semantic (e.g. $bg-action-primary) | no | no | no | no | no | no | no |
| |||||||||||||
Placeholder | HTML/CSS/JS | yes | no | no | no | no | no | yes | no | no | no | no | no | no | no | no | no | no | no | no | ||||||||||||
Placeholder | HTML/CSS/JS | yes | React | yes | no | jest | TSLint | emotion | yes | no | Webpack | no | yes | no | no | no | no | no | npm | |||||||||||||
Placeholder | HTML/CSS | yes | no | no | no | no | sass-lint | Sass | no | no | no | yes | no | no | no | no | no | no | npm | |||||||||||||
Placeholder | GitHub | HTML/CSS/JS | yes | React | yes | no | Visual Regression |
| Sass | no | json | yes | Sketch | no | yes | Natural | yes | yes | SVG | yes | no | no | no | no | no | yes | yes | yes |
| |||
Placeholder | HTML/CSS/JS | yes | Angular | yes | no | Jasmine | TSLint | CSS | no | no | Webpack | yes | no | no | no | no | no | yes | no | yes | yes | no | npm | |||||||||
Placeholder | Private | HTML/CSS/JS | yes |
| yes | yes |
|
| Sass | no |
|
| specific (e.g. success color) | no | no | no | no | |||||||||||||||
Placeholder | HTML/CSS/JS | yes | jQuery | no | yes | yes | yes | SASS | no | no | Gulp | Adobe XD / SVG | no | yes | no | no | no | no | no | no | npm | |||||||||||
Placeholder | Private GitHub | HTML/CSS/JS | yes | no | yes | no | no |
| Sass | no | no yet |
| no | no | no | no | no yet | |||||||||||||||
Placeholder | JS | yes | no | no | yes | no | no | no | yes | yes | Rollup | no | no | yes |
| yes | yes | SVG | yes | yes | no | no | no | yes | no | no | npm | |||||
Placeholder | Private | HTML/CSS/JS | yes | React | yes | no |
|
|
| no |
|
| Sketch |
| no | no | no | no | no | no |
| |||||||||||
Placeholder | no data | yes | React | no data | no data |
|
| Sass | no data | yes | no data | no data | no data | natural (e.g. neutral-500) | no data | no data | no data | no data | no data | no data | no data | yes | ||||||||||
Placeholder | HTML/CSS/JS | yes | yes | no | no | yes | yes | yes | yes | yes | Webpack | Sketch | no data | natural | no | no | no | no | no | no | no | npm | ||||||||||
Placeholder | HTML/CSS/JS/TS | yes | yes | yes |
|
|
| no | no |
|
| no | no | no | ||||||||||||||||||
Placeholder | HTML/CSS | yes | no | no | no | aXe (a11y) |
| SASS | no | no | no | no | no | no | yes | no | yes | no | ||||||||||||||
Placeholder | private | HTML/CSS/TS | yes |
| yes | not yet | Jest | ESLint | Vanilla | emotion | no | Webpack | no | not yet | natural | no | no | no | no | no | no | not yet | no | GitHub Packages | ||||||||
Placeholder | HTML/CSS/JS | yes | Angular | yes | no |
|
| Sass | no | no | Webpack |
| no | no | no | no | no | |||||||||||||||
Placeholder | HTML/CSS/TS | yes | React | yes | no |
| ESLint | no | Emotion |
| Rollup | specific (e.g. color-background-error) | no | no | ||||||||||||||||||
Placeholder | no | HTML/CSS/JS | yes | React | yes | no | Jest |
| tailwindcss | no | yes (defined in tailwind.config) | Rollup | no | natural (e.g. blue-500) | no | no | no | no | no | WCAG 2.1 Level AA | no | no | yarn monorepo | |||||||||
Placeholder | HTML/CSS/JS/SWIFT/KOTLIN | yes | React | yes | no |
|
| no data | yes | yes | no data | yes | no data | no data | no | no | no | no | no | |||||||||||||
Placeholder | no | HTML/CSS/JS | yes | Blazor | yes | yes | no | no | style-components | no | yes | no data | yes | specific | yes | no | no | no |
| |||||||||||||
Placeholder |
| yes | React | no | no | no data |
| Sass | no | yes | no data | no | no | natural | no data | no | no | no | no | no |
| |||||||||||
company | system | |||||||||||||||||||||||||||||||
DOWNLOAD OUR LATEST REPORT
Download our free report on how leaders and design system contributors from enterprise companies like Caterpillar, PayPal, or Weir Group build and grow design systems. Learn key lessons on design system maturity and operations.
Adele
The repository of publicly available design systems and pattern librarieswhy adele?
Adele Goldberg. The Icon.
No. Adele – the Design Systems Repository, is not named after Adele – the singer. This is a tribute to one of the most important computer scientists focused on graphic user interfaces, design patterns and object-oriented programming – Adele Goldberg.
Adele Goldberg worked at XEROX PARC in the 70s and managed the System Concepts Laboratory where, together with Alan Kay and others, she developed Smalltalk-80 – an object-oriented, dynamically typed programming language that was meant to power the "human-computer symbiosis".
Needless to say, SmallTalk also pioneered many concepts important to all modern design systems. Objects in Smalltalk were easily transferable between applications and customizable. Smalltalk also served as the foundation of PARC's work on graphically based user interfaces (many GUI concepts have been developed by Adele Goldberg and her group!).
do you need help with your system?
Evangelize Design System with a Free Template!
40+ Slides ready for action. Perfect for team and stakeholder presentation. Available as a powerpoint and keynote deck.
Learn more & downloadUXPin: Prototype and Manage Your Design System
Join thousands of companies (including PayPal, Sapient and HBO) and optimize your design process with UXPin.
Start a free trial now!