Skip to main content
Version: v1.1.x

Customize Branding

PaletteAI allows you to customize the appearance of the PaletteAI User Interface (UI) during installation or upgrades. Using Helm chart values under canvas.branding, you can customize the following front-end elements:

  1. Header colors - Background color for the top navigation bar (text color is derived for contrast).
  2. Sidebar colors - Background color for the sidebar navigation (text color is derived for contrast).
  3. Primary brand color - Accent color for buttons, links, and related tokens.
  4. Primary logo - Custom mark for the login page and header (see placement below).
  5. Secondary logo - Optional second mark in the header when used with a primary logo.
  6. Favicon - Icon shown in the browser tab.
  7. ConfigMap name and namespace - Where the branding ConfigMap is created (optional overrides).

All branding fields are optional. For example, you can set only primaryLogo and leave the rest empty. Invalid or malformed values are ignored and the UI falls back to defaults. The legacy ConfigMap key logoUrl is not read; use primaryLogo (and optionally secondaryLogo) instead.

Asset formats and limits​

  1. HTTP(S) URLs - Canvas loads these same-origin via /ai/api/brand-logo (or your base path + /api/brand-logo). Supported image types from the remote server include PNG, JPEG, GIF, SVG, WebP, and ICO. Maximum size per asset: 2 MB.
  2. Data URIs - Must be base64-encoded data:image/png;base64,..., data:image/jpeg;base64,..., or data:application/octet-stream;base64,.... Other data URI types are rejected. (Use an HTTP(S) URL if you need SVG, GIF, or WebP.)

Logo placement​

  1. Login - Uses primaryLogo only (the secondary logo does not appear on the login page). The logo sits in a fixed-height area of 56px (3.5rem); the image keeps aspect ratio within that space.
  2. Header, primary only - primaryLogo appears on the right side of the header (company-logo slot), scaled with object-fit: contain to a maximum height of 32px.
  3. Header, primary + secondary - primaryLogo is on the left (after the product switcher), up to 26px tall. secondaryLogo is on the right, up to 32px tall.
  4. secondaryLogo without primaryLogo - Ignored; set primaryLogo first.

Prerequisites​

  • Helm installed.

  • kubectl installed and available in your $PATH.

  • The KUBECONFIG environment variable set to the path of the PaletteAI hub cluster's kubeconfig file.

    export KUBECONFIG=<kubeconfig-location>

  • Access to the PaletteAI values.yaml Helm chart.

  • A text editor to modify the PaletteAI values.yaml Helm chart.

  • For HTTP(S) assets, URLs reachable from the PaletteAI hub cluster (HTTPS recommended).

  • For data URIs, a small PNG or JPEG encoded as base64 (see asset formats above).

Enablement​

  1. Open your PaletteAI values.yaml file in a text editor of your choice. Locate the canvas.branding section. Modify the existing values, as desired.

    canvas:
      branding:
        brandColor: ''
        configMapName: 'branding'
        namespace: ''
        favicon: ''
        headerBackgroundColor: ''
        sidebarBackgroundColor: ''
        primaryLogo: ''
        secondaryLogo: ''

    The following table describes the fields in additional detail. All fields are optional.

    FieldDescriptionDefault
    brandColorPrimary brand color; drives the brand-bold token (buttons, links, etc.).''
    configMapNameKubernetes name of the branding ConfigMap.branding
    namespaceNamespace where the ConfigMap is created. If empty, the Helm release namespace is used.''
    faviconData URI or HTTP(S) URL. Recommended source: 32×32 or 48×48 px PNG, or a multi-resolution ICO. Browsers render favicons small; keep the design simple and legible at 16px. Max 2 MB when loaded via HTTP(S).''
    headerBackgroundColorBackground color for the header. Text color is derived for contrast.''
    sidebarBackgroundColorBackground color for the sidebar navigation. Text color is derived for contrast.''
    primaryLogoData URI or HTTP(S) URL. Shown on login (56px-tall area) and in the header (see placement). Recommended source: at least 128×128 px for sharp scaling on high-DPI displays, or a wide mark (e.g. 256×64) with height ≥ 64 px; aspect ratio 1:1 or wider. Max 2 MB when loaded via HTTP(S).''
    secondaryLogoData URI or HTTP(S) URL; requires primaryLogo. Header right slot, up to 32 px tall. Recommended source: same as primary (e.g. 128×128 or wide 256×64). Max 2 MB when loaded via HTTP(S).''

    Display reference (after scaling in the UI)

    Asset / combinationEffective max display height
    Login (primaryLogo)56px
    Header right, primary only32px
    Header left (primaryLogo + secondaryLogo)26px
    Header right (secondaryLogo)32px
    FaviconBrowser-defined (typically 16–32px)
    tip

    Colors can be specified in the following formats:

    1. Hex colors (#FFFFFF, #FFF)
    2. RGB (rgb(255, 255, 255))
    3. RGBA (rgba(255, 255, 255, 0.8))

  2. Apply your changes by upgrading your PaletteAI installation.

    helm upgrade paletteai spectrocloud/paletteai \
      --namespace mural-system \
      --values values.yaml

Validate​

  1. Check that the ConfigMap was created successfully. Use the name from canvas.branding.configMapName if you overrode it (default branding).

    kubectl get configmap branding --namespace mural-system

  2. View the ConfigMap contents. Check that the ConfigMap was populated with the correct values.

    kubectl describe configmap branding --namespace mural-system

  3. Log in to PaletteAI to verify the UI reflects the values defined in the ConfigMap. If the UI is not using the expected colors or logo, check the Canvas pod logs for any branding-related errors.

    kubectl logs deployment/canvas --namespace mural-system | grep --ignore-case brand