Brand Configuration

Prev Next

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 page you can configure the logos, background images (in various formats) that are used into the DPS pages (e.g. login page).

     

    Login page

    Sidebar menu

    Sidebar menu collapsed

  • Menu Icons: when configuring the Views for your user personas, for each page placed in the navigation menu you can configure the icon.

    Sidebar menu pages

  • Secondary Icons: by entering the 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, another distinctive trait of a brand is its color palette.
In the Appearance / 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 used to contrast the primary-color when displaying text or icons into 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 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 variables declaration and usage in the 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 set of 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 into custom components you can refer to the ColorManager 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

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 component.
The key (case-insensitive) is used to allocate the color in the values color palette.

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 filter that displays a badge colored according to the value.

  • Status Diagram widget that displays horizontal bars colored according to the underlying machine status over time.

  • Bar Chart 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 into charts.

#FAFAFA

CHART_GRID

The color used by the chart grid.

#0A0A0A

CHART_HIGHLIGHT

The color used to highlight elements into charts.

#FF980077

CHART_LABEL

The color used by labels (axis and legend).

#0A0A0A

You can override these colors by adding to the Custom Filters component the following code.

colorManager.registerColor("CHART_DEFAULT", "#4C799C")

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: 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: each bar is drawn with a different color when the random color option is configured.

You can override this color palette by adding to the Custom Filters component the following code.

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 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 for each element, but try to define rules that match all the elements of the same category (e.g. buttons, fields, labels).  

  • Avoid to define XPath-based rules.
    Servitly may introduce new elements to the HTML that makes 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 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 page.

    <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>

    .labels-gray table tr td:nth-child(1) { background-color:#F2F2F2 }


  • in the Appearance / CSS page define the CSS rules matching the tag of the widget, in this way all the instance of that widget type will be affected.

    /* 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 article.

Labels

Servitly already provides all the labels you need to navigate the DPS (e.g. buttons, hints and 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 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.

  • Company Name: the name of the company (e.g. ACME) used, for instance, into notification emails.

All the labels can be translated into various Languages.

Messages

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


Servitly comes with a set of predefined mail templates, but you are free to edit them in the Appearance / Messages page.