Create a custom theme for roadmap

---
title: Create a custom theme for roadmap
description: Customize roadmap bar colors to align with your organization’s branding guidelines and maintain visual consistency.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/it-business-management/portfolio-planning/create-custom-roadmap-theme-ppw.html
release: brazil
product: Portfolio Planning
classification: portfolio-planning
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 2
breadcrumb: [Configuring roadmap in Portfolio Planning, Configure, Portfolio Planning, Strategic Portfolio Management]
---

# Create a custom theme for roadmap

Customize roadmap bar colors to align with your organization’s branding guidelines and maintain visual consistency.

## Before you begin

Role required: admin

## About this task

The roadmap applies the colors defined in the UI theme’s **Alert** and **Grouped** options.

## Procedure

1.  Navigate to **All** > **Now Experience Framework** > **Theme Management** > **Theme Builder**.

2.  From the Theme Builder Home page or Editor page, select **Create a theme**.

    The theme creation wizard opens.

3.  On the Before we get started window, select **Continue**.

    Complete the following steps for each screen in the wizard.

    **Note:**

    -   Only the step 1 \(Naming your theme\) is required to create a theme.
    -   Configuring items in steps 2–8 \(such as primary, secondary, and neutral colors, company logo, additional colors, fonts, and corner shapes\) doesn’t affect roadmap bar colors.
<table id="table_t55_npd_bxb"><thead><tr><th>

On this wizard screen...

</th><th>

Perform these steps...

</th></tr></thead><tbody><tr><td>

Step 1 of 9

First, let’s name your theme

</td><td>

1.  Enter a name for your theme in the **Theme name** field.
2.  \(Optional\) Enter a brief description for your theme in the **Description** field.
3.  Select **Next** to continue.
 \[Omitted image "create-roadmap-theme-step1.png"\] Alt text: Create custom roadmap theme step1.

</td></tr><tr><td>

Step 2–8 of 9

 -   Step 2: What's your brand's primary color
-   Step 3: Do you want to add a secondary color
-   Step 4: Now, choose a neutral brand color
-   Step 5: Do you want to add any additional colors
-   Step 6: Next, let's add your company logo
-   Step 7: Which font would you like to use
-   Step 8: Almost done. Choose the corner shape you prefer.


</td><td>

1.  \(Optional\) Choose the primary color, secondary color, neutral color, add any extra colors, company logo, font style, user interface corner shapes for your organization on the respective screens.
2.  Select **Next** to continue until you reach step 9.
 \[Omitted image "create-roadmap-theme-step2.png"\] Alt text: Create custom roadmap theme step2.

</td></tr><tr><td>

Finally, review your selections.

</td><td>

1.  Review all configured items \(colors, logo, font, and shape\).
2.  Select **Create theme** to finalize.
 \[Omitted image "create-roadmap-theme-step9.png"\] Alt text: Create custom roadmap theme step9.

</td></tr></tbody>
</table>4.  On the Theme Builder page under **Global styles**, select Color icon \(\[Omitted image "theme-builder-color-icon.png"\] Alt text: Theme builder color icon.\) to configure colors for your roadmap bars.

    \[Omitted image "custom-theme-color-icon-option.png"\] Alt text: Color option in creating a theme.

5.  Under UI colors, in the **Show** option, select **All colors**

    \[Omitted image "custom-theme-ui-colors-all-colors-option.png"\] Alt text: All colors option in creating a theme.

6.  Configure Alert colors.

    1.  Under UI colors, select **Alert**.

    2.  Configure colors for the following required alert options.

        -   **Alert Critical**
        -   **Alert High**
        -   **Alert Warning**
        -   **Alert Moderate**
        -   **Alert Info**
        -   **Alert Positive**
        -   **Alert Low**
    \[Omitted image "updating-roadmap-alert-colors.gif"\] Alt text: Customizing alert colors for roadmap.

7.  Configure Grouped colors.

    1.  Under UI colors, select **Grouped**.

    2.  Configure colors for the following required groups.

        -   **Grouped Blue**
        -   **Grouped Brown**
        -   **Grouped Gray**
        -   **Grouped Green**
        -   **Grouped Green**
        -   **Yellow Grouped**
        -   **Magenta Grouped**
        -   **Orange Grouped**
        -   **Orange Grouped**
        -   **Pink Grouped Purple**
        -   **Grouped Teal**
        -   **Grouped Yellow**
    \[Omitted image "updating-roadmap-grouped-colors.gif"\] Alt text: Customizing grouped colors for roadmap.


## What to do next

Publish your custom theme so that you can apply it to your roadmap. For details, see [Publish a custom roadmap theme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/it-business-management/portfolio-planning/publish-custom-roadmap-theme-ppw.md).