# Branding

The global styles of Cumulocity applications are authored in [SCSS](https://sass-lang.com/) and distributed via the npm package [@c8y/style](https://www.npmjs.com/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.

```css
: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](https://cumulocity.com/codex/common-tasks/application-styles) 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:

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

For the full set of available design tokens, see the [design tokens documentation](https://cumulocity.com/codex/design-system/design-tokens/branding-tokens).

## Branding editor

The branding editor in the Administration application provides a form to configure brand colors, logos and typography without any code. See [Branding](https://cumulocity.com/docs/enterprise-tenant/customization/#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`):

```sh
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](https://cumulocity.com/codex/common-tasks/application-styles) for details and examples.