---
title: "Brand Configuration"
slug: "brand-configuration"
updated: 2025-09-25T14:44:40Z
published: 2025-09-25T14:44:40Z
canonical: "learn.servitly.com/brand-configuration"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Configuration

The DPS application is often the first point of interaction with your customers, and aligning its appearance with your brand style ensures a cohesive and professional experience, as well as improving trust and recognition of your brand. This article reports all the points where in the Servitly Console you can customize the visual elements of the DPS, from colors and typography to logos and layout styles, so that every detail reflects your unique brand identity.

## Images

The DPS comes with a set of predefined images that you can override as you need:

- **Logos and Backgrounds**: by entering the [Images](/docs/images) page, you can configure the logos and background images (in various formats) that are used in the DPS pages (e.g. login page).

| ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(781).png) Login page | ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(783).png) Sidebar menu | ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(782).png) Sidebar menu collapsed |
| --- | --- | --- |
- **Menu Icon**s: when configuring the [Views](/v1/docs/views) for your user personas, for each page placed in the navigation menu, you can configure the icon.

| ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(780).png) Sidebar menu pages |
| --- |
- **Secondary Icons**: by entering the [Images](/docs/images) page, you can configure the icons used by minor DPS elements (e.g. thing activation, user menu).

## Colors

Simply changing the images is often not enough, and another distinctive trait of a brand is its color palette. In the [*Appearance / CSS*](/v1/docs/css) page, you can find a set of variables that can be used to change the main colors of the DPS application.

| *primary-color* | The main color used for branding and primary interactive elements (e.g. buttons, links). **Default Value**: #0A70F8 **Usage**: background of primary buttons, active elements. |
| --- | --- |
| *primary-color-hover* | A slightly lighter or darker variant of `primary-color`, used when a user hovers over primary interactive elements. **Default Value**: #548CFF **Usage**: button hover states, link hover effects. |
| *primary-color-fg* | The foreground color is used to contrast the `primary-color` when displaying text or icons in boxes or buttons. **Default Value**: #FFFFFF **Usage**: text color inside a primary-colored button to ensure readability. |
| *secondary-color* | A supporting or contrasting color used to complement the `primary-color`. Often used for secondary actions or less prominent UI elements. **Default Value**: #101E2F **Usage**: secondary buttons, subtitles, borders. |
| *info-color* | A color used to convey informational messages. **Default Value**: #D8E1ED **Usage**: notifications, alerts, or badges for information. |
| *accent-color* | A highlight color is used to draw attention to key elements. It’s usually bright or distinct from the primary/secondary palette. **Default Value**: #FF9800 **Usage**: highlights, selected form controls like radio buttons. |
| *accent-color-bg* | A background variant of the accent color. It’s often a very light tint of `accent-color`, used to highlight areas. **Default Value**: #FF980077 **Usage**: background of badges, tags, cards, or active boxes. |

Here is an example of how to declare variables and use them in the CSS.

```css
/* variables declaration */
:root {
	--primary-color: #0A70F8;
	--primary-color-hover: #548CFF;
	--primary-color-fg: #FFFFFF;
	--secondary-color: #101E2f;
	--info-color: #D8E1Ed;
	--accent-color: #ff9800;
	--accent-color-bg: #ff980077;
}

/* variable usage sample */
#override a {
	color: var(--primary-color-fg);
}
```

## Components Colors

All the page components leverage the same color palette that you can modify as you need. By default, there are two color palettes (`values` and `chart`) used by built-in components.

For more details about how to deal with colors in custom components, you can refer to the [ColorManager](/v1/docs/color-manager) article.

#### Values Color Palette

The color palette used by widgets and filters to display certain values (e.g. a string representing a machine state) with a specific color. These are the colors already registered by default:

| **VALUE** | **COLOR** |
| --- | --- |
| *ANOMALY* | #F39C12 |
| *CRITICAL* | #DD4B39 |
| *EMERGENCY* | #FF0000 |
| *ERROR* | #DD4B39 |
| *FAILURE* | #DD4B39 |
| *INFO* | #0094FF |
| *INFORMATIONAL* | #0094FF |
| *NEUTRAL* | #000000 |
| *NORMAL* | #BDBDBD |
| *OFFLINE* | #A3A3A3 |
| *ONLINE* | #08B05B |
| PRIMARY | #0A70F8 |
| *READY* | #FFD800 |
| *STANDBY* | #3EC4EC |
| *UNREACHABLE* | #F39C12 |
| *WARMUP* | #F39C12 |
| *WARNING* | #F39C12 |
| *WORKING* | #08B05B |

You can register or override your own colors by using the `colorManager.registerColor(key, color)` function into the [Custom Filters](/v1/docs/custom-filters) component. The key (case-insensitive) is used to allocate the color in the `values` color palette.

```javascript
colorManager.registerColor("MANUAL", "#638550");
colorManager.registerColor("AUTOMATIC", "#4C799C");
colorManager.registerColor("DISABLED", "#F89A33");
```

This color palette is used by filters and widgets to display values and elements with a specific color:

- [*Status Badge*](/v1/docs/status-badge-filter) filter that displays a badge colored according to the value.
- [Status Diagram](/v1/docs/status-diagram-widget) widget that displays horizontal bars colored according to the underlying machine status over time.
- [Bar Chart](/v1/docs/bar-chart-widget) widget that displays bars colored according to the underlying bar categories that are used as color palette keys.

