Branding

The global styles of Cumulocity applications are authored in SCSS and distributed via the npm package @c8y/style (entry point: main.scss). These styles are based on Bootstrap 3.

To customize colors, logos and fonts, use:

• CSS custom properties — at build time or configurable at runtime (recommended)
• Branding editor — in the Administration application, no code required

Important: LESS-based styling was removed in version 1024 (January 2026). Build-time LESS variable overrides (@import '~@c8y/style/extend.less' followed by @brand-primary: ...) no longer apply. Use CSS custom properties instead.

CSS custom properties

A subset of the styling is exposed via CSS custom properties. Here is a list of the most commonly used variables.

:root {
--brand-primary: gold ;
--brand-complementary: darkgreen;
--brand-dark:  red;
--brand-light: purple;
--gray-text: #333;
--link-color: var(--brand-primary);
--link-hover-color: var(--brand-complementary);
--body-background-color:#f2f3f4;
--brand-logo-img: url('/apps/ui-assets-management/logo-nav.svg');
--brand-logo-img-height: 20%;
--navigator-platform-logo: url('/apps/ui-assets-management/logo-nav.svg');
--navigator-platform-logo-height: 36px; /* height of the logo set to 0 to hide the element */

--navigator-font-family: inherit;
--navigator-app-name-size: 16px; /* font size of the application name set to 0 to hide app's name */
--navigator-app-icon-size: 46px; /* size of the application icon. set to 0 to hide the application icon.*/
--navigator-bg-color: var(--brand-primary);
--navigator-header-bg: var(--navigator-bg-color);
--navigator-text-color: #ffffff;
--navigator-separator-color: rgba(0,0,0,.05);
--navigator-color-active: var(--navigator-text-color);
--navigator-active-bg: var(--brand-complementary);

--header-color: #ffffff;
--header-text-color: var(--brand-dark);
--header-hover-color:var(--brand-primary);
--header-border-color: rgba(57,72,82,.05);

--font-family-base: "Roboto", Helvetica, Arial, sans-serif;
--headings-font-family: var(--font-family-base);
}

These can be customized at runtime using application options via the property brandingCssVars. A branding always has to be applied to all of your applications, so it is recommended to set it through dynamic public options:

{
  "brandingCssVars": {
    "brand-primary": "#1976d2",
    "navigator-bg-color": "#1565c0"
  }
}

For the full set of available design tokens, see the design tokens documentation.

Branding editor

The branding editor in the Administration application provides a form to configure brand colors, logos and typography without any code. See Branding.

Extending @c8y/style with SCSS

For advanced use cases you can extend the SCSS sources directly. Install the base styles from npm (not needed when using the Web SDK CLI c8ycli):

npm install @c8y/style

The package exposes the following SCSS entry points:

• main.scss — the complete application stylesheet
• branding.scss — variables and exported styles, configurable via @use ... with (...)
• extend.scss — variables only, for building a custom branding on top

Refer to the styling documentation in the Web SDK style guide for details and examples.