{"id":13394177,"url":"https://github.com/UXPin/adele","last_synced_at":"2025-03-13T20:31:21.044Z","repository":{"id":38993400,"uuid":"112067062","full_name":"UXPin/adele","owner":"UXPin","description":"Adele - Design Systems Repository","archived":false,"fork":false,"pushed_at":"2024-06-11T08:22:11.000Z","size":3579,"stargazers_count":856,"open_issues_count":26,"forks_count":107,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-08-04T22:09:33.383Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UXPin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-26T08:23:28.000Z","updated_at":"2024-08-04T22:09:36.903Z","dependencies_parsed_at":"2023-02-08T11:01:06.593Z","dependency_job_id":"6193805a-183a-4e59-a7d5-03e83daae48c","html_url":"https://github.com/UXPin/adele","commit_stats":null,"previous_names":["marcintreder/adele"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXPin%2Fadele","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXPin%2Fadele/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXPin%2Fadele/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UXPin%2Fadele/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UXPin","download_url":"https://codeload.github.com/UXPin/adele/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478049,"owners_count":20297183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-07-30T17:01:11.481Z","updated_at":"2025-03-13T20:31:20.617Z","avatar_url":"https://github.com/UXPin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![cover](src/assets/og_facebook.png)\n\n# Table of Contents\n\n* [Introduction](#introduction)\n* [Mission](#mission)\n* [How to use?](#how-to-use)\n* [Installation](#installation)\n* [Contribution](#contribution)\n * [File Format](#file-format)\n * [Formatting](#formatting-rules)\n * [Categories Names](#categories-names)\n * [Data in Categories](#data-in-categories)\n * [How to add new system?](#how-to-add)\n * [How to change data about an existing system?](#how-to-change)\n * [How to add a new category?](#how-to-add-category)\n * [Tools](#tools)\n * [Build Data](#build-data)\n * [Generate Template](#generate-template)\n * [Re-build Data](#re-build-data)\n* [Contributors](#contributors)\n* [Why Adele?](#why-adele)\n* [Why 'by UXPin'?](#why-uxpin)\n* [Thank you!](#thank-you)\n\n# Introduction\n\n\u003ca id='introduction'\u003e\n\n\u003c/a\u003e\n\n![Contributors Welcome](https://img.shields.io/badge/contributors-welcome-brightgreen.svg)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)\n![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg)\n\nAdele is an open source repository of publicly available design systems and pattern libraries.\n\nThe creation of a design system and pattern library is a long, if not infinite, process that\nrequires a loooot of decisions. _Some_ of these decisions are about the structure and technology.\nAll are complex and have a huge impact on the future of design and development in our organizations.\nNo wonder that we, design system folks, battle imposter syndrome on daily basis 😱.\n\nThis is exactly why Adele is here. With dozens (hopefully soon hundreds!) of design systems and\npattern libraries analyzed, Adele serves as a reference point for all these decisions that we have\nto make every day. Check what others do, learn from it and make better decisions about your own\nsystem! πŸš€\n\n# Mission\n\n\u003ca id='mission'\u003e\n\n\u003c/a\u003e\n\nAdele is on a mission to collect _all_ the data about publicly available design systems and pattern\nlibraries and present it to the community in human (website) and computer (JSON) readable formats.\n\n# How to use?\n\n\u003ca id='how-to-use'\u003e\n\n\u003c/a\u003e\n\nThere are three ways to use Adele:\n\n1. Browse data on [Adele's website](https://adele.uxpin.com). Take advantage of multiple filters and\n get to the right systems in no time ⚑️.\n2. Browse data in\n [individual JSON files](https://github.com/uxpin/adele/tree/master/src/data/systems) πŸ€–.\n3. Browse data in\n [a common JSON file](https://github.com/uxpin/adele/blob/master/src/data/data.json).\n _Why?_ Good question. Adele is an open source project, so you're free to take the data and use it\n in your own projects (contributing back to the design systems community - highly encouraged πŸ‘).\n\n# Installation\n```\nnpm install\nnpm run serve\n```\n\nThen open http://localhost:8080/ to see the app.\n\n# Contribution\n\n\u003ca id='contribution'\u003e\n\n\u003c/a\u003e\n\nAdele's mission is bold – collecting all the data about design systems / pattern libraries and\npresenting it to the community in human and computer readable formats. While it was started by a\nsingle human being and a single machine (well, except cloud servers), I'm hoping to welcome\ncontributors. What's impossible for a single human might be quite an easy task for a team! You are\nall welcome to contribute! πŸ™\n\n## File format\n\n\u003ca id='file-format'\u003e\n\n\u003c/a\u003e\n\nAdele's JSON format is pretty straight-forward. Here's an example of a JSON file for a single\nsystem:\n\n```\n{\n \"company\": {\n \"data\": \"shopify\",\n \"label\": \"company\"\n },\n \"system\": {\n \"data\": \"polaris\",\n \"deprecated\": \"no\",\n \"url\": \"https://polaris.shopify.com\",\n \"label\": \"system\"\n },\n \"repository\": {\n \"data\": \"GitHub\",\n \"url\": \"https://github.com/Shopify/polaris\",\n \"label\": \"repository\"\n },\n \"codeDepth\": {\n \"data\": \"HTML/CSS/TS\",\n \"label\": \"code depth\"\n },\n \"components\": {\n \"data\": \"yes\",\n \"label\": \"components\"\n },\n \"js\": {\n \"data\": \"React\",\n \"label\": \"JS library/framework\"\n },\n \"ts\": {\n \"data\": \"yes\",\n \"label\": \"TypeScript\"\n },\n \"webComponents\": {\n \"data\": \"no\",\n \"label\": \"web components\"\n },\n \"tests\": {\n \"data\": [\n \"Jest\",\n \"Enzyme\"\n ],\n \"label\": \"tests\"\n },\n \"linter\": {\n \"data\": [\n \"ESLint\",\n \"TSLint\"\n ],\n \"label\": \"linter\"\n },\n \"css\": {\n \"data\": [\n \"Sass\",\n \"postCSS\"\n ],\n \"label\": \"CSS\"\n },\n \"cssInjs\": {\n \"data\": \"no\",\n \"label\": \"CSS in JS\"\n },\n \"designTokens\": {\n \"data\": \"no\",\n \"label\": \"design tokens\"\n },\n \"bundleManager\": {\n \"data\": \"Webpack\",\n \"label\": \"bundle manager\"\n },\n \"uiKit\": {\n \"data\": \"Sketch\",\n \"url\": \"https://github.com/Shopify/polaris/releases/download/v1.5.1/Sketch.UI.Kit.zip\",\n \"label\": \"UI kit\"\n },\n \"brandGuidelines\": {\n \"data\": \"no\",\n \"url\": \"\",\n \"label\": \"brand guidelines\"\n },\n \"colorPalette\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/visuals/colors\",\n \"label\": \"color palette\"\n },\n \"colorNaming\": {\n \"data\": [\n \"abstract (e.g. sky)\",\n \"natural (e.g. green)\"\n ],\n \"label\": \"color naming\"\n },\n \"contrastAnalysis\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/visuals/colors#section-accessibility\",\n \"label\": \"contrast analysis\"\n },\n \"typography\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/visuals/typography#navigation\",\n \"label\": \"typography\"\n },\n \"icons\": {\n \"data\": \"SVG\",\n \"url\": \"https://polaris.shopify.com/visuals/icons\",\n \"label\": \"icons\"\n },\n \"space/Grid\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/components/structure/layout#navigation\",\n \"label\": \"space / grid\"\n },\n \"illustrations\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/visuals/illustrations#navigation\",\n \"label\": \"illustration\"\n },\n \"dataVisualization\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/visuals/data-visualizations#navigation\",\n \"label\": \"data visualization\"\n },\n \"animation\": {\n \"data\": \"no\",\n \"url\": \"\",\n \"label\": \"animation\"\n },\n \"voiceTone\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/content/product-content\",\n \"label\": \"voice \u0026 tone\"\n },\n \"accessabilityGuidelines\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/principles/accessibility\",\n \"label\": \"accessability guidelines\"\n },\n \"designPrinciples\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/principles/principles\",\n \"label\": \"design principles\"\n },\n \"websiteDocumentation\": {\n \"data\": \"yes\",\n \"url\": \"https://polaris.shopify.com/components/get-started\",\n \"label\": \"documentation website\"\n },\n \"codeDocumentation\": {\n \"data\": \"Markdown\",\n \"url\": \"https://github.com/Shopify/polaris/tree/master/src/components/Card\",\n \"label\": \"code documentation\"\n },\n \"storybook\": {\n \"data\": \"no\",\n \"url\": \"\",\n \"label\": \"storybook\"\n },\n \"distribution\": {\n \"data\": \"npm\",\n \"label\": \"distribution\"\n }\n}\n```\n\nAll the individual systems are connected into a common data.json file. This file is automatically\nconsumed by Adele's website (the table is automatically built based on this JSON).\n\n## Formatting Rules\n\n\u003ca id='formating-rules'\u003e\n\n\u003c/a\u003e\n\n### Categories Names\n\n\u003ca id='categories-names'\u003e\n\n\u003c/a\u003e\n\nCategories names, for readability sake, should be expressed in a camelCase 🐫.\n\n### Data in Categories\n\n\u003ca id='data-in-categories'\u003e\n\n\u003c/a\u003e\n\nEvery category has to have two mandatory fields:\n\n* `data` – representing the actual data visible in the table cell and used for all the analyses\n* `label` – representing the header visible to users on Adele's website and one optional field:\n* `url` – used as a source of a link added to `data`\n\nHere are acceptable types of entries for every field:\n\n| Field | Accepted Types |\n| ----- | ------------------------ |\n| data | string, array of strings |\n| label | string |\n| url | string, array of strings |\n\nUsing an `array` in data and url automatically renders a list of links in the table on Adele's\nwebsite. **Note that the order matters.** The first string in the `data` array will get the link\nfrom the first string in the `url` etc.\n\n## How to add a new system?\n\n\u003ca id='how-to-add'\u003e\n\n\u003c/a\u003e\n\nFirst of all, thank you πŸ‘ πŸ™. Secondly, the process of adding a new system is really easy:\n\n1. Clone the Adele repo\n2. `npm run template-build {company-name}` – it will automatically generate an empty JSON in the\n catalog src/data/systems. The file is going to have a name that you mentioned in the CLI (for\n clarity's sake let's keep it as the company name). If you haven't filled in the name, look for a\n file called '{creation-date}-new-system.JSON' and change its name to {creation-date}-{company}.JSON.\n3. Fill in the empty JSON with the right data.\n4. Compile the common data JSON (used by Adele's table on the website) by running `npm run\n data-build`. **Note: this will update the generated data.json file, so you may see an unexpected\n diff when you run `git status`. Don't worry about that!**\n5. Test the Adele website by running `npm run serve` (if you don't see your system on the website,\n make sure you've saved data.json).\n6. If everything is a-OK create a pull-request.\n\n## How to change data about an existing system?\n\n\u003ca id='how-to-change'\u003e\n\n\u003c/a\u003e\n\nThank you πŸ‘ πŸ™ for taking the time to improve Adele's data. The process of changing the data is\nsimple!\n\n1. Clone the Adele repo\n2. Find the design system that you want to correct in src/data/systems.\n3. Correct the data.\n4. Compile the common data JSON (used by Adele's table on the website) by running `npm run\n data-build`.\n5. Test Adele website by running `npm run serve` (if you don't see your system on the website,\n simply save data.json).\n6. If everything is a-OK create a pull-request.\n\n## How to add a new category?\n\n\u003ca id='how-to-add-category'\u003e\n\n\u003c/a\u003e\n\nAdele is extendable and you can feel free to add new categories to the table. If you add a new\ncategory to any design system's JSON, Adele will add that same category to _every_ system. Note that\nall the other systems will have 'no data' in the data field for that category. If you can fill it in\nwith the right data – great, if not, don't worry, the community (or I) will take care of it.\n\nFollow steps from 'How to change data about an existing system?'.\n\n## Tools\n\n\u003ca id='tools'\u003e\n\n\u003c/a\u003e\n\nAdele has couple of simple node.js tools aimed at helping with maintaining the whole project. Get to\nknow them below!\n\n### Build Data\n\n\u003ca id='build-data'\u003e\n\n\u003c/a\u003e\n\n`npm run data-build` – this simple script takes data from individual JSON files and compiles them\ninto 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`).\n\n### Generate Template\n\n\u003ca id='generate-template'\u003e\n\n\u003c/a\u003e\n\n`npm run template-build {company-name}` – this script generates an empty JSON template. Use it\nwhenever you're adding a new system to Adele.\n\nIf the name of the company consists of more than one word use a hyphen. For example: `npm run\ntemplate-build {ge-digital}`. Please mind that the file name is going to have a creation date included e.g. `201801171632-ge-digital.json`.\n\n### Re-build Data\n\n\u003ca id='re-build-data'\u003e\n\n\u003c/a\u003e\n\n`npm run data-rebuild {company-name}` – if something unexpected happens you can always quickly\nrebuild the entire data set. Copy the content from data.json in the repo to\n`src/data/data-safety-copy.jSON`, delete all the files from `src/data/systems` and run data-rebuild\ncommand. It will automatically recreate all the individual system files.\n\n# Contributors\n\n\u003ca id='contributors'\u003e\n\n\u003c/a\u003e\n\nFeel free to add yourself here if you have contributed to this project πŸ™\n\n* [Tali Marcus](https://github.com/talimarcus) – the first contributor πŸ‘‘\n* [Estelle Weyl](https://github.com/estelle)\n* [Richard Bruskowski](https://github.com/richardbruskowski)\n* [Kyle Gach](https://github.com/kylegach)\n* [Dave Gillhespy](https://github.com/yodasw16)\n* [Kaelig Deloumeau-Prigent](https://github.com/kaelig)\n* [MichaΕ‚ Stocki](https://github.com/michalstocki)\n* [Victor Valle Juarranz](https://github.com/victorvalle)\n* [Waylon Baumgardner](https://github.com/waylonrobert)\n* [Katie Riker](https://github.com/katierik)\n* [Marianne RΓΈsvik](https://github.com/mrosvik)\n* [Caldis](https://github.com/Caldis)\n* [Kristen Cooke](https://github.com/kriscooke)\n* [Bartosz DΔ™bicki](https://github.com/bdebicki)\n* [Mike Perrotti](https://github.com/mperrotti)\n* [Ben Anderson](https://github.com/banderson)\n* [Pawel Neubauer](https://github.com/bauerpl)\n* [Martin Wragg](https://github.com/mdwragg)\n* [Chaunce 'Red' Dolan](https://github.com/reddolan)\n* [Pieter Looijmans](https://github.com/pieterstudyportals)\n* [Pedro Moreira da Silva](https://github.com/pedroms)\n* [Antidecaf](https://github.com/antidecaf)\n* [Allard van Helbergen](https://github.com/allardvanhelbergen)\n* [Patrick De Young](https://github.com/pattyde)\n* [Chinovian](https://github.com/chinovian)\n* [Laurence Berry](https://github.com/laurenceberry)\n* [Siddharth Kshetrapal](https://github.com/siddharthkp)\n* [Cristiano Dalbem](https://github.com/cmdalbem)\n* [Adam Zerella](https://github.com/adamzerella)\n* [Robert Waylon](https://github.com/waylonrobert)\n* [Matt Felten](https://github.com/mattfelten)\n* [Pedro Moreira da Silva](https://github.com/pedroms)\n* [Krissy](https://github.com/singida)\n* [Karl Waghorn-Moyce](https://github.com/kwm14)\n* [Siddharth Kshetrapal](https://github.com/siddharthkp)\n* [Viljami Salminen](https://github.com/viljamis)\n* [Paulogdm](https://github.com/paulogdm)\n* [Phillip Lovelace](https://github.com/pixelflips)\n\n# Why Adele?\n\n\u003ca id='why-adele'\u003e\n\n\u003c/a\u003e\n\nNo. Adele – the Design Systems Repository, is not named after Adele – the singer. This is a tribute\nto one of the most important computer scientists focused on graphic user interfaces, design patterns\nand object-oriented programming – Adele Goldberg. Adele Goldberg worked at XEROX PARC in the 70s and\nmanaged the System Concepts Laboratory where, together with Alan Kay and others, she developed\nSmalltalk-80 – an object-oriented, dynamically typed programming language that was meant to power\n\"human-computer symbiosis\".\n\nNeedless to say, Smalltalk also pioneered many concepts important to all modern design systems.\nObjects in Smalltalk were easily transferable between applications and customizable. Smalltalk also\nserved as the foundation of PARC's work on graphically based user interfaces (many GUI concepts have\nbeen developed by Adele Goldberg and her group!).\n\nThank you Adele!\n\n# Why 'by UXPin'?\n\n\u003ca id='why-uxpin'\u003e\n\n\u003c/a\u003e\n\nAdele was started by Marcin Treder (that's me πŸ‘‹ ) – coding designer, designing coder and CEO at\nUXPin. Back in 2010, together with my dear co-founders, we started UXPin with the mission of\n_merging_ design and development. The mission continues to this day!\n\nUXPin sponsors Adele and my time spent on it, hence the 'by UXPin' in Adele's header.\n\nIf you want to say 'thank you πŸ™', simply try our app at [UXPin.com](http://uxpin.com). And yes,\nwe're pretty good when it comes to design systems tooling πŸ’₯.\n\n# Thank you!\n\n\u003ca id='thank-you'\u003e\n\n\u003c/a\u003e\n\nI'd like to thank the design systems community (πŸ‘‹\n[Design Systems Slack](http://designsystems.herokuapp.com/) \u0026\n[Clarity Conference](https://www.clarityconf.com/)) and Alex Pate – the author of the very first\nrepository of systems –\n[Awesome Design Systems](https://github.com/alexpate/awesome-design-systems). Thank you πŸ™Œ.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUXPin%2Fadele","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUXPin%2Fadele","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUXPin%2Fadele/lists"}