Variables to customize a theme for Desktop Assistant

  • Release version: Zurich
  • Updated October 14, 2025
  • 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 Variables to customize a theme for Desktop Assistant

    This guide details CSS variables you can modify to customize the theme of the Desktop Assistant user interface in ServiceNow Zurich release. By adjusting these variables, you can tailor the appearance of colors, typography, spacing, borders, and interactive elements to align with your organization's branding and design preferences.

    Show full answer Show less

    Key Variables and Their Practical Use

    • Banner Colors: Customize the banner's gradient using various shades of the primary brand color, ranging from darkest to lighter shades, enabling a cohesive brand presence.
    • Layout and Typography: Control background colors for primary and secondary UI areas, base font size, font weight, font family (default is Lato), line height, and specific heading sizes. These variables ensure consistent text styling and readability across the Desktop Assistant.
    • Color Variables: Define colors for primary and secondary text, tertiary/help text, muted text, neutral greys, and hyperlinks. These settings manage text visibility and UI clarity.
    • Button and Interactive Elements: Adjust text and background colors for buttons, including primary buttons, using brand colors to maintain interactive consistency.
    • Status and Alert Colors: Set colors for warning, success, and danger states, including darker shades and alert backgrounds, to clearly communicate UI statuses.
    • Border and Layout: Configure border colors for primary, secondary, and tertiary UI elements, border widths, styles (solid by default), and corner rounding through border radius. Input fields also inherit these border styles.
    • Spacing: Manage spacing variables ranging from extra-extra-small to extra-extra-large for margins, padding, and layout gaps, allowing precise control over UI element placement and whitespace.
    • Font Weight, Shadows, and Effects: Define font weights for bold text and apply shadow effects to panels and UI components to enhance depth and visual hierarchy.

    Practical Benefits for ServiceNow Customers

    By leveraging these variables, you can:

    • Create a visually consistent Desktop Assistant experience that reflects your corporate branding.
    • Enhance UI readability and accessibility by adjusting font sizes, weights, and colors.
    • Improve user interaction clarity through well-defined button styles and alert colors.
    • Ensure balanced and aesthetically pleasing layouts by controlling spacing and borders.
    • Maintain flexibility and scalability in theming without deep CSS coding, using straightforward variable adjustments.

    These customizable variables empower you to efficiently tailor the Desktop Assistant UI to meet your specific organizational needs while maintaining alignment with ServiceNow’s design standards.

    You can modify specific CSS variables to customize themes for Desktop Assistant.

    Table 1. Banner color
    Variable Description Order
    brand-primary-darkest The darkest shade of the brand's primary color. 1
    brand-primary-darker Slightly lighter shade than the darkest shade of the brand's primary color. 2
    brand-primary Primary brand color used in the UI. 3
    brand-primary-lighter Lighter shade than the primary brand color. 4
    You can apply a gradient to the banner by using the specified colors in the specified order.
    Table 2. Layout and typography variables
    Variable Description Default
    background-secondary Secondary background color used for UI elements that are not the main focus. #ffffff
    background-primary Primary background color used for main focus areas on the UI. #f6f6f8
    font-size-base Base font size used for UI text. 16px
    font-weight-base Base font weight used for UI body text. 400
    font-family-sans-serif Default sans serif font family used for UI text. Lato
    line-height-base Default text line height for spacing and readability. 1.4
    font-size-h5 Font size for heading level 5. 16px or value of the $font-size-base variable.
    font-size-h4 Font size for heading level 4. 18px

    This value is calculated using the ceil () function: ceil(($font-size-base * 1.125)).

    For example, if the font-size-base value is 16 px, the font-size-h4 value is 18 px: ceil((16px * 1.125))//18px.
    font-size-h3 Font size for heading level 3. 20px

    This value is calculated using the ceil () function: ceil(($font-size-base * 1.25)).
    font-size-xl Extra large font size typically used for titles or large labels. 24px

    This value is calculated using the ceil () function: ceil(($font-size-base * 1.5)).
    font-size-xs Extra small font size typically used for minor labels or captions. 12px

    This value is calculated using the ceil () function: ceil(($font-size-base * 0.75)).
    font-size-small Smaller font than the base font, used for secondary text. 14px

    This value is calculated using the ceil () function: ceil(($font-size-base * 0.875)).
    headings-font-family Font family used for headings. Lato
    headings-font-weight Font weight used for headings. 600
    Table 3. Color variables
    Variable Description Default
    text-primary Main color used for body text. #181A1F
    text-color General text color for the UI, which is the same as text-primary.

    Set a value for this variable only if you have not already defined the value for text-primary.

    		 $text-primary!default

    For example, $text-primary: #000000 !default;
    text-secondary Color used for less prominent UI text. #474D5A
    text-tertiary Color for tertiary text such as help text and annotations. #656E81
    text-muted Muted text color that is generally the same as text-tertiary.

    Set a value for this variable only if you have not already defined the value for text-tertiary.

    		 $text-tertiary!default

    For example, $text-tertiary: #999999 !default;
    color-grey Neutral grey color used for elements such as borders and backgrounds. #C6CBCB
    link-color Color for hyperlinks. #3c59e7
    Table 4. Button and interactive element variables
    Variable Description Default
    btn-default-color Default color for button text. $brand-primary
    btn-primary-color Text color for primary buttons. $text-white
    btn-primary-bg Background color for primary buttons. $brand-primary
    brand-primary Primary brand color used across the UI. #4f52bd!default;
    brand-primary-darker A darker shade of the primary brand color. #333579
    brand-primary-darkest Darkest shade of the primary brand color. #1D1E46
    brand-primary-lighter A lighter shade of the primary brand color. #8789D2
    brand-primary-lightest Lightest shade of the primary brand color. #D1D2EE
    Table 5. Status and alert colors
    Variable Description Default
    brand-warning-darker Darker shade of UI warning state color. #AFA400
    brand-success-darker Darker shade of color used for success states on the UI. #3B7F00
    brand-danger-darker Darker shade of color used for danger states on the UI. #CC293C
    alert-warning-bg Background color used for alerts and warnings. $state-warning-bg
    badge-color Text color for badges on the UI. $text-white
    Table 6. Border and layout variables
    Variable Description Default value
    border-primary Primary border color used for main UI elements. #8790A1
    border-secondary Secondary border color used for less prominent UI elements. #ACB2BE
    border-tertiary Tertiary border color used for background borders. #DADDE2
    border-width-xs Extra-small border width used for UI elements like thin lines or light dividers. 1px
    border-style-solid Sets the border style to solid. solid
    border-radius-base Base border radius for rounding corners of UI elements. 4px
    input-border Border style for input fields. $border-primary
    Table 7. Spacing variables
    Variable Description Default value
    sp-space--xxl Extra-extra-large spacing for wide gaps or larger layouts. 32px
    sp-space--xl Extra-large spacing for major sections. 24px
    sp-space--lg Large spacing for padding or margins. 16px
    sp-space--md Medium or standard spacing for most UI elements. 12px
    sp-space--sm Small spacing for compact layouts. 8px
    sp-space--xs Extra-small spacing for minimal gaps. 4px
    sp-space--xxs Extra-extra-small spacing for minimal UI gaps. 2px
    panel-heading-padding Padding applied to the heading section of a panel or card. $sp-space--xl
    Table 8. Font weight and shadow and effects variables
    Variable Description Default value
    Font weight variable
    font-weight-lg Font weight used for large or bold text. 600

    This value is calculated using the ceil () function: ceil(($font-weight-base * 1.5)).
    Shadow and effects variables
    sp-panel-box-shadow Shadow styling for panel components. 0 4px 8px 0 rgba(23, 40, 52, 0.08)
    sp-box-shadow--md Medium box shadow effects for UI components.