https://github.com/UXPin/adele Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Changelog * Solutions + By Size + Enterprise + Teams + Compare all + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this organization All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} UXPin / adele Public * Notifications * Fork 107 * Star 777 Adele - Design Systems Repository License MIT license 777 stars 107 forks Star Notifications * Code * Issues 10 * Pull requests 11 * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Security * Insights UXPin/adele This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 21 branches 0 tags Code * Clone HTTPS GitHub CLI [https://github.com/U] Use Git or checkout with SVN using the web URL. [gh repo clone UXPin/] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @nikoandpiko nikoandpiko Updates broken external links (#129) ... 8f93337 Sep 28, 2021 Updates broken external links (#129) 8f93337 Git stats * 375 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time __mocks__ first commit Nov 26, 2017 src Updates broken external links (#129) Sep 28, 2021 testsConfig #96 - Bunch of changes with upgraded packages, components, configurat... Jul 27, 2020 tools Add label and infobox for deprecated DSs (#107) Aug 4, 2020 .babelrc Fix CI build (#102) Jul 27, 2020 .csscomb.json first commit Nov 26, 2017 .eslintignore first commit Nov 26, 2017 .eslintrc.js Adding dedicated subpages for every DS (#104) Aug 3, 2020 .gitignore first commit Nov 26, 2017 .stylelintrc first commit Nov 26, 2017 LICENSE.md Adding License.md Jan 14, 2018 Procfile Adds SSR strategy to the server script (#106) Aug 5, 2020 README.md Use TypeScript instead of Typescript (#113) Nov 6, 2020 app.json Added app.json May 14, 2020 build.sh Routes and other tweaks. Oct 27, 2019 jest.config.js #96 - Bunch of changes with upgraded packages, components, configurat... Jul 27, 2020 now.json now.json fix Feb 17, 2020 package-lock.json Use react-helmet to generate meta tags for individual ds page (#123) Aug 5, 2021 package.json Use react-helmet to generate meta tags for individual ds page (#123) Aug 5, 2021 robots.txt Allowing all robots full access Jan 17, 2018 webpack.config.js Adds SSR strategy to the server script (#106) Aug 5, 2020 webpack.server.config.js Adds SSR strategy to the server script (#106) Aug 5, 2020 View code [ ] Table of Contents Introduction Mission How to use? Installation Contribution File format Formatting Rules Categories Names Data in Categories How to add a new system? How to change data about an existing system? How to add a new category? Tools Build Data Generate Template Re-build Data Contributors Why Adele? Why 'by UXPin'? Thank you! README.md cover Table of Contents * Introduction * Mission * How to use? * Installation * Contribution + File Format + Formatting o Categories Names o Data in Categories + How to add new system? + How to change data about an existing system? + How to add a new category? + Tools o Build Data o Generate Template o Re-build Data * Contributors * Why Adele? * Why 'by UXPin'? * Thank you! Introduction Contributors Welcome PRs Welcome MIT License Adele is an open source repository of publicly available design systems and pattern libraries. The creation of a design system and pattern library is a long, if not infinite, process that requires a loooot of decisions. Some of these decisions are about the structure and technology. All are complex and have a huge impact on the future of design and development in our organizations. No wonder that we, design system folks, battle imposter syndrome on daily basis . This is exactly why Adele is here. With dozens (hopefully soon hundreds!) of design systems and pattern libraries analyzed, Adele serves as a reference point for all these decisions that we have to make every day. Check what others do, learn from it and make better decisions about your own system! Mission Adele is on a mission to collect all the data about publicly available design systems and pattern libraries and present it to the community in human (website) and computer (JSON) readable formats. How to use? There are three ways to use Adele: 1. Browse data on Adele's website. Take advantage of multiple filters and get to the right systems in no time [?][?]. 2. Browse data in individual JSON files . 3. Browse data in a common JSON file. Why? Good question. Adele is an open source project, so you're free to take the data and use it in your own projects (contributing back to the design systems community - highly encouraged ). Installation npm install npm run serve Then open http://localhost:8080/ to see the app. Contribution Adele's mission is bold - collecting all the data about design systems / pattern libraries and presenting it to the community in human and computer readable formats. While it was started by a single human being and a single machine (well, except cloud servers), I'm hoping to welcome contributors. What's impossible for a single human might be quite an easy task for a team! You are all welcome to contribute! File format Adele's JSON format is pretty straight-forward. Here's an example of a JSON file for a single system: { "company": { "data": "shopify", "label": "company" }, "system": { "data": "polaris", "deprecated": "no", "url": "https://polaris.shopify.com", "label": "system" }, "repository": { "data": "GitHub", "url": "https://github.com/Shopify/polaris", "label": "repository" }, "codeDepth": { "data": "HTML/CSS/TS", "label": "code depth" }, "components": { "data": "yes", "label": "components" }, "js": { "data": "React", "label": "JS library/framework" }, "ts": { "data": "yes", "label": "TypeScript" }, "webComponents": { "data": "no", "label": "web components" }, "tests": { "data": [ "Jest", "Enzyme" ], "label": "tests" }, "linter": { "data": [ "ESLint", "TSLint" ], "label": "linter" }, "css": { "data": [ "Sass", "postCSS" ], "label": "CSS" }, "cssInjs": { "data": "no", "label": "CSS in JS" }, "designTokens": { "data": "no", "label": "design tokens" }, "bundleManager": { "data": "Webpack", "label": "bundle manager" }, "uiKit": { "data": "Sketch", "url": "https://github.com/Shopify/polaris/releases/download/v1.5.1/Sketch.UI.Kit.zip", "label": "UI kit" }, "brandGuidelines": { "data": "no", "url": "", "label": "brand guidelines" }, "colorPalette": { "data": "yes", "url": "https://polaris.shopify.com/visuals/colors", "label": "color palette" }, "colorNaming": { "data": [ "abstract (e.g. sky)", "natural (e.g. green)" ], "label": "color naming" }, "contrastAnalysis": { "data": "yes", "url": "https://polaris.shopify.com/visuals/colors#section-accessibility", "label": "contrast analysis" }, "typography": { "data": "yes", "url": "https://polaris.shopify.com/visuals/typography#navigation", "label": "typography" }, "icons": { "data": "SVG", "url": "https://polaris.shopify.com/visuals/icons", "label": "icons" }, "space/Grid": { "data": "yes", "url": "https://polaris.shopify.com/components/structure/layout#navigation", "label": "space / grid" }, "illustrations": { "data": "yes", "url": "https://polaris.shopify.com/visuals/illustrations#navigation", "label": "illustration" }, "dataVisualization": { "data": "yes", "url": "https://polaris.shopify.com/visuals/data-visualizations#navigation", "label": "data visualization" }, "animation": { "data": "no", "url": "", "label": "animation" }, "voiceTone": { "data": "yes", "url": "https://polaris.shopify.com/content/product-content", "label": "voice & tone" }, "accessabilityGuidelines": { "data": "yes", "url": "https://polaris.shopify.com/principles/accessibility", "label": "accessability guidelines" }, "designPrinciples": { "data": "yes", "url": "https://polaris.shopify.com/principles/principles", "label": "design principles" }, "websiteDocumentation": { "data": "yes", "url": "https://polaris.shopify.com/components/get-started", "label": "documentation website" }, "codeDocumentation": { "data": "Markdown", "url": "https://github.com/Shopify/polaris/tree/master/src/components/Card", "label": "code documentation" }, "storybook": { "data": "no", "url": "", "label": "storybook" }, "distribution": { "data": "npm", "label": "distribution" } } All the individual systems are connected into a common data.json file. This file is automatically consumed by Adele's website (the table is automatically built based on this JSON). Formatting Rules Categories Names Categories names, for readability sake, should be expressed in a camelCase . Data in Categories Every category has to have two mandatory fields: * data - representing the actual data visible in the table cell and used for all the analyses * label - representing the header visible to users on Adele's website and one optional field: * url - used as a source of a link added to data Here are acceptable types of entries for every field: Field Accepted Types data string, array of strings label string url string, array of strings Using an array in data and url automatically renders a list of links in the table on Adele's website. Note that the order matters. The first string in the data array will get the link from the first string in the url etc. How to add a new system? First of all, thank you . Secondly, the process of adding a new system is really easy: 1. Clone the Adele repo 2. npm run template-build {company-name} - it will automatically generate an empty JSON in the catalog src/data/systems. The file is going to have a name that you mentioned in the CLI (for clarity's sake let's keep it as the company name). If you haven't filled in the name, look for a file called '{creation-date} -new-system.JSON' and change its name to {creation-date}- {company}.JSON. 3. Fill in the empty JSON with the right data. 4. Compile the common data JSON (used by Adele's table on the website) by running npm run data-build. Note: this will update the generated data.json file, so you may see an unexpected diff when you run git status. Don't worry about that! 5. Test the Adele website by running npm run serve (if you don't see your system on the website, make sure you've saved data.json). 6. If everything is a-OK create a pull-request. How to change data about an existing system? Thank you for taking the time to improve Adele's data. The process of changing the data is simple! 1. Clone the Adele repo 2. Find the design system that you want to correct in src/data/ systems. 3. Correct the data. 4. Compile the common data JSON (used by Adele's table on the website) by running npm run data-build. 5. Test Adele website by running npm run serve (if you don't see your system on the website, simply save data.json). 6. If everything is a-OK create a pull-request. How to add a new category? Adele is extendable and you can feel free to add new categories to the table. If you add a new category to any design system's JSON, Adele will add that same category to every system. Note that all the other systems will have 'no data' in the data field for that category. If you can fill it in with the right data - great, if not, don't worry, the community (or I) will take care of it. Follow steps from 'How to change data about an existing system?'. Tools Adele has couple of simple node.js tools aimed at helping with maintaining the whole project. Get to know them below! Build Data npm run data-build - this simple script takes data from individual JSON files and compiles them into one common JSON file. Use it after every operation on data. Order of systems in data.json is based on the date of the creation of the file (automatically added to the files upon creation of the template e.g. 201801171632-dropbox.json). Generate Template npm run template-build {company-name} - this script generates an empty JSON template. Use it whenever you're adding a new system to Adele. If the name of the company consists of more than one word use a hyphen. For example: npm run template-build {ge-digital}. Please mind that the file name is going to have a creation date included e.g. 201801171632-ge-digital.json. Re-build Data npm run data-rebuild {company-name} - if something unexpected happens you can always quickly rebuild the entire data set. Copy the content from data.json in the repo to src/data/data-safety-copy.jSON, delete all the files from src/data/systems and run data-rebuild command. It will automatically recreate all the individual system files. Contributors Feel free to add yourself here if you have contributed to this project * Tali Marcus - the first contributor * Estelle Weyl * Richard Bruskowski * Kyle Gach * Dave Gillhespy * Kaelig Deloumeau-Prigent * Michal Stocki * Victor Valle Juarranz * Waylon Baumgardner * Katie Riker * Marianne Rosvik * Caldis * Kristen Cooke * Bartosz Debicki * Mike Perrotti * Ben Anderson * Pawel Neubauer * Martin Wragg * Chaunce 'Red' Dolan * Pieter Looijmans * Pedro Moreira da Silva * Antidecaf * Allard van Helbergen * Patrick De Young * Chinovian * Laurence Berry * Siddharth Kshetrapal * Cristiano Dalbem * Adam Zerella * Robert Waylon * Matt Felten * Pedro Moreira da Silva * Krissy * Karl Waghorn-Moyce * Siddharth Kshetrapal * [Viljami Salminen]https://github.com/viljamis * [Paulogdm]https://github.com/paulogdm Why Adele? 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 "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!). Thank you Adele! Why 'by UXPin'? Adele was started by Marcin Treder (that's me ) - coding designer, designing coder and CEO at UXPin. Back in 2010, together with my dear co-founders, we started UXPin with the mission of merging design and development. The mission continues to this day! UXPin sponsors Adele and my time spent on it, hence the 'by UXPin' in Adele's header. If you want to say 'thank you ', simply try our app at UXPin.com. And yes, we're pretty good when it comes to design systems tooling . Thank you! I'd like to thank the design systems community ( Design Systems Slack & Clarity Conference) and Alex Pate - the author of the very first repository of systems - Awesome Design Systems. Thank you . About Adele - Design Systems Repository Topics hacktoberfest Resources Readme License MIT license Stars 777 stars Watchers 37 watching Forks 107 forks Releases No releases published Packages 0 No packages published Contributors 56 * @marcintreder * @michalstocki * @mrpiotr-dev * @naohiro-t * @waylonrobert * @talimarcus * @nikoandpiko * @kaelig * @tnir * @yodasw16 * @NicholasBoll + 45 contributors Languages * JavaScript 98.4% * HTML 1.6% Footer (c) 2022 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.