HBUI

The Hummingbot Design System

Welcome to the Hummingbot Design System


1. The original source of this design system is a Figma document containing all the original styles.


2. The styles are downloaded and parsed via a local script, which stores the design tokens in a local file.


3. These design tokens are then used to create a custom TailwindCSS configuration file that reflects the Hummingbot design language.


4. An NPM module containing a collection of react elements, components and system files is provided to allow any project to use this design system.


5. By using this NPM module, we achieve the goal of standardising the visual language across all Hummingbot projects, as well as drastically accelerating development time.


6. This project is open-source and free to use for everyone. Contributions are encouraged.




Useful links:

Figma source

NPM Module

Webpack Boilerplate (Webpack React app)

Webpack Boilerpate (TS) (TypeScript-ready Webpack React app)

Gatsby Boilerplate (Gatsby app)

Next.js Boilerplate (Gatsby app)

Github repo of this project

TailwindCSS

twin.macro