Gravity UI: Easily create your own interface

Hello there! My name is Evgeny Alaev, and I’m a frontend developer here at Yandex Cloud. I am excited to announce that our Gravity UI design system and its library of components are now available in open source.

The Gravity UI component library helps users create modern, stylish interfaces. The library contains the following components:

• A collection of basic React components
• A library constructor for building landing pages
• Detailed guides on how to use components
• A Figma library
• ChartKit, a package for data visualization
• Yagr, a high-performance chart rendering solution based on uPlot
• I18n, a package for interface localization
• A repository of more than 25 additional libraries.

I’d like to tell you about the development of Gravity UI, why we created it, its practical applications, about its unique features and benefits of our approach, and our future plans. I will also explain how to set up different color themes for your projects, and talk about why we offer four themes instead of the usual two.

How we started Gravity UI

The UIKit library was originally developed as an in-house tool to improve work efficiency. As the number of services grew, we decided to create a consistent user experience across all products. For the user to get a sense of the platform as a whole, it was crucial for us to apply the same user behavior patterns across all of our services.

The design team also wanted to develop tools that would enable developers to create new services without their help.

Recently, some of the platforms and services that use our design system, like YTsaurus, YDB, DataLens, and Diplodoc, have gone open source. We saw how enthusiastically users responded and collaborated with developers to improve their code. Inspired by their success and recognizing Gravity UI’s potential outside of Yandex, we’ve decided to follow their example.

Key features of Gravity UI

User-driven development

One of the distinguishing features of our design system is that it evolves in response to the needs of our users, most of whom are developers. Moreover, our designers work closely with the products they design. Each of them has several services with their own unique usage scenarios. Once the solution is tested in their services, the product designer passes it on to other services to make sure it works properly and helps developers.

For instance, when the side navigation feature was first designed, it only contained a logo and some menu options. Later, to make it more convenient for users, we added a section listing all services and a search feature. And when we added a service that required us to create a new entity right in the side menu, we included a separate plus sign button. Then, we incorporated menu sections with separators for complex services with a large number of menu items, as well as a “Remaining Items” button.

The Navigation Component offers two configuration options: basic and advanced.

Adaptability

Most Gravity UI components can be customized to meet your specific requirements. For example, the pagination component provides a variety of display options, including the total number of pages, full button labels, and the option to navigate to a specific page or change the number of answers on the page. The last one is particularly useful for a large number of pages. In case you have fewer results, choose compact mode or hide the numbers and display navigational arrows instead.

Displaying different pagination options

Various applications

Gravity UI allows you to build both a simple management interface and a complex dashboard with graphs and charts. Here are a few more examples of what you can create with our design system:

• landing pages
• administration panels
• dashboards
• charts
• CRM
• analytical services.

Here’s a dashboard designed by our colleagues:

A dashboard made with Gravity UI

You can also build a simple landing page. The website for our open-source projects is also made using Gravity UI components.

Here’s another example of a website that can be created using our design system

Over 150 contributors

We are constantly working to improve our ecosystem. In addition to feedback from our developer community, we receive suggestions from over 100 services that already use our design system.

Let me give you an example here. First, we had only two themes: dark and light. However, teams that displayed charts or held stand-up meetings on TVs complained that it was hard to see the interface elements. The same problem occurred on old or low-quality monitors.

To address this issue, we increased the contrast for each theme, brightening dark and light areas as well as semantic colors. This feature can be configured using CSS styles and managed in user settings.

An example of the increased contrast feature being used in the Yandex Tracker interface, which was also built with Gravity UI components

By the way, if you want to contribute to our development, send us a PR on GitHub or leave comments on Figma.

How to use Gravity UI

Customizing the interface for your brand identity guidelines

Now I will go over some of the other things you can do with Gravity UI. Let’s start by taking a look at how to incorporate your brand identity into the design system. When YDB went open-source, we had to maintain a unified design system while also making it unique for each brand. To do this, we created a separate set of CSS variables, which included brand colors, fonts, and rounding radius. In code, it looks like a small block:

.g-root {
  --g-font-family-sans: 'Inter', sans-serif;

  --g-text-header-font-weight: 600;
  --g-text-subheader-font-weight: 600;
  --g-text-display-font-weight: 600;
  --g-text-accent-font-weight: 600;

  --g-color-base-brand: rgb(117, 155, 255);
  --g-color-base-brand-hover: rgb(99, 143, 255);
  --g-color-base-selection: rgba(82, 130, 255, 0.05);
  --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
  --g-color-line-brand: rgb(117, 155, 255);
  --g-color-text-brand: rgb(117, 155, 255);
  --g-color-text-brand-contrast: rgb(255, 255 ,255);
  --g-color-text-link: rgb(117, 155, 255);
  --g-color-text-link-hover: rgb(82, 130, 255);
  
  --g-border-radius-xs: 3px;
  --g-border-radius-s: 5px;
  --g-border-radius-m: 6px;
  --g-border-radius-l: 8px;
  --g-border-radius-xl: 10px;
  --g-border-radius-2xl: 16px;
}

Here, you can change the font, color of accent buttons, and roundings. This way, you can use a single design system for multiple brands while still maintaining your corporate identity. If this is not an option for you, you can create your own color scheme. You can find more detailed instructions in our documentation.

Interfaces incorporating various brand variables

Keep in mind that changing the brand colors will have no effect on the main interface. This is especially important for elements that use semantic colors: red will always indicate errors, and green will always indicate success.

Figma components

To make things easier, our design team prepared and loaded all component states into Figma. If you want, you can make a copy of the library and build the interface directly from the service.

The most recent update removed duplicate versions of the four themes from the library. The light theme is used by default. However, if you go to the Layer section, you can change the style of individual components or the entire page.

Viewing how an element appears in different themes

All library elements are displayed on the Overview page, where you can find the component you need and navigate to the page that contains all of an element’s states as well as an example of how to use it.

A page listing all of the Gravity UI components

Nearly 600 icons

Icons are important design and usability elements. They help organize and structure content, highlight key elements, and improve the readability and visual presentation of information. Making an icon pack doesn’t seem like a hard task when you think about it. However, we had a hard time creating icons for complex metaphors, such as virtual machines, databases, and some kinds of charts.

have 600+ icons, with more to be added soon

To make searching for icons easier, we developed a unique keyword system. A single icon includes a number of descriptive keywords. To find the arrow icon, for example, you can enter any of the following keywords: arrow, enter, move, or login.

All icons are listed on a separate page. You can either download an icon or copy the SVG.

Guides

As I mentioned earlier, our goal was to make it easy for developers to create generic interfaces by using as little as the component descriptions in our guide. We wanted to make this process as simple as possible so that minor changes could be made without any help from designers. We now have five internal services that our developers built using our guidelines.

Of course, developers cannot always do this work alone. There will be times when the task is too complex and needs assistance from a UX/UI expert. However, we were able to significantly reduce the workload for our designers.

Our design team has put together a guide with descriptions of all the components, recommendations, and examples of both correct and incorrect usage of components. You can view it here.

How to start using Gravity UI

All you need to do is type the following command into the console:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

More detailed instructions can be found on the main page of the repository on GitHub.

All the Gravity UI components are accessible via UIkit, and the required library can be linked in the Libraries section.

To sum things up, Gravity UI is a design system that has evolved in response to the needs and actual experiences of our developers, designers, and users, making it extremely practical and efficient. And the best part is that it can now be used for free.

We are committed to making the project better and better, and always welcome feedback from our users. Please join us on GitHub, send us pull requests, leave comments on Figma, and share your experiences.