Onbrand was developed using Web Components technology, along with Storybook. These combinations were essential to deliver a scalable and easily maintainable product, with the goal of seamless integration with major JavaScript frameworks in the market (Angular, Vue, and React).

The project is divided into two repositories:

onbrand-design-tokens: a repository containing design tokens.
onbrand-design-system: a repository that consumes design tokens and contains components.

onbrand-design-tokens: Style Dictionary: is a system that allows defining styles and exporting them to iOS, Android, CSS, JS, HTML. In the project, this library is responsible for converting the JSON containing tokens into a SASS token sheet. This project follows the guidelines of open-wc documentation.

onbrand-design-system: Webcomponent: Web components are a set of web platform APIs that enable the creation of new, customizable, and encapsulated HTML tags for use in web pages and web applications. LitElement: is a base class for creating web components that work on any web page and any framework. Webpack: is a static module bundler for JS/TS files. Web Test Runner: is a JavaScript and TypeScript application tester specifically developed for web components. Storybook: is an open-source tool for UI component development for Angular, Vue, React, web components.