Basics

Gravity-UI is a collection of libraries and components for building functional user interfaces. The design system supports multiple themes: light, dark, and high-contrast variations of each. The visual style of the components in every theme can be easily customized.

Color

The design system consists of four themes based on a two-layer color model. The theming engine supports versatile color customization and brand identities with different sets of requirements.

Typography

The typography system consists of typesetting styles, display fonts, and code (monospace font). You can use the default fonts or create your own.

Control corner radius

The corner radius is a small yet important part of the visual style. To make it easier to work with it, we developed a set of radius variables. These variables are used by different controls. To adjust the radius of the controls, simply change the values of the variables.

Creating and using a theme

Whatever the brand and visual language, it all comes down to a set of constants that you should be able to easily edit and use in both your code and Figma's library.