Dimming center

The Dimming center is a controller for palette and dimming in the system. It is accessible at the top-right in the Topbar.

Variations

The standard button can be used in a normal and raised version, each with an option to use icon in addition to the label.

Dimming center in Topbar

The standard dimming center is accessible from the Topbar.

Specs

How the Dimming center are built up and styled.

Anatomy

The Dimming center is built up by multiple UI components

Colors

The app button uses the raised style.

Bright

Element

Color / Style name

1

Topbar border + Text

color-ui-element-active

2

Title text + Icons

color-ui-element-neutral

3

Divider

color-ui-border-divider

4

Outline

color-ui-border-outline

5

Container

color-ui-container-global

6

Container button

color-ui-container-section

Typography and icons

The titles are in the overlain style, and labels are in body style.

Bright

Text category

Text attributes

1

Overline

AA

Typeface: Open Sans

Weight: Regular

Size: 12px

Lineheight: 24px

2

Body

AA

Typeface: Open Sans

Weight: Regular

Size: 16px

Lineheight: 24px

3

Dimming icon

Library: Material icons

Name: brightness_4

Size: 24px

Measures and spacing

The app button is built up by a circular container with a centered icon.