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 | |||||||||||||||||||||||||||||||
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!