Variables to customize a theme for Desktop Assistant

  • Release version: Yokohama
  • 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 outlines the CSS variables available for customizing themes in the Desktop Assistant, allowing ServiceNow customers to tailor their user interface to match branding and design preferences. The customization options include colors, typography, spacing, and other UI elements to enhance user experience.

    Show full answer Show less

    Key Features

    • Color Variables: Customize banner, text, button, and alert colors using specific variables to align with brand identity.
    • Layout and Typography: Adjust background colors, font sizes, weights, and families for a cohesive look and feel.
    • Spacing: Define spacing for various UI elements to improve layout and readability.
    • Border and Shadow Effects: Set border styles, widths, and shadow effects for a polished appearance.

    Key Outcomes

    By leveraging these variables, ServiceNow customers can:

    • Create a visually appealing and consistent theme that reflects their brand.
    • Enhance user engagement through improved readability and navigation.
    • Ensure that their UI elements stand out or blend in according to design goals.

    Overall, customizing themes using these variables empowers customers to optimize the Desktop Assistant for their specific needs and preferences.

    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.