App launcher
Updated:
February 1, 2020
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://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359ca6121267e4a9b69a73_01%20App%20launcher%204x3.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359ca6121267e4a9b69a73_01%20App%20launcher%204x3.webp)
App launcher
The application launcher is accessible from the Topbar.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359ca6121267e4a9b69a73_01%20App%20launcher%204x3.webp)
App launcher
The application launcher is accessible from the Topbar.
Component building blocks
How the application launcher is built up and styled.
Anatomy
The app launcher is a nested component, containing other UI components
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359d76a3d85b52a4178337_Application%20center%20-%20Anatomy.webp)
Colors and styles
The app launcher use the same color as the topbar.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359f2dc6233017b410b60c_Application%20center%20-%20Color%20-%20Bright.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359f307c077b1012dca2b9_Application%20center%20-%20Color%20-%20Day.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359f347c077b1dacdca310_Application%20center%20-%20Color%20-%20Dusk.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e359f38c62330aea610bb22_Application%20center%20-%20Color%20-%20Night.webp)
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e35a01df4dd536ac7340925_Application%20center%20-%20Typography%20-%20Bright.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e35a0201212674257b6ba94_Application%20center%20-%20Typography%20-%20Day.webp)
Specs
This component is built up by a oval slider and icons.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e35a06a12126782d3b6bd8e_Application%20center%20measure.webp)