Configure the GOV.UK Design System Service Portal theme

  • Release version: Australia
  • Updated June 1, 2026
  • 3 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Configure the GOV.UK Design System Service Portal theme

    The GOV.UK Design System (GDS) Service Portal theme provides a default, compliant look and feel based on the official Gov.UK design standards and color palette. ServiceNow customers can customize this theme to match their organization’s branding and user experience needs using the Branding Editor and other configuration options.

    Show full answer Show less

    Branding Editor

    • Access: Navigate to Service Portal > Service Portal Configuration > Branding Editor and select the UK Government Portal.
    • Customization Tabs:
      • Quick Setup: Change portal title, upload a scaled logo (max 46px height, 200px width), adjust logo padding, define tag line and background through JSON schema linking to homepage widgets.
      • Theme Colors: Modify colors including tag line color, homepage background color (using names, hex, RGB, or palette), and background images for the homepage container.
    • Theme Preview: Live updates in the preview area reflect changes made to colors and branding.
    • CSS Variables: Changes to theme colors are saved in the portal form’s CSS variables field in the platform UI.

    Header and Footer Configuration

    • Headers and footers are configured via the portal theme record (All > Service Portal > Service Portal Configuration > Portal Tables > Themes).
    • Select from default GDS-compliant Stock Header or Sample Footer widgets for quick reuse.
    • Enable Fixed Header or Fixed Footer options to keep these elements visible during page scrolling.
    • Customize header appearance colors in the Branding Editor under the Navbar section of the Theme Colors tab.
    • For header/footer menu creation and customization, refer to documentation on creating a portal header menu.

    Advanced Customization with CSS

    If your branding needs exceed what the Branding Editor offers, you can directly edit the CSS of the existing portal theme. Note that changes made via the Branding Editor or specific widget/page container settings override manual CSS edits.

    For detailed guidance on CSS customization, see instructions on creating a portal theme.

    Use the Branding Editor to give the GDS Service Portal its own look and feel.

    By default, the GOV.UK Design System Service Portal theme looks like:

    GDS Portal Default Theme.

    You can customize the default GDS Service Portal theme to suit your needs using the Branding Editor. To access the Branding Editor, navigate to Service Portal > Service Portal Configuration, then select Branding Editor.

    From the portal list, select UK Government Portal, and use the options on the Quick Setup and Theme Colors tabs to customize the portal.

    Branding Editor

    GDS Portal Branding Editor.
    Table 1. Quick Setup tab options
    Field Description
    Portal Title

    The name of your portal. Changing the name of the portal in the Branding Editor also changes the title on the portal form field in the platform UI.
    Logo The logo that appears in the header for your portal. This image is scaled to a maximum height of 46 px and a maximum width of 200 px.
    Logo padding Where you want the logo to sit in relation to the edge of the header. This information is stored in the CSS variables section on the portal form.
    Tag line & background

    Fields defined by the JSON schema in the Quick start config field on the portal record in the platform UI. The sample Service Portal adds Tag Line and Background to the Branding Editor using the following schema:

    [{
	"tagline": {
		"table" : "sp_instance",
		"sys_id" : "34fe3d96cb20020000f8d856634c9cf4",
		"field" : "title"
	},
	"hero_background": {
		"table" : "sp_container",
		"sys_id" : "be98a8d2cb20020000f8d856634c9c63",
		"field" : "background_image"
	}
}]
    For more information on editing the portal from the portal record page, see Configure the GOV.UK Design System Service Portal record.
    Tag line Introduce your users to a portal page with a tag line. This text is stored in an instance of the homepage search widget.
    Tag line color Select a color for the tag line.
    Homepage background color Add a color for your background. You can type in a color name, hex color, decimal (RGB), or select from the color palette.
    Background image Upload an image to appear in the background of your homepage. This image is stored in the container for the widget on your homepage.

    The default theme for the GDS Service Portal employs Gov.UK design system standards, and includes the official Gov.UK color palette (primary, secondary, background, text colors). To choose other colors, navigate to the Theme colors tab. The theme preview updates as you make changes. Changes made to the theme colors in the Branding Editor appear in the CSS variables field of the portal form in the platform UI.

    Add a header or footer

    To add a header or footer to your portal, you must configure it through the theme of the portal.
    1. Navigate to All > Service Portal > Service Portal Configuration > Portal Tables > Themes.
    2. Select the theme you want to add the header or footer to.
    3. In the header or footer field, select the header or footer you want to use for your portal.

      By default, the toolkit provides a GDS-compliant base system Stock Header or Sample Footer widgets that you may select for reuse.

    4. Optional: Select Fixed Header or Fixed Footer to lock the header or footer in one place so when users scroll up or down they remain in the same location on the page.
    5. To configure the appearance of the header, in the Service Portal configuration page, open the Branding Editor.
    6. Under the Theme Colors tab, use the color selectors in the Navbar section to control the colors in the header.

    For information on creating and customizing the header/footer menu, see Create a portal header menu.

    Customizing the Portal CSS

    Changes made in the Branding Editor or to specific components of the portal (such as a widget or a page container) override any customizations made to the theme. If your portal needs more customization than Branding Editor can provide, you can edit the CSS of the existing theme. For information on how to customize the portal theme using CSS, see Create a portal theme.