---
title: Lighting Product
---


# Guidelines on Lighting Product Design

## 1. Background information

Tuya provides a full-stack AI-driven IoT platform to help global developers innovate faster. Tuya's end-to-end IoT solutions make software, connectivity, hardware, and more cloud services work together seamlessly.

The lighting category is one of Tuya's competitive smart product categories, supported by a full range of development solutions. When it comes to the panels, Tuya delivers significant customer value from the following perspectives:

1. With customers in mind throughout a solution, Tuya places customer-centered design at the forefront. It puts customers' demands for extensive styles matching all-around features at the core of panel design.

2. Flexible components in combination with custom panel style schemes bring about replicable development, seamless integration, and huge opportunities for customer success.

3. Excellent user experience is fundamental to panel design and is all about making panels intuitive to use for everyone and pleasant to look at in a wide range of scenarios.

Based on the full respect for users' rights and benefits, these design guidelines and recommendations are intended for your reference to create friendly, efficient, and consistent user experiences of lighting products within Tuya's ecosystem, and achieve an all-win situation among users, customers, and Tuya.

## 2. Framework structure and design standards

### 2.1 Design framework

To fulfill the extensibility and diversity of panel styles, the following well-proved panel frameworks are recommended for panel design:

#### 2.1.1 Framework 1: main operation framework

Framework 1 is designed with basic panel features, properties, and universal styles. It applies to all types of lighting panels.


<Image src="/images/panels-design/2-1-1.en.jpeg"/>


- Operation types

    Framework 1 supports the following types of operations:

    1. Component-based operation: Users adjust the lighting by operating a component in a panel operation area.

    2. Intuitive adjustment: Users swipe horizontally or vertically in an open operation area of the panel to adjust colors and brightness.


        <Image src="/images/panels-design/2-1-2.en.jpeg"/>


#### 2.1.2 Framework 2: main scenes and devices

Frameworks 1 and 2 both apply to general-purpose panels. Framework 2 additionally has an edge on the custom visualization of a static effect to strengthen the awareness of your product and brand.


<Image src="/images/panels-design/2-1-3.en.jpeg"/>


**Things to note**:

Scene images and device images can be used in the recognition area. Try to use the images that have the minimum impact on the title and button appearing to the left of the images.


<Image src="/images/panels-design/2-1-4.en.jpeg"/>


The .jpeg images with a transparent background are recommended as device images, so they can match the overall background color.


<Image src="/images/panels-design/2-1-5.en.jpeg"/>


#### 2.1.3 Framework 3: immersive experience

This immersive framework applies to colored lighting products such as dreamcolor string lights. This type of panel combines color adjustment with device operations. Therefore, the overall framework is equally divided into the visualization area and operation area.


<Image src="/images/panels-design/2-1-6.en.jpeg"/>


**Visualization area**

This area is further divided into sections for the following purposes: proactive operations, responsive operations, and static display.

1. Visualized proactive operations: Users can perform interactive operations in this visualized section.

2. Visualized responsive operations: This intuitive section dynamically changes in response to settings with a color picker.

3. Static display: This section only displays static images.


    <Image src="/images/panels-design/2-1-7.en.jpeg"/>


**Things to note**:

The visualization area must adapt to changes in the screen orientation. For this purpose, try to reserve sufficient blank space when you design the visualization area.


<Image src="/images/panels-design/2-1-8.en.jpeg"/>


### 2.2 Color picker

1. Design a color picker by coding and implement dynamic levels of color reproduction as required.

2. Users can drag and drop a thumb and tap to select any color from the picker.


    <Image src="/images/panels-design/2-2-1.en.jpeg"/>


- Colors selected with the thumb

    To ensure color accuracy, take the color point depicted at the center of the thumb, rather than the color of the whole thumb, as the currently selected color.


    <Image src="/images/panels-design/2-2-2.en.jpeg"/>


    **Things to note**:

    For a color picker combined with other settings such as brightness, reposition the currently selected color at the point that partitions the thumb diameter by a ratio of 3/7. Because when a thumb moves to the edge of the picker, to get the central color value, half of the thumb overlaps the area for other functional settings and thus might result in accidental touches.


    <Image src="/images/panels-design/2-2-3.en.jpeg"/>


### 2.3 Bottom tab bar

A bottom tab bar is fixed to the bottom of the homepage for a miniapp. The bottom tab bar does not disappear when users scroll the page up or down. Users can horizontally switch between different tabs in the bar.

- Container

    A tab bar container is designed with a fixed switch button on the left and two to five tab icons on the right.
    **Note: the spacing around the switch button is unchanged, no matter how many tab icons are provided.**


    <Image src="/images/panels-design/2-3-1.en.jpeg"/>


- Style extensions

    1. Default style: The switch status is displayed.

    2. For the data point status to be sent only: The switch status is not displayed.

    3. The switch button is not displayed.


        <Image src="/images/panels-design/2-3-2.en.jpeg"/>


## 3. Visual standards

### 3.1 Rounded corner and spacing

To ensure screen adaptation, every 8 pixels are regarded as the unit of settings in a grid system. You can define the layout settings with multiples of 8 pixels, for example, 8, 16, 24, and 32 pixels. These rules also apply to icons and components.


<Image src="/images/panels-design/3-1-1.en.jpg"/>


### 3.2 Font

The font style in Chinese and English follows that of the mobile operating system. To use a specific font style, you must provide the licensed font package and set the font of numbers to Manrope.

- Font size


    <Image src="/images/panels-design/3-2-1.en.jpeg"/>


### 3.3 Color

- Light mode


    <Image src="/images/panels-design/3-3-1.en.jpeg"/>


- Dark mode


    <Image src="/images/panels-design/3-3-2.en.jpeg"/>