Theme

Theming is a mechanism by which a consistent look and feel can be applied to all the components within an application.

By using Balance's theme, developers can easily customize all of their components by changing a set of universal variables, eliminating the need to modify individual components.

Colors

We use a combination of whitespace and color to aid usability and deliver clean experiences to end users. Color helps distinguish our brand, and delivers a consistent user experience across our various digital products.

Core colors

These are the core colors that should be used in all designs and serve to distinguish digital assets associated with the brand.

Functional colors

These colors should be reserved for functional elements or messages, such as indicating the outcome of an action or highlighting a success/failure. They should be used sparingly so as not to risk confusing their meaning.

Variant colors

Variant colors are specific to your product; they're applied to tags etc. They should not overlap with the core or functional colors.

Shadow

Shadows are used to add a sense of elevation to an element, above the surface of the page.

Radii

Radii values are used to round elements, often in concert with sizing.

Sizing

We use sizing to apply heights and widths to elements, maintaining a consistent appearance among components. Sizing is flexible based on the theme.

Spacing

We use spacing to apply padding and margin to elements. Spacing can be applied uniformly or individually to the sides of an element. Spacing is flexible based on the theme.

Typography

Typography helps to create the structure and hierarchy of a page. Typography also helps users read, absorb and comprehend content. Communication should be clear and easy to read. Our font choices are a reflection of this.