Design System

Design Language

When shaping the design language of our application, our primary goal was to establish an effective and compelling visual communication with our end-users. To achieve this, we crafted the UI/UX with the following principles in mind:

  • Simplicity, every interaction shall be straightforward and meaningful
  • Functionality, every element serves a purpose, not just about looks
  • A playful touch, making interactions engaging and enjoyable

Color System

At the heart of our color system is an uplifting orange, selected as the primary color to infuse vibrancy into the user experience. This choice goes beyond visual appeal; it aims to create an environment that feels dynamic and alive.

Color palattes:

  • Palatte 1
  • Palatte 2
  • Palatte 3

Typography

We customized the typography atop the Tailwind CSS Typography plugin.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Paragraphy

Anchor tag

Patterns

Here are the resources we used to customize icons and patterns:

Stack

We built this app primarily using open-source technologies, including React Router and Apache ECharts. Their integration into our UI/UX ensures a seamless and cohesive user experience. Below is an overview of the techniques and topics we have currently implemented or are developing.