Skip to main content

Colors

Color is a tool to maintain brand identity as a product and should express a clear information hierarchy within the software through color contrast to minimize customer confusion.​

Basic Color​

Scale Token is a standardized color token that defines a consistent color system for products. It is used when there is no special semantic meaning or context, and it can be used in any case.

Solid​

A completely opaque color, which has no transparency. Solid colors are defined by HEX values.

color_solid.svg

Alpha​

A color with transparency, used by adjusting the transparency of the color, primarily in combination with backgrounds or other elements.

Gray Alpha​

color_gray.svg

White Alpha​

color_white.svg

Static​

A color that is unaffected by light and dark themes, maintaining its raw value at all times. It is mainly used for elements placed on Overlay.

color_static.svg


System Color​

Label​

When using the same color for all text information, it can be confusing as users may have difficulty understanding the priority of the information they need to read.

color_static.svg

Icon​

color_static.svg

Button​

color_static.svg

Surface​

color_surface.svg

Divider​

color_divider.svg

Dim​

color_dim.svg

Background​

The Background color that wraps around content and information. It is located at the lowest end of the Z-axis.

color_bg.svg

Regulation​

A color system that conveys information to users or provides meaning. It is used for information that can satisfy regulations such as telltale and temperature.

color_regulation.svg

Informative​

Can represent the importance of information and is used to indicate whether a specific task is in progress, completed, or if an error has occurred.

color_informative.svg