Skip to content

Style Guide

Stream Deck Style Guide

To keep the general Stream Deck UI consistent and simplify creation process for developers, we created this short style guide.

These general guidelines apply to all StreamDeck UI assets.

Overview

#StreamDeckWindow

Default Stream Deck UI icons inside the sidebar are always single color. Key-images can be any color you like. Please note that a user can have quite some icons on his/her Stream Deck profile, so it's a good idea to take a moment and think about your visual (color) language.

The required image-format is PNG.

Stream Deck handles loading of higher-resolution assets (e.g. on retina or hi-dpi screens automatically: in this case, the image with an @2x suffix is loaded, e.g. actionimage@2x.png)

Here are some notes about icon sizes and color definitions...

Asset sizes and colors

Icon Size @2x

Action Image

20x20 px 40x40 px

Category Icon

28x28 px 56x56 px

Key Icon

72x72 px 144x144 px

Action Image should be single color #d8d8d8 rgb(216,216,216)

Except that, there are no special color requirements. But please keep in mind, a user might have various keys installed on his/her Stream Deck, so it's a good idea to think about your color and style language.

If the action consists of 2 states, however, you can also provide separate icons for the states. You will find more info on states in the documentation for the Manifest.json

The images get dimmed automatically on mousedown or inactive states. So you don't need to provide imagery for these cases.

Please keep action-images single color! (#d8d8d8)

Default Stream Deck color definitions

Icons in Strem Deck's right sidebar should be single color (#d8d8d8). This ensures an overall nice user-experience.

For other Stream Deck keys, you can use any color you like.


Just for information purposes, here are the color definitions for the default Stream Deck keys:

#d8d8d8 Action Image#d8d8d8 rgb(216,216,216)

#c8c8c8 Category Icon #c8c8c8 rgb(200,200,200)

#d8d8d8 Key Image #d8d8d8``rgb(216,216,216)

#969696 Key Image down/pressed #969696 rgb(150,150,150)

#1d1e1f Background #1d1e1f rgb(29,30,31)

Please keep action-images single color! (#d8d8d8) rgb(216,216,216))