{"id":29790986,"url":"https://github.com/metabrainz/design-system","last_synced_at":"2025-08-28T06:18:56.709Z","repository":{"id":29270586,"uuid":"120982896","full_name":"metabrainz/design-system","owner":"metabrainz","description":"A Storybook project for UI development of React components for the MetaBrainz projects ","archived":false,"fork":false,"pushed_at":"2025-07-22T10:24:48.000Z","size":96542,"stargazers_count":28,"open_issues_count":1,"forks_count":10,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-07-28T00:21:39.931Z","etag":null,"topics":["metabrainz","musicbrainz","react","storybook","ui-components"],"latest_commit_sha":null,"homepage":"https://metabrainz.github.io/design-system","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metabrainz.png","metadata":{"funding":{"custom":["https://metabrainz.org/donate"],"github":["metabrainz"]},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2018-02-10T04:09:02.000Z","updated_at":"2025-06-25T14:38:08.000Z","dependencies_parsed_at":"2023-02-10T05:45:49.743Z","dependency_job_id":"a68c4233-d4ab-4f56-b024-4d789b3ca6bd","html_url":"https://github.com/metabrainz/design-system","commit_stats":{"total_commits":284,"total_committers":11,"mean_commits":"25.818181818181817","dds":0.6725352112676056,"last_synced_commit":"ad1ec902da20679699e449d72ce1d506ef05c0fb"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/metabrainz/design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabrainz%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabrainz%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabrainz%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabrainz%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metabrainz","download_url":"https://codeload.github.com/metabrainz/design-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabrainz%2Fdesign-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272452906,"owners_count":24937467,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["metabrainz","musicbrainz","react","storybook","ui-components"],"created_at":"2025-07-28T00:13:29.178Z","updated_at":"2025-08-28T06:18:56.693Z","avatar_url":"https://github.com/metabrainz.png","language":"JavaScript","funding_links":["https://metabrainz.org/donate","https://github.com/sponsors/metabrainz"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"./brand/logos/MetaBrainz/SVG/MetaBrainz_logo_square.svg\" alt=\"MetaBrainz\" title=\"MetaBrainz\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/MusicBrainz/SVG/MusicBrainz_logo_square.svg\" alt=\"MusicBrainz\" title=\"MusicBrainz\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/ListenBrainz/SVG/ListenBrainz_logo_square.svg\" alt=\"ListenBrainz\" title=\"ListenBrainz\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/ListenBrainz Local/SVG/ListenBrainz_Local_logo_square.svg\" alt=\"ListenBrainz Local\" title=\"ListenBrainz Local\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/BookBrainz/SVG/BookBrainz_logo_square.svg\" alt=\"BookBrainz\" title=\"BookBrainz\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/CritiqueBrainz/SVG/CritiqueBrainz_logo_square.svg\" alt=\"CritiqueBrainz\" title=\"CritiqueBrainz\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/Picard/SVG/Picard_logo_square.svg\" alt=\"Picard\" title=\"Picard\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/Cover Art Archive/SVG/CoverArtArchive_logo_square.svg\" alt=\"CoverArtArchive\" title=\"CoverArtArchive\" width=\"9%\"\u003e\n  \u003cimg src=\"./brand/logos/MetaBrainz Community/SVG/MetaBrainz_Community_logo_square.svg\" alt=\"MetaBrainz Community\" title=\"MetaBrainz Community\" width=\"9%\"\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003eMetaBrainz Design System\u003c/h4\u003e\n      \n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e •\n  \u003ca href=\"#guidelines\"\u003eGuidelines\u003c/a\u003e •\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e •\n  \u003ca href=\"#issues\"\u003eIssues\u003c/a\u003e •\n  \u003ca href=\"#support\"\u003eSupport\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## About\n\nThis design system is a living, breathing document that contains all of the building blocks (React components, colors, icons, layout, etc) of the MetaBrainz projects. It aims to be single source of truth for developers and designers. Still a work in progress, always will be. \n\n## Quick Links\n\n- [Logo folder](./brand/logos)\n- [Storybook project](https://metabrainz.github.io/design-system/)\n- Figma mockups: [MetaBrainz](https://www.figma.com/file/L0qNv3z5vSkNDoiX7BzaY5/MetaBrainz-redesign), [MusicBrainz](https://www.figma.com/file/ln8XiFLit634KC3YkUW2RS/MusicBrainz-redesign), [CritiqueBrainz](https://www.figma.com/file/nSqrbsMcVARmj52kyXYqwb/CritiqueBrainz-redesign), [ListenBrainz](https://www.figma.com/file/YRbCOtFHBez8XmMdCKbGta/ListenBrainz-redesign), [ListenBrainz App](https://www.figma.com/file/tFLTQiq7QlA1oGRTJVtXml/ListenBrainz-Android)\n- [Marketing/Comms request form](https://docs.google.com/forms/d/e/1FAIpQLSdX2824Mv-VW9x5LlX26t669y1Ft5u5xX1l6qmYSNaIz_xbQA/viewform?usp=sharing)\n\n## Guidelines\n\n- [Design](./guidelines/design-guidelines.md)\n- [Components](./guidelines/component-usage.md)\n- [Contributing](./guidelines/component-usage.md)\n- [Logos](./guidelines/design-guidelines.md)\n- [Writing Styleguide](./guidelines/style-guidelines.md)\n\n## Tech stack\n\nBuilding components\n\n- 📚 [Storybook](https://storybook.js.org) for UI component development and auto-generated docs\n- ⚛️ [React](https://reactjs.org/) declarative component-centric UI\n\nMaintaining the system\n\n- 📦 [NPM](https://www.npmjs.com/) for packaging and distribution\n- 🚥 [GitHub Actions](https://docs.github.com/en/actions/automating-builds-and-tests/about-continuous-integration) Continuous integration\n\n## Why\n\nThe MetaBrainz design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with MetaBrainz's design patterns.\n\n#### What we're doing\n\n- Build and maintain a design system in the open\n- Share UI components between multiple apps\n- Welcome contributors of all levels and backgrounds\n\n#### What we're not doing\n\n- Rewrite all new components from scratch\n- Overhaul the visual design of components\n- Typescript (the consumer apps don't use it)\n- Compete with more general design systems like ANT or Material.\n\n## Install\n\n```bash\nyarn add @metabrainz/design-system\n```\nor\n```bash\nnpm install --save @metabrainz/design-system\n```\n\nEverytime a GitHub release is made, a new version of the package is automatically available at [@metabrainz/design-system](https://www.npmjs.com/package/@metabrainz/design-system)\n\n## Contributing\n\t  \nGot **something interesting** you'd like to **ask or share**? Start a discussion at `#metabrainz` IRC channel on libera.chat.\n\t    \n## Issues\n\t  \nIf you think you have found a bug, please report it on the [issue tracker](https://tickets.metabrainz.org/).\nAlso, we highly suggest you start a discussion on our [community forum](https://community.metabrainz.org/) for any design requests or discussions.\n\t    \n## Support\n\nReach out to the developers at one of the following places:\n\n- MetaBrainz Community: https://community.metabrainz.org/\n- Development IRC Channel: `#metabrainz`\n- E-Mail: **support@metabrainz.org**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetabrainz%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetabrainz%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetabrainz%2Fdesign-system/lists"}