#### Chart Color Palette

The color palette used by chart-based widgets to display lines, bars, and other elements.

These are the colors used to draw main elements into charts (axis, grid, labels):

| **KEY** | **DESCRIPTION** | **COLOR** |
| --- | --- | --- |
| *CHART_AXIS* | The color used by the X and Y axis. By default, axis lines are transparent. |  |
| *CHART_NEUTRAL* | The default color used to display chart elements. | #212121 |
| *CHART_FILL* | The color used to fill background areas in charts. | #FAFAFA |
| *CHART_GRID* | The color used by the chart grid. | #0A0A0A |
| *CHART_HIGHLIGHT* | The color used to highlight elements in charts. | #FF980077 |
| *CHART_LABEL* | The color used by labels (axis and legend). | #0A0A0A |

You can override these colors by adding to the [Custom Filters](/v1/docs/custom-filters) component the following code.

```javascript
colorManager.registerColor("CHART_NEUTRAL", "#616161")
```

These are the colors that are sequentially picked up by the widgets:

| COLOR |
| --- |
| #F44336 |
| #F3C300 |
| #008856 |
| #3F51B5 |
| #E91E63 |
| #2196F3 |
| #F38400 |
| #9C27B0 |
| #03A9F4 |
| #673AB7 |
| #00BCD4 |

The order of colors is defined to ensure the right contrast when displaying multiple lines in the same chart.

This color palette is used by:

- [Time Series Chart](/v1/docs/time-series-chart-widget): each series (lines or columns) is drawn by taking a different color from the palette, starting with the first one in the list. If needed, for each series, you can specify the color directly in the template.
- [Bar Chart](/v1/docs/bar-chart-widget): each bar is drawn with a different color when the random color option is configured.

You can override this color palette by adding the following code to the [Custom Filters](/v1/docs/custom-filters) component.

```javascript
colorManager.registerColorPalette("chart", ["#F44336", "#F3C300", "#008856", "#3F51B5", "#E91E63", "#2196F3", "#F38400", "#9C27B0", "#03A9F4", "#673AB7", "#00BCD4"]);
```

## Web CSS

By defining CSS rules, you can configure other distinctive traits of your brand identity, such as fonts, button styles, frame styles, and whether edges must be rounded or sharpened.

In the [*Appearance / CSS*](/v1/docs/css) page, other than defining colors, you can also inject your set of specific CSS rules.

Here are some tips you can follow to write your CSS:

- Do not define rules specific to each element, but try to define rules that match all the elements of the same category (e.g. buttons, fields, labels).
- Avoid defining XPath-based rules. Servitly may introduce new elements to the HTML that make up the page, which could cause such rules to stop working.
- Use variables (like for colors) to define settings commonly used across different rules.
- Try to group rules with common behavior and use comments.

Note that the Web CSS is always loaded after the default Servitly CSS.

## Mobile CSS

Users can also access the DPS from mobile devices with limited resolution and size. In the [*Appearance / CSS*](/v1/docs/css) page, you can edit the CSS that is automatically loaded when navigating the DPS from a mobile device. For instance, you can change the size of specific elements (e.g. buttons). Note that the Mobile CSS is always loaded after the Web CSS.

## Components CSS

In addition to being able to configure the general appearance of your DPS, you can also change how individual page components are displayed. For instance, in case you need to redefine the layout of a widget, you can:

- in the template, reference a CSS class, and define it in the [*Appearance / CSS*](/v1/docs/css) page.

```xml
<div class="d-flex flex-wrap components-row">
	<thing-details-widget [title]="'Machine Info'" class="flex-fill labels-gray">
		<property name="name"></property>
		<property name="serialNumber"></property>	
	</thing-details-widget>
</div>
```

```css
.labels-gray table tr td:nth-child(1) { background-color:#F2F2F2 }
```
- in the [*Appearance / CSS*](/v1/docs/css) page, define the CSS rules matching the tag of the widget. In this way, all instances of that widget type will be affected.

```css
/* changes the labels background in the thing-details-widget */
thing-details-widget table tr td:nth-child(1) { background-color:#F2F2F2 }
```

  

For more details about defining CSS for components, refer to the [Styling with CSS](/v1/docs/styling-with-css) article.

## Labels

Servitly already provides all the labels you need to navigate the DPS (e.g. buttons, hints, descriptions, messages), but for some of these, you will need to make changes to use the terminology used by your specific brand and domain. For example, the label *Product created* is used when a new thing is created in the DPS, but if you are a refrigerator manufacturer, you would put *Refrigerator created*. There are labels used to display information related to your company and the offered service:

- *Service Name*: name of the service displayed in the DPS pages (e.g. ACME Connect). It is also possible to define a short version to be used in the title of the browser tabs. ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(787).png)
- *Company Name*: the name of the company (e.g. ACME) used, for instance, in notification emails.

For more details about translating labels, you can refer to the [Multilanguage Support Configuration](/v1/docs/multilanguage-support-configuration) article.

## Messages

Another touchpoint for your users is the messages sent via email by the DPS upon specific events (e.g. user registration, event triggering).

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(784).png)

Servitly comes with a set of predefined mail templates, but you are free to edit them in the [Appearance / Messages](/v1/docs/messages) page.