Visual Design

We provides style guides and resources to create a consistent user experience of plugins you can develop using our Developer Workspace.

This section provides recommendations of colors & icon usage, typography, and layout rules and design components section defines commonly used controls and images such as buttons, slider, picker, error handling, and device onboarding.

Providing a consistent user experience is important since familiar interface makes users feel comfortable when using multiple IoT devices created by different developers. Following the style guide will guarantee to create a delightful user experience for SmartThings app users.

Colors

The color of plugin functions should be a visual language that gives several device plugins a unified, harmonious look. We recommend that you use a same color for any element that is commonly used in all plugins for SmartThings app, so that the user experience is like that of using a single app.

Primary color

The primary color used in plugins for SmartThings app is the blue #3695dd. We recommend that you use this color as your default accent color.

Primary color

Note: Do not combine or use multiple colors other than the primary color specified by SmartThings app.

Apply the primary color mainly to UI elements where interactions occur so that the user can intuitively understand your app’s information structure. If you improve the legibility of the UI elements that need to be looked at first or are frequently used by using an accent color, you can shorten the time users spend searching through your app to launch a feature.

Background color

If you use an achromatic color in the background, you can design a harmonious screen without interfering with the colors applied to the UI elements that control the operation or deliver information. The default background color used in SmartThings app is #f7f7f7 and the background color of the sub area at the bottom is #ffffff. We recommend that you use these colors as the background color of your plugin.

Background color

Background colors for each area: main area = #f7f7f7 / sub area = #ffffff

Text color

For text, use an achromatic color that dramatically differs from the background color in terms of brightness. We recommend that you use #252525 as the default text color in SmartThings app.

Text color

You may use an accent color to emphasize text where an interaction occurs. To distinguish between general text and text displayed on buttons, apply the accent color to the buttons. Don’t apply the accent color to body text that only delivers information.

Text color

Note: Don’t apply the primary color to body text that only delivers information.

Icons

To give SmartThings app a consistent visual identity, apply the system icons distributed by Resources as-is or in a similar style when designing a plugin. If you need to design a new icon, make sure that you do not deviate too much from the existing look.

Download SmartThings_Icons_All.zip (Download a set of icons)

System icons

SmartThings app has developed and distributed icons that are commonly used on plugin screens, and recommends that you use theses icons as much as possible. If you cannot find the icon you need among the distributed icons, we recommend that you create one with a shape and size that is similar to line-type icons, which have a consistent line thickness.

System icons

Download System_Icons.ai

Plug-in common control icons

The shapes and colors of icons that commonly have controlling functions on the plugin screen are shown in the following illustration. We recommend that you use these common control icons.

Plug-in common control icons

Download Plugin_Common_Control_Icons.ai

Device icons

Each device icon in the plugin and icons that displays a device’s capabilities is shown in the following illustration. If you need additional icons we recommend that you design icons with similar sizes and styles.

Device icons

Download Components.psd

Typography

Typography is mainly utilized as a visual element to best express design characteristics. We recommend that you use a font recommended for each OS; use the Roboto family for Android and the San Francisco family for iOS.

Font size

To ensure a consistent user experience across plugins, we recommend that you use fonts developed specifically for each OS. Use, the following standard font sizes for plugins.

Roboto Regular Sanfransisco Regular Roboto Bold Sanfransisco Bold Roboto Medium Sanfransisco Medium
40pt 40pt 40pt 40pt 56pt 56pt
44pt 44pt 44pt 44pt 60pt 60pt
48pt 48pt 48pt 48pt 68pt 68pt
52pt 52pt 52pt 52pt 80pt 80pt
56pt 56pt 56pt 56pt
60pt 60pt 60pt 60pt
64pt 64pt 64pt 64pt
68pt 68pt 68pt 68pt
72pt 72pt 72pt 72pt
Roboto Condensed Regular Sanfransisco Regular Roboto Condensed Bold Sanfransisco Bold
52pt 54pt 60pt 64pt
64pt 68pt
68pt 72pt
GUI guide font name Regular Font file name Font family name Font style
Sanfransisco Light SanfransiscoText-Light.oft Sanfransisco Light Light
Sanfransisco Regular SanfransiscoText-Regular.oft Sanfransisco Regular Regular
Sanfransisco Medium SanfransiscoText-Medium.oft Sanfransisco Medium Medium
Sanfransisco Bold SanfransiscoText-Bold.oft Sanfransisco Bold Bold

Font color

As explained in the Colors section, use an achromatic color whose brightness is dramatically different from the background color for text. When you need to emphasize text where interactions occur, apply an accent color. In addition, apply an accent color to text that displays user settings as a list.

Apply the primary color as an accent color to text where interactions occur or to text that displays user settings.

Apply the primary color as an accent color to text where interactions occur or to text that displays user settings.

Layout

Applying the same layout to plugins improves user convenience by making different plugins made by different companies that are connected to SmartThings app appear to be one single app. The layout of SmartThings app plugin is broadly divided into three areas: Device information card, Hero card, and Function card.

Layout

Device information card

In the Device information card, locate system icons, such as the Back button Back button, the HELP button Help button, and the Overflow button Overflow button, below the Indicator. These function buttons should be the same color and designed so that users can focus on the Device name rather than the function of each button. The Device information card should also include place where the product is located, and the device name should be emphasized so that it can be easily identified by users. Ensure that the most important properties in plugins, such as the Power On and Off buttons or Switch On and Off buttons, are located on the right side of the device information card.

Example device information card

Example device information card

Functions that can be added to the right side of the Title in the App bar include the Overflow function and common functions like Refresh, Help, etc. We recommend that you add not more than two buttons. Function buttons on the right side can be expressed using text or icons. When you use text for the buttons, use English names that are widely known, such as HELP or SEARCH, in order to avoid multi-language translations.

Hero card

A device maker has the most freedom when designing this area. While utilizing the elements, colors, and fonts provided by SmartThings app as much as possible, ensure that the ease at which a user can access important capabilities and information included in the page remains your top priority. Make sure that you display information about each device explicitly or create a design that can be controlled with ease due to its similarities with analog controls.

Please refer to design components section for the elements recommended for the Hero card.

Function card

Arrange the most important information and controllers in the Hero card, saving additional controllable capabilities and information for the list-type Function card. While using the basic list format containing an icon and text, apply different elements to the sub-list as shown in the following illustration. For example, you might choose to use a list that enables users to see the current status without using any depths, a list that allows the user to choose an additional menu after opening a depth, or a list that can be toggled off and on directly.

Function card

The basic format of a list in the Function card consists of an icon and text, but you might choose not to add an icon or to change the height of the list depending on its specific characteristics. Note that even if you apply adjustable height to the list, you should still align the text to the left to maintain a consistent sub-list layout.

If you want to allow interactions in the card, such as providing a color selection option or displaying a slider, you can apply adjustable height to the list.

If you want to allow interactions in the card, such as providing a color selection option or displaying a slider, you can apply adjustable height to the list.

If the number of lists exceeds the restricted screen height, scrolling may be needed. In this case, display the top half of a list (i.e., a 0.5 list) at the bottom of the screen to indicate through an affordance that an additional list is present at the bottom. On the other hand, if you do not need to provide an additional list and can fit all the lists on one screen, display an integral number of lists (e.g., 1 list, 2 lists, and 5 lists).

If an additional list exists at the bottom, provide a visual affordance indicating that there is an additional list by showing half of it.

If an additional list exists at the bottom, provide a visual affordance indicating that there is an additional list by showing half of it.

If there is no additional list at the bottom, display an integral number of lists.

If there is no additional list at the bottom, display an integral number of lists.

Alternatively, you can use a sub-list in the Main area for your plugin design without arranging anything else. In this case, the screen should be laid out by filling the sub-list from top to bottom.

When you are not applying any design to the Main area and do not need scrolling on the list, fill the list out from top to bottom as shown above.

When you are not applying any design to the Main area and do not need scrolling on the list, fill the list out from top to bottom as shown above.

Capitalization rules

The SmartThings app plugin uses the following terms for frequently used features and information.

Applicable Area Capitalization Rule Example
Screen Header All caps Screen Header
Screen sub header All caps Screen sub header
Tab All caps Tab
Menu Item The first letter in caps Menu Item
Body The first letter in caps Body
Popup The first letter in caps Popup
Toast The first letter in caps Toast
Buttons All caps Buttons