Application launcher
The Application launcher an easy access to open different applications. It is accessible at the top-right in the Topbar.
Variations
The Application launcher is a part of the Topbar, and is an easy access to apps in addition to a full screen launcher. The amount of app displayed may vary based on the screen size (4x4 vs 3x3).
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909c9213b566f6e6fe0df7_ApplicationLauncher_Specs.png)
Application launcher in Topbar
The application launcher is accessible from the Topbar.
Specs
How the Dimming center are built up and styled.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909c9213b566f6e6fe0df7_ApplicationLauncher_Specs.png)
Anatomy
The Application launcher is built up by multiple UI components.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909d99124e07252d0e5660_ApplicationLauncher_Anatomy.png)
Colors
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909eb513b5662173fe21a5_ApplicationLauncher_Colors.png)
Element
Color / Style name
1
Topbar border + Text
color-on-background-active
2
Container
color-surface-global
3
Outline
color-border-outline
4
Container button
color-surface-section
5
Icon
color-on-background-neutral
Typography and icons
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909c92124e071b180e4396_ApplicationLauncher_TypographyAndIcons.png)
Text category
Text attributes
1
Body
AA
Typeface: Open Sans
Weight: Regular
Size: 16px
Lineheight: 24px
2
Apps icon
Name: Apps
Size: 24px
Measures and spacing
Note that the top-border lays on top of the bottom-border in the Topbar.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d909c9113b56638b6fe0df6_ApplicationLauncher_MeasuresAndSpacing.png)
1
Component measures
2
Spacing
3
Border sizes