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.
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.
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.
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.
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 colors for each area: main area =
#f7f7f7 / sub area =
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.
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.
Note: Don’t apply the primary color to body text that only delivers information.
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.
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.
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.
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.
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.
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|
|Roboto Condensed Regular||Sanfransisco Regular||Roboto Condensed Bold||Sanfransisco Bold|
|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|
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.
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.
Device information card
In the Device information card, locate system icons, such as the Back button , the
HELP button , and the 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
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
SEARCH, in order to avoid multi-language translations.
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.
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.
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 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 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.
The SmartThings app plugin uses the following terms for frequently used features and information.
|Applicable Area||Capitalization Rule||Example|
|Screen Header||All caps|
|Screen sub header||All caps|
|Menu Item||The first letter in caps|
|Body||The first letter in caps|
|Popup||The first letter in caps|
|Toast||The first letter in caps|