> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-styleguides/readme-en.md). # README-en ![Awesome](https://raw.githubusercontent.com/sindresorhus/awesome/0c8952c98f9ac61b23148f9cb64abbcb34be7b16/media/logo.svg) ## Styleguides \ \\ * [**AgnosticUI**](https://www.agnosticui.com) — Accessible CSS component primitives that work with React, Vue 3, Svelte, and Angular. * [**Apple Human Interface Guidelines**](https://developer.apple.com/design/human-interface-guidelines/) — Information for designing apps that integrate seamlessly with Apple platforms. * [**Atlassian Design**](https://atlassian.design) — Design, develop, and deliver. * [**Audi**](https://www.audi.com/ci/en/intro/brand-appearance.html) — Attitude Brand Appearance. * [**Auth0**](https://auth0-cosmos.now.sh) — Cosmos is a Design System to build Auth0 products. * [**Disqus**](https://disqus.com/pages/style-guide/) — colors, typogrophy and Disqus logo. * [**Duo Lingo**](https://www.duolingo.com/design/) — Duo Lingo design. * [**Elastic UI**](https://elastic.github.io/eui/#/) — Elastic UI Framework * [**Helpscout**](https://style.helpscout.com) — Helpscout style guide. * [**IBM Design**](https://www.ibm.com/design/language/resources/) — Tools that help you work smarter, not harder. * [**MailChimp**](http://ux.mailchimp.com/patterns) — The Pattern Library. * [**MarvelApp**](https://marvelapp.com/styleguide/overview/introduction) — MarvelApp design system. * [**Material Design**](https://material.io/design) — Create intuitive and beautiful products with Material Design. * [**Material UI**](https://material-ui.com) — React components that implement Google's Material Design. * [**Microsoft Fluent Design**](https://www.microsoft.com/design/fluent/) — No need to start from scratch. * [**Microsoft UWP Design and UI**](https://docs.microsoft.com/en-us/windows/uwp/design/) — Design and code Windows apps * [**Mozilla**](https://www.mozilla.org/en-US/styleguide/) — Style Guides. * [**Nebular**](https://akveo.github.io/nebular/) — Angular 8: UI Kit. * [**Operational UI**](https://operational-ui.netlify.com) — Operational UI Components * [**Pajamas**](https://design.gitlab.com) — Resources, components, and design guidelines behind GitLab. * [**Pluralsight Design**](https://design-system.pluralsight.com) — Pluralsight design system. * [**Polaris**](https://polaris.shopify.com) — Shopify’s product component library. * [**Priceline One**](https://pricelinelabs.github.io) — Priceline Design System. * [**Primer**](https://primer.style) — the CSS design system that powers GitHub. * [**Royal Canin**](http://developer.royalcanin.com) — Royal Canin design system. * [**Salesforce**](http://sfdc-styleguide.herokuapp.com) — Lightning design system. * [**SAP Fiori Fundamentals**](https://sap.github.io/fundamental/) — A light-weight presentation layer that can be used with your UI framework of choice. * [**Semantic UI**](https://semantic-ui.com) — User Interface is the language of the web. * [**Starbucks Pattern Library**](https://www.starbucks.com/developer/pattern-library/) — Building blocks of app.starbucks.com * [**Thumbprint**](https://thumbprint.design) — Assets for building high-quality, consistent user experiences at Thumbtack. \ \\ ## Storybooks \ \\ * [**Algolia InstantSearch**](https://community.algolia.com/react-instantsearch/storybook/) — Lightning-fast, hyper-configurable search. * [**Appbase Maps**](https://opensource.appbase.io/playground/) — A storybook playground for ReactiveMaps and ReactiveSearch. * [**Artsy Force**](https://artsy.github.io/reaction/) — Artsy's "Force" component library. * [**Buffer Components**](https://bufferapp.github.io/buffer-components/) — A collection of Buffer UI React components. * [**Carbon Components**](http://react.carbondesignsystem.com) — IBM's Carbon Design System implemented in React. * [**Cosmos**](https://auth0-cosmos.now.sh/sandbox/) — A Design System For Auth0 Products. * [**Coursera**](https://building.coursera.org/coursera-ui/) — Coursera UI component library. * [**Fyndiq**](https://fyndiq.github.io/fyndiq-ui/) — Fyndiq UI Component library. * [**Grafana UI**](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) — Grafana UI components library. * [**Grommet**](https://storybook.grommet.io) — Styled components for Reactjs. * [**GumGum**](https://storybook.gumgum.com) — GumGum (Computer Vision Company) Component library. * [**Hack Oregon**](https://hackoregon.github.io/component-library/) — Official component library and storybook for Hack Oregon. * [**Lonely Planet**](https://lonelyplanet.github.io/backpack-ui/) — All the tools you need to build the Lonely Planet UI experience. * [**Lucid UI**](https://appnexus.github.io/lucid/) — Component and charts library by AppNexus. * [**MockingBot**](https://ibot.guide) — MockingBot UI component library(ibot). * [**Quran.com**](https://quran.github.io/common-components/) — Component library for Quran.com, Quranicaudio.com and Salah.com. * [**React Event Timeline**](https://rcdexta.github.io/react-event-timeline/) — Event timeline component. * [**React Native Web**](https://necolas.github.io/react-native-web/storybook/) — Storybook demo for React Native Web. * [**Semantic-UI**](https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/) — Storybook for Semantic-UI React components. * [**Tachyons Components**](https://www.tachyonstemplates.com/components/) — A searchable directory of Tachyons Components. * [**TodoMVC with Specs**](https://thorjarhun.github.io/react-storybook-todolist/) — Todo app Storybook with built-in unit tests. * [**Trunx**](https://g14n.info/trunx) — Super Saiyan react components, son of awesome Bulma. * [**Uber React-Vis**](https://uber.github.io/react-vis/website/dist/storybook/index.html) — A composable charting library. * [**Wix Style React**](https://github.com/wix/wix-style-react) — Components that conform to Wix Style. \ \\ ## Resources \ \\ * [**AirBnB Design**](https://airbnb.design) * [**ArtLebedev**](https://www.artlebedev.com) \ \\ ## Videos \ \\ * [**System of Systems**](https://vimeo.com/262959101) — [*Nathan Curtis*](https://twitter.com/nathanacurtis) * [**When We Use Systems**](https://vimeo.com/262959714) — [*Karri Saarinen*](https://twitter.com/karrisaarinen?lang=en) \ \\ ## Comparators \ \\ * [**Adele**](https://adele.uxpin.com) — Repository of publicly available design systems and pattern libraries by [*UXPin*](https://www.uxpin.com). * [**awesome-design-systems**](https://github.com/alexpate/awesome-design-systems) — A collection of awesome design systems. * [**Design System Repo**](https://designsystemsrepo.com/design-systems/) — Design Systems Gallery * [**styleguides.io**](http://styleguides.io) — Website Style Guide Resources. \ \\ ## Tools \ \\ * [**react-sketchapp**](https://github.com/airbnb/react-sketchapp) — render React components to Sketch --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.tenten.co/awesome/design/awesome-styleguides/readme-en.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.