Skip to main content
Version: v1.2.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).

Additionally, you can set a notice and consent banner directly in the branding ConfigMap to display a pre-authentication message on the login page (refer to Notice and Consent Banner).

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

The branding ConfigMap supports an optional notice key that displays a pre-authentication notice and consent banner on the Canvas login page. This feature satisfies STIG controls SRG-APP-000068 and SRG-APP-000069.

When the notice key is set, all login controls (email/password and SSO) are disabled until the user checks an acknowledgment box. When the key is unset or empty, no banner is rendered and login behaves as before.

Configuration​

Add the notice key directly to the branding ConfigMap (the same ConfigMap created by the Helm chart):

apiVersion: v1
kind: ConfigMap
metadata:
  name: branding
  namespace: mural-system
data:
  notice: |
    You are accessing a U.S. Government (USG) Information System (IS) that is
    provided for USG-authorized use only. By using this IS, you consent to the
    following conditions...

Behavior​

  1. Notice unset or empty - The banner is not rendered. Login controls are available immediately.
  2. Notice set - The banner appears on the login page with the configured text. Login and SSO controls are disabled until the user checks the acknowledgment box.
  3. Text rendering - The notice is rendered as plain text (not HTML). Newlines are preserved.
  4. Live updates - The text is configurable without a code change or redeploy of Canvas. Edit the ConfigMap and the change takes effect on the next page load.

Validation​

  1. Check that the notice key was added to the ConfigMap.

    kubectl get configmap branding --namespace mural-system --output yaml

  2. Navigate to the Canvas login page. Verify that the notice banner appears with the configured text.

  3. Verify that login controls are disabled until you check the acknowledgment box.