A unifying digital design system that enables consistency at scale.

Source

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

Design Tokens

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

TailwindCSS configuration

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

NPM Module

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.

Aim

To achieve consistency and standardisation the Tempo visual language across all Tempo projects, as well as accelerating frontend development time.

License

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

Useful links:

Figma source

NPM Module

Github repo of this project

TailwindCSS