Styles, themes and presets in UI Builder

Why there are three layers

Imagine styling every button in a workspace by hand. Each one would need its colour, font and corner shape set, on every page, by every developer. A rebrand would mean visiting hundreds of components, and some would always be missed. Users who prefer dark mode would get whatever each developer happened to pick.

So ServiceNow splits the work. The look that should be the same everywhere lives in one place, the theme. The small adjustments a single page needs live on the Styles tab. And the setup that a component needs for a common job, such as a form on a record page, comes as a preset, so nobody has to wire it from scratch every time.

The skill to learn in this lesson is knowing which layer a change belongs to. Put it in the wrong one and it either takes hours, or it quietly breaks for some users.

The Styles tab

You met the Styles tab in the editor tour. Select a component, or a wrapper such as Body, a column layout or a column, and open Styles in the configuration panel. Which sections you see depends on what you selected.

Section	What it changes	Example
Spacing	Padding and margin	Keep a card’s text away from its edges
Sizing	Width and height, with minimum and maximum values	Stop a chart from growing taller than 400px
Background	The colour behind the element	A light tint behind a side panel
Border	Thickness, type, colour and corner shape	A thin line and rounded corners around a card
Shadow	A shadow under the element	Make a card look raised off the page
Layout and Alignment	Direction, alignment and gaps, as in the last lesson	Centre a component within its column
Accessibility	ARIA settings for column layouts and columns, used by screen readers	Name a column “Filters” so a screen reader announces it

Two of these trip up nearly every beginner. Padding is space inside an element, between its edge and its content. Margin is space outside it, between it and its neighbours. If a card’s text touches its border, you want padding. If two cards are touching each other, you want margin, or better still, a Gap on the layout that holds them.

When the sections are not enough, the View and edit CSS link at the bottom of the Styles tab opens a CSS editor for that component or for Body. Use it sparingly. Some components have built-in styling that you cannot override with CSS in UI Builder, and CSS that fights a component’s design tends to break when that component is updated.

Style the wrapper, not every component

Styling a wrapper, such as a column, applies to what is inside it. If every component in a side panel needs the same background, set it once on the column. This is less work today, and when someone later adds a component to that column, it fits in without any extra styling.

Themes: the look of the whole experience

A theme is a set of style records covering colours, typography, imagery such as the logo and banner, and shapes such as how rounded corners are. UI Builder experiences use the Polaris theme unless someone changes it, and you can see which theme an experience uses in its Experience settings, under Branding and theming.

Themes are built and published with Theme Builder, a visual tool for administrators. Polaris and Coral are read-only base themes, so a company that wants its own look copies one and customises it. Themes can also have variants, such as a dark version or a higher-contrast one, and each user picks the variant they want in their preferences.

That last point changes how you should style things. You do not know which variant a user has chosen. The moment you type a fixed colour into a style, such as a white background, you have taken that component out of the theme: it stays white even when the user is in dark mode. Press Play to watch it happen.

1. Theme
2. Column
3. Card
4. Dark mode
5. Fix

Card

1. Step 1 of 5 · Theme

   The theme sets the starting look

   You add a card with a Heading and some text to a page. Before you touch the Styles tab at all, it already has a font, text colours and a background. Those come from the experience's theme, which every component on every page follows.

   Theme

   Polaris (light)

   Column background

   (from the theme)

   Card background

   (from the theme)

   Card spacing

   (component default)

   Text colour

   Dark, from the theme

   Readable

   Yes

2. Step 2 of 5 · Column

   Style the wrapper

   You select the column the card sits in and give it a soft background on the Styles tab. Styling a wrapper affects what is inside it, so the card now sits on a tinted panel. You changed one thing instead of styling every component in the column.

   Theme

   Polaris (light)

   Column background

   Soft tint

   Card background

   (from the theme)

   Card spacing

   (component default)

   Text colour

   Dark, from the theme

   Readable

   Yes

3. Step 3 of 5 · Card

   Style the card itself

   You select the card and, on its Styles tab, add Padding so the text does not touch its edges, and a rounded border. To make it stand out, you also pick a Custom background colour: #FFFFFF, plain white. In the light theme, it looks great.

   Theme

   Polaris (light)

   Column background

   Soft tint

   Card background

   #FFFFFF (typed in)

   Card spacing

   Padding 16px, rounded border

   Text colour

   Dark, from the theme

   Readable

   Yes

4. Step 4 of 5 · Dark mode

   A user switches to the dark variant

   Priya prefers dark mode and picks the dark variant in her preferences. The theme switches: backgrounds go dark and text turns light. But your card's background is a fixed #FFFFFF, so it stays white, and the light text on it almost disappears.

   Theme

   Polaris (dark)

   Column background

   Soft tint

   Card background

   #FFFFFF (still white)

   Card spacing

   Padding 16px, rounded border

   Text colour

   Light, from the theme

   Readable

   No: light text on white

5. Step 5 of 5 · Fix

   Use a theme colour instead

   You remove the fixed colour and set the card background in its CSS to a theme colour variable instead. Now the card background comes from the theme too: light in the light variant, dark in the dark one. Text and background always match, whatever theme the user picks.

   background-color: RGB(var(--now-color_background--primary));

   Theme

   Polaris (dark)

   Column background

   Soft tint

   Card background

   Theme colour (follows light or dark)

   Card spacing

   Padding 16px, rounded border

   Text colour

   Light, from the theme

   Readable

   Yes

← Back▶ PlayNext →

The fix in the last step uses a theme colour variable instead of a fixed colour. Next Experience exposes its theme colours as CSS variables whose names start with --now-color, and anything that uses them follows the user’s theme and variant automatically. When you need a colour in CSS, reach for one of those variables before you reach for a hex code.

Presets: components that arrive set up

Some components come with presets: predefined property values, data bindings and event mappings for a common use case. A Form component’s preset, for example, can arrive already set up with the fields that usually appear on a record page. Presets are defined outside the page, so when ServiceNow improves a preset, every page using it benefits.

Here is how they work in practice:

• When you add a component that has presets, it configures itself with its default preset. You can pick a different one in the configuration panel and select Apply.
• You have already seen the other option, None - Configure the component manually, in the Repeater lesson. It means “no preset, I will set everything myself”.
• A preset often needs a controller, which holds the data resources it uses. If that controller is not on the page yet, the preset asks for its settings and adds it for you.
• To change one value a preset set, select the lock icon next to it and enter your own value. That value is now yours to maintain, exactly like the café that swapped a piece of its kit.
• To stop using a preset, select Remove current preset. To start over completely, select the component’s name in the configuration panel and choose Reset component.

A good habit: start from a preset when one fits your job, override only what you truly need to, and choose None only when the preset would not help.

See it in your instance

1. Open UI Builder in your PDIPDI (Personal Developer Instance)A free ServiceNow instance you get from developer.servicenow.com to practise on safely.Learn more → and open a test page.
2. Select Body in the Content panel and open the Styles tab. Notice which sections a wrapper has.
3. Select a Heading or a Button and open its Styles tab. Add some Padding under Spacing, then try a Border with rounded corners, and watch the stage.
4. Scroll to the bottom of the Styles tab and open View and edit CSS to see the CSS behind your changes. Close it without editing.
5. Open Experience settings at the top right and find the Themes list under Branding and theming. Note which theme your experience uses.
6. Add a component and watch the configuration panel: if it offers presets, you will see the current preset and an option to choose another one or configure it manually.
7. Undo your changes or delete the test components if you want to keep the page clean.

Practice: theme, Styles tab or preset?

PracticeTheme, Styles tab or preset?

A theme changes the look of a whole experience. The Styles tab changes one component or wrapper. A preset sets up how a component is configured. Where would you go for each request?

Theme0

Styles tab0

Preset0

1. The company has rebranded. Every page of the workspace should use the new brand colour and font.

   ThemeStyles tabPreset

   Answer: Theme. Brand colours and fonts belong in the theme, so every component on every page picks them up. Restyling each page by hand would take weeks and drift over time.

2. One card on the home page needs more space inside it and rounded corners.

   ThemeStyles tabPreset

   Answer: Styles tab. A change to one component is a style: Padding under Spacing, and the corner shape under Border.

3. You add a Form to a record page and want it to arrive with the usual fields, data and buttons already connected.

   ThemeStyles tabPreset

   Answer: Preset. That is exactly what a preset does: it applies ready-made property values, data bindings and event mappings for a common use case.

4. Some users need a higher-contrast version of the colours to read the screen comfortably.

   ThemeStyles tabPreset

   Answer: Theme. Themes can have variants, and users pick a variant in their preferences. Every component follows it automatically.

5. The heading sits too close to the list below it. You want a gap of 16px under it.

   ThemeStyles tabPreset

   Answer: Styles tab. Spacing on one component is set in the Spacing section of the Styles tab, or with Gap on the layout that holds them both.

6. A component came with a default configuration, but you want to set every property yourself from scratch.

   ThemeStyles tabPreset

   Answer: Preset. You remove the current preset, or pick "None - Configure the component manually" when you add it, and then configure it by hand.

7. The logo in the workspace header must be replaced with the new one.

   ThemeStyles tabPreset

   Answer: Theme. Logos, banners and other branding images are part of the theme, not of a single page.

8. The side-panel column on one page should have a light grey background.

   ThemeStyles tabPreset

   Answer: Styles tab. Select the column and set its Background on the Styles tab. Everything inside the column sits on that background.

Try again

What’s next

You have finished the Components and Layout module. You can configure components, arrange them with layouts, repeat them with a Repeater, and style them in a way that respects the theme. The next module, Data and State, starts with Data resources: getting records onto a page, where you will finally learn properly how pages fetch the data their components show.