> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Container app branding

> Customize the visual appearance of the SaaS container app with organization-level branding settings.

## Overview

**Container app branding** lets organization administrators customize the visual appearance of the SaaS container app — the runtime that wraps FlowX solutions for end users. Branding settings apply organization-wide across all workspaces and projects.

<CardGroup cols={2}>
  <Card title="Custom colors" icon="paintbrush">
    Set primary, secondary, header, and page background colors
  </Card>

  <Card title="Logo upload" icon="image">
    Replace the default logo with your organization's branding
  </Card>

  <Card title="Header control" icon="toggle-on">
    Show or hide the container app header (useful for iframe embeds)
  </Card>

  <Card title="Live preview" icon="eye">
    Preview branding changes before saving
  </Card>
</CardGroup>

***

## Accessing branding settings

To configure branding:

1. Navigate to **Organization Admin** in FlowX Designer
2. Select **Generic App Branding** under **Design Assets**

<Info>
  Branding settings require the `org_branding_read` permission to view and `org_branding_edit` permission to modify.
</Info>

The branding page has a form panel on the left and a live preview on the right. Use the layout toggle in the header to switch between flat view, accordion view, or form-only mode.

***

## Branding properties

### General

<ParamField path="Primary Color" type="hex color">
  Accent color used for buttons, active states, and interactive elements on the solutions page.
</ParamField>

<ParamField path="Secondary Color" type="hex color">
  Used for avatar backgrounds and secondary accents.
</ParamField>

***

### Header

<ParamField path="Show Header" type="boolean">
  Toggle the container app header on or off.

  **Default:** ON

  <Tip>
    Turn off the header when embedding the container app in an iframe where the parent app provides its own navigation.
  </Tip>
</ParamField>

<ParamField path="Logo" type="file upload">
  Custom logo displayed in the header. Replaces the default FlowX logo.

  **Supported formats:** PNG, JPG, SVG, WEBP

  **Max file size:** 2 MB
</ParamField>

<ParamField path="Background Color" type="hex color">
  Header background color.

  **Default:** `#2A313A`
</ParamField>

<ParamField path="Shadow" type="preset">
  Header drop shadow. Choose from preset sizes or turn off completely.

  **Options:** None, XS, S, M, L, XL

  Each preset configures the shadow color, opacity, and blur radius.
</ParamField>

***

### Solutions page

<ParamField path="Page Background Color" type="hex color">
  Background color of the solutions landing page where users select which solution to open.
</ParamField>

***

## How branding is applied

When an end user loads the container app:

1. The app resolves the organization context (from the hostname or organization code)
2. Branding configuration is included in the organization lookup API response
3. The container app applies branding values as CSS custom properties
4. Colors, logo, and header settings take effect immediately

<Info>
  Branding is applied before authentication, so the login landing page also reflects the organization's branding.
</Info>

***

## Related resources

<CardGroup cols={2}>
  <Card title="Container app authentication" icon="lock" href="./container-app-authentication">
    Configure authentication flows and session management for container apps
  </Card>

  <Card title="Organization settings" icon="building" href="./organization-settings">
    Manage organization-level configuration
  </Card>

  <Card title="FlowX SaaS overview" icon="cloud" href="./saas-overview">
    Understand the FlowX SaaS deployment model
  </Card>
</CardGroup>