How to apply branding and customization values across the Hubs experience

You can customise the appearance of an Organization's Hubs, including logos, colours, the platform name, the favicon and language settings.

To apply this configuration manually from the Console, you must have the SuperAdmin role and navigate to SuperAdmin Options > System > Parameters.

Then, complete the following steps:

1. Select Create New.
2. Enter UIConfiguration in the Name field.
3. Select the appropriate Scope:
   • System applies the customization to all Organizations.
   • Organization applies the customization only to the selected Organization.
4. Paste the JSON template below into the Value String.
5. Replace the placeholder values with the information.
6. Save the parameter. The changes take effect immediately.

If the logo or favicon is specified as a URL, it must be hosted on the same domain as the application. Otherwise, convert it to a data URI before you apply the configuration.

JSON Template

Copy the template below and fill in the values. Remove any sections that you are not customizing.

{
  "configurationDomain": "string",
  "configurationOrganizationId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "configurationOrganizationName": "Organization Name",
  "gamAuthTypes": ["google"],
  "customization": {
    "osCustomization": {
      "availableLanguages": ["en", "es"],
      "defaultLanguage": "en",
      "meta": {
        "title": "Platform Name",
        "description": {
          "en": "English description",
          "es": "Descripción en español"
        },
        "favicon": "data:image/png;base64,..."
      },
      "termsOfServiceLink": "https://MyOrganization.com/terms",
      "styleOverrides": {
        "base/base": {
          "cssVariables": {
            "dark": {
              "--color-accent-primary-default": "#HEXVALUE",
              "--color-accent-primary-hover": "#HEXVALUE",
              "--color-background-from": "rgba(r, g, b, a)",
              "--color-background-to": "rgba(r, g, b, a)",
              "--color-accent-surface-elevation-1": "#HEXVALUE",
              "--color-accent-surface-elevation-2": "#HEXVALUE",
              "--color-text-primary-default": "#HEXVALUE",
              "--color-text-primary-hover": "#HEXVALUE",
              "--color-icon-primary-default": "#HEXVALUE",
              "--color-icon-primary-hover": "#HEXVALUE",
              "--color-border-primary-default": "#HEXVALUE",
              "--color-border-primary-hover": "#HEXVALUE"
            },
            "light": {
              "--color-accent-primary-default": "#HEXVALUE",
              "--color-accent-primary-hover": "#HEXVALUE",
              "--color-background-from": "rgba(r, g, b, a)",
              "--color-background-to": "rgba(r, g, b, a)",
              "--color-accent-surface-elevation-1": "#HEXVALUE",
              "--color-accent-surface-elevation-2": "#HEXVALUE",
              "--color-text-primary-default": "#HEXVALUE",
              "--color-text-primary-hover": "#HEXVALUE",
              "--color-icon-primary-default": "#HEXVALUE",
              "--color-icon-primary-hover": "#HEXVALUE",
              "--color-border-primary-default": "#HEXVALUE",
              "--color-border-primary-hover": "#HEXVALUE"
            }
          }
        }
      },
      "componentOverrides": {
        "header": {
          "translations": {
            "en": {
              "geai-header": {
                "logoSrcDark": "data:image/svg+xml,...",
                "logoSrcLight": "data:image/svg+xml,...",
                "alternativeText": {
                  "brandingLogo": "Company Name"
                }
              }
            },
            "es": {
              "geai-header": {
                "logoSrcDark": "data:image/svg+xml,...",
                "logoSrcLight": "data:image/svg+xml,...",
                "alternativeText": {
                  "brandingLogo": "Nombre de la empresa"
                }
              }
            }
          },
          "logos": {
            "logoWidth": { "en": "160px", "es": "160px" },
            "logoHeight": { "en": "auto", "es": "auto" }
          }
        },
        "authenticationProcess": {
          "translations": {
            "en": {
              "logoSrcDark": "data:image/svg+xml,...",
              "logoSrcLight": "data:image/svg+xml,...",
              "logoAltText": "Company Name"
            }
          },
          "logos": {
            "globantLogoHidden": false,
            "logoWidth": { "en": "200px" },
            "logoHeight": { "en": "auto" }
          }
        }
      }
    }
  }
}

For the full list of style tokens and component override types, see Apply branding and customization values across the Hubs experience.

Availability

Since version 2026-04.