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

# Brand the partner portal

> Apply your logos, colors, font, and login copy so the portal, login screen, and experiences all look like your product.

> For partner marketing and partner ops who want the portal to feel like a natural extension of your product.

Branding is what turns a generic portal into your product. This guide covers the whole job end to end: the logos partners see everywhere, the colors that theme the login screen and the experiences inside, the typeface that carries your brand voice, and the words on the login screen. Set it once and it propagates to every partner-facing surface, so the first sign-in and every visit after feel unmistakably yours.

## What you'll achieve

A partner portal styled top to bottom in your brand: your logos in headers and icons, your colors on buttons, tabs, and backgrounds across both the login screen and the experiences, your font rendering portal text, and login copy written in your voice. Partners experience a branded product from the login page onward.

## Before you start

<Steps>
  <Step title="Confirm admin access">
    You need admin access to company and portal settings to change branding.
  </Step>

  <Step title="Gather your brand assets">
    Have your logo files (a square version and a horizontal version), your brand color values, and a font file ready if you use a custom typeface.
  </Step>
</Steps>

## Watch it

<Tabs>
  <Tab title="Video">
    <video controls playsInline preload="none" poster="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/01.png?v=1783331328" className="w-full rounded-xl" src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/video.webm?v=1783331328#t=2.5" />
  </Tab>

  <Tab title="Click through">
    <iframe className="w-full rounded-xl" style={{ width: "100%", aspectRatio: "16 / 11", border: 0, backgroundColor: "#FAFAFA" }} src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/walkthrough.html?v=1783331328" />
  </Tab>
</Tabs>

## Steps

### Add your logos

<Steps>
  <Step title="Open company settings">
    Go to [Company settings](https://app.introw.io/settings/company). Logos are set here because they identify your organisation across every surface, not just one portal.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/01.png?v=1783331328" alt="Open company settings" />
    </Frame>
  </Step>

  <Step title="Upload both logo formats">
    Add each logo so Introw can pick the right one for each context:

    * **Square logo** - used where space is tight, such as the favicon, icons, and compact headers. Upload a high-resolution square image so it stays crisp when scaled down.
    * **Horizontal logo** - used in wide areas like the portal header, the login screen, and emails. Upload a horizontal version so it fills those spaces without stretching.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/02.png?v=1783331328" alt="Upload both logo formats" />
    </Frame>
  </Step>
</Steps>

### Set the portal and login colors

<Steps>
  <Step title="Open portal settings">
    Go to [Portal settings](https://app.introw.io/settings/portal). The first tab controls the login screen and the portal shell partners sign in to. A live preview updates as you change each value.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/04.png?v=1783331328" alt="Open portal settings" />
    </Frame>
  </Step>

  <Step title="Set the portal colors">
    Each color is chosen with a color picker; pick the brand value or paste a hex code:

    * **Button color** - the fill of primary buttons on the login and portal. Use your primary brand color so the main action stands out.
    * **Button text color** - the label color on those buttons. Choose a value with enough contrast against the button color so text stays readable.
    * **Background color** - the page background behind the login and portal shell. Keep it close to white or a light brand tone so content stays legible.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/05.png?v=1783331328" alt="Set the portal colors" />
    </Frame>
  </Step>

  <Step title="Upload a custom font">
    Upload your brand font file so portal text renders in your typeface instead of a generic system font. Use a supported web font format; if no custom font is uploaded, the portal falls back to its default font.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/11.png?v=1783331328" alt="Upload a custom font" />
    </Frame>
  </Step>
</Steps>

### Theme the experience chrome

<Steps>
  <Step title="Open the Experience branding tab">
    Still in [Portal settings](https://app.introw.io/settings/portal), switch to the **Experience** branding tab. These colors theme the experiences partners see after they log in, which have more surfaces than the login screen.

    * **Header color** - the background of the experience header bar. Default is white; set it to a brand tone if you want a colored header.
    * **Background color** - the page background behind experience content.
    * **Button color** and **Button text color** - the fill and label of buttons inside experiences, matching the login styling.
    * **Active tab color** - the highlight on the currently selected stage tab, so partners can see where they are. Use an accent color that reads clearly against the header.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/22.png?v=1783331328" alt="Open the Experience branding tab" />
    </Frame>
  </Step>
</Steps>

### Customize the login copy

<Steps>
  <Step title="Edit the login screen text">
    On the login branding tab, override the default wording so the sign-in page speaks in your voice. Each step of the login flow has editable copy:

    * **Enter email step** - the **Title**, **Subtext**, email field **Placeholder**, and **Button text** partners see when they first arrive. There is also an **SSO button text** shown when single sign-on is offered. Leave any field blank to keep the default wording.
    * **Verification step** - the **Title** and **Subtext** shown while a partner confirms the link sent to their email.
    * **No access step** - the message shown when someone without access tries to sign in, so they know how to request it.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/23.png?v=1783331328" alt="Edit the login screen text" />
    </Frame>
  </Step>

  <Step title="Save and preview">
    Settings save as you edit; use the live preview to confirm the login screen and experiences reflect your brand before partners see them.

    <Frame>
      <img src="https://assets.introw.io/docs/features/portal/branding/guides/brand-the-partner-portal/steps/33.png?v=1783331328" alt="Save and preview" />
    </Frame>
  </Step>
</Steps>

## Verify it worked

Open the portal login screen: it shows your horizontal logo, your colors on the button and background, your font, and your custom copy. Sign in and open an experience: the header, tabs, and buttons reflect the experience colors, and the square logo appears as the favicon. The brand now applies everywhere partners look.

## Related

<CardGroup cols={2}>
  <Card title="Brand email notifications" icon="book-open" href="./brand-email-notifications">
    Carry the brand into the emails partners receive.
  </Card>

  <Card title="Build and publish a portal experience" icon="book-open" href="/features/portal/experiences/guides/build-and-publish-a-portal-experience">
    Build the experiences your branding themes.
  </Card>

  <Card title="Connect a custom domain" icon="book-open" href="/features/portal/custom-domains/guides/connect-a-custom-domain">
    Serve the branded portal on your own hostname.
  </Card>

  <Card title="Implementation reference" icon="screwdriver-wrench" href="../technical">
    Full branding configuration options.
  </Card>
</CardGroup>